ひろゆきcoding筆記本

有時候傳輸 form data 有一種需求，就是有資料需要靠 name 繫結然後傳到後端做處理，但又不想讓使用者看到，這時就常常使用 <input type="hidden"> ，例如商品 ID 會在 View 放在 <input type="hidden" name="productId" value="ab0123456"> 或類似的應用。而產生這樣的標籤可以使用 @Html.Hidden() 方法，一個引數時表示 id 和 name： @Html.Hidden("productId") // 會產生： <input id="productId" name="productId" type="hidden" value="" /> 若要馬上將值帶入 value，使用第二個引數： @Html.Hidden("productId" , "ab0123456") // 會產生： <input id="productId" name="productId" type="hidden" value="ab0123456" /> 三個引數時可帶入 HTML Attribute 增加樣式或事件，要使用匿名類別（但好像沒什麼會這樣的需求）： @Html.Hidden("productId" , "ab0123456" , new { onchange = "checkValue()" } ) // 會產生： <input id="productId" name="productId" onchange="checkValue()" type=...

要產生 <select> 和 <option> ，利用 System.Web.Mvc 命名空間下的 SelectListItem 類型，可製造出下拉選單，在 Controller 或 Model 中先建好資料： using System.Web.Mvc; List<SelectListItem> cities = new List<SelectListItem>() { new SelectListItem{ Text = "台南", Value = "Tainan" }, new SelectListItem{ Text = "高雄", Value = "Kaohsiung" }, new SelectListItem{ Text = "台中", Value = "Taichiung" }, new SelectListItem{ Text = "桃園", Value = "Taoyuan" }, new SelectListItem{ Text = "台北", Value = "Taipei" } }; cities.Where(c => c.Text == "桃園") .FirstOrDefault() .Selected = true; // Selected 屬性表示預設是哪一個選項被選取 ViewBag.cities = cities; // 利用 ViewBag 將資料帶去 View return View(); 然後在 View 中： @{ // ViewBag 不用轉型，但要先宣告， IEnumerable<SelectListItem> cities = ViewBag.cities; // 不能直接...

要產生勾選方塊的 <input type="checkbox">，使用 @Html.CheckBox()，一個引數時表示 id 和 name，如下： @Html.CheckBox("isMarried")已婚 // 會產生： <input id="isMarried" name="isMarried" type="checkbox" value="true" /> <input name="isMarried" type="hidden" value="false" />已婚 會看到產生的 HTML 會有兩個，一個 @Html.CheckBox 會產生兩個 <input>，一個是 type="checkbox" 另一個是 type="hidden"，畫面上是看不到 hidden 的，用意是在前端沒有勾選 checkbox 時，後端 form 會得到該 name 的 value 是 false，而前端勾選 checkbox 時後端會得到 true。 第二個引數是預設是否勾選的布林值，會增加 checked 屬性： @Html.CheckBox("isMarried" , true)已婚 // 會產生： <input checked="checked" id="isMarried" name="isMarried" type="checkbox" value="true" /> <input name="isMarried" type="hidden" value="false" />已婚 可在第三個引數加上 HTML 屬性，例如樣式或事件： @Html.CheckBox("isMarr...

要產生單選的 <input type="radio"> 要使用 @Html.RadioButton()，而且至少要兩個引數： @Html.RadioButton("grade" // 第一個引數做為 id 和 name , 1)一年級<br /> // 第二個引數為 value @Html.RadioButton("grade" , 2)二年級<br /> @Html.RadioButton("grade" , 3)三年級<br /> // 會產生： <input id="grade" name="grade" type="radio" value="1" />一年級<br /> <input id="grade" name="grade" type="radio" value="2" />二年級<br /> <input id="grade" name="grade" type="radio" value="3" />三年級<br /> 同 name 下會算為同一個 group，所以不需要再帶 group 屬性。如果要指定哪個選項是預設點選的，使用第三個引數： @Html.RadioButton("grade" , 1)一年級<br /> @Html.RadioButton("grade" , 2 , true)二年級<br /...

密碼欄位可用 @Html.Password() 快速產生，一個引數時是表示 id 和 name： @Html.Password("pwd") // 可產生： <input id="pwd" name="pwd" type="password" /> 兩個引數時第二個是預設填入的值： @Html.Password("pwd" , "abc1234") // 可產生： <input id="pwd" name="pwd" type="password" value="abc1234" /> 三個引數時可在第三個引數用匿名類別 new { } 帶入 HTML 屬性： @Html.Password("pwd" , null , new { placeholder = "請輸入密碼", maxLength = "15" }) // 可產生： <input id="pwd" maxLength="15" name="pwd" placeholder="請輸入密碼" type="password" /> 我們常常在登入帳號時，也會設計 Model 或 ViewModel： public class VMLogin { public string Account { get; set; } public string Password { get; set; } } 例如 Controller 帶入一個 VMLogin 到 View： VMLogin vModel = new VMLogin(); return View(vModel); 在 View 中可用強型別的 PasswordFor() 快速產...

<input> 常常搭配 <label> 方便點選，產生的方法是 @Html.Label()，一個引數的寫法如下： @Html.Label("帳號：") // 會產生： <label for="帳號：">帳號：<label> 但是上面的結果通常不是我們要的，for 屬性要填別的 <input> 的 id ，常常是變數，這就要用兩個引數： @Html.Label("txtAccount" // 成為 for，填的是點選後會 focus 到的目標 id , "帳號：") // 成為 textContent ，顯示的文字內容 // 會產生： <label for="txtAccount">帳號：<label> 也可用第三個引數帶入 HTML 屬性，使用匿名類別 new { } ： @Html.Label("txtAccount"： , "帳號：" , new { @class = "label-title" } ) // 會產生： <label class="label-title" for="txtAccount">帳號：<label> 以上因為 class 是保留字所以前面要加上 @ 。另外有繫結 Model 時可用強型別的方法，例如這是從 Controller 帶往 View 的 ViewModel： public class VMLogin { public string Account { get; set; } public string Password { get; set; } } VMLogin vModel = new VMLogin(); return View(vModel); 而 View 中可用 LabelFor(...

產生 <textarea> 標籤用的是 @Html.TextArea() 方法，TextArea() 很像 TextBox()。第一個引數是字串，做為 id 和 name ： @Html.TextArea("comment") // 會產生： <textarea cols="20" id="comment" name="comment" rows="2"></textarea> 會預設有一個適當大小，row="2" col="20，下面會示範還可以調整。若使用第二個引數可用字串填入預設文字，也就是前後標籤包起來的內容： @Html.TextArea("comment" , "很好吃" ) // 會產生： <textarea cols="20" id="comment" name="comment" rows="2">很好吃</textarea> 或是用第二個引數帶入 HTML 屬性，使用匿名類別 new { } ： @Html.TextArea("comment" , new { placeholder = "請留下您的評價" } ) // 會產生： <textarea cols="20" id="comment" name="comment" placeholder="請留下您的評價" rows="2"></textarea> 使用三個引數可一次帶入已填入文字和 HTML 屬性，例如： @Html.TextArea("comment" , "氣氛不錯" ...