Html輔助方法 之 Form表單標籤
一、Html.BeginForm <form>標籤
//檢視程式碼 @using (Html.BeginForm("search", "home", FormMethod.Get),new { target="_black",@class="form1" }) { <input type="text" value="" /> } //生成的HTML程式碼 <form action="/home/search" class="form1" method="get" target="_black"> <input type="text" value="" /> </form>
new裡面的叫做htmlAttributes,能夠設定本控制元件的HTML屬性,至於class前面加個@是因為class在C#裡是關鍵字。
二、Html.TextBox <input type="text" /> 標籤
//檢視程式碼 @Html.TextBox("Age", "23", new { @class="text1" }) //生成的HTML程式碼 <input class="text1" id="Age" name="Age" type="text" value="23" />
三、Html.TextArea <textarea>標籤
//檢視程式碼 @Html.TextArea("textarea1", "我是一個textarea", new { @class="text_style" }) //生成的HTML程式碼<textarea class="text_style" cols="20" id="textarea1" name="textarea1" rows="2"> 我是一個textarea </textarea>
四、Html.Label <label>標籤
//檢視程式碼 @Html.Label("label1","你好") //生成的HTML程式碼 <label for="label1">你好</label>
五、Html.DropDownList 僅允許單選<select>
//檢視程式碼 @{ List<SelectListItem> list = new List<SelectListItem> { new SelectListItem { Text = "啟用", Value = "0",Selected = true}, new SelectListItem { Text = "禁用", Value = "1" } }; } @Html.DropDownList("state",list,null,new{})
//生成的Html程式碼
<select id="state" name="state">
<option selected="selected" value="0">啟用</option>
<option value="1">禁用</option>
</select>
六、Html.ListBox 允許多選的<select>
//檢視程式碼為 @{ List<SelectListItem> list = new List<SelectListItem> { new SelectListItem { Text = "啟用", Value = "0",Selected = true}, new SelectListItem { Text = "禁用", Value = "1" } }; } @Html.ListBox("state",list) //生成的HTML程式碼為 <select id="state" multiple="multiple" name="state"> <option selected="selected" value="0">啟用</option> <option value="1">禁用</option> </select>
七、Html.Hidden <input type="hidden" />
//檢視程式碼 @Html.Hidden("hidden1","我是一個隱藏域",new{}); //輸出到瀏覽器的HTML程式碼 <input id="hidden1" name="hidden1" type="hidden" value="我是一個隱藏域" />;
八、Html.Password <input type="password" />
//檢視程式碼 @Html.Password("password1", 123321, new { @class="class1" }) //生成的HTML程式碼為 <input class="class1" id="password1" name="password1" type="password" value="123321" />
九、Html.RadioButton <input type="radio" />
//檢視程式碼 @Html.RadioButton("radio1",1,false) @Html.RadioButton("radio1",2,false) @Html.RadioButton("radio1",3,true) //生成的HTML程式碼為 <input id="radio1" name="radio1" type="radio" value="1" /> <input id="radio1" name="radio1" type="radio" value="2" /> <input checked="checked" id="radio1" name="radio1" type="radio" value="3" />
十、Html.CheckBox <input type="checkbox" />
//檢視程式碼 男人:@Html.CheckBox("check1", true, new { }); 女人:@Html.CheckBox("check1", false, new { }); 其它:@Html.CheckBox("check1", false, new { }); //生成的HTML程式碼為: 男人:<input checked="checked" id="check1" name="check1" type="checkbox" value="true" /><input name="check1" type="hidden" value="false" />; 女人:<input id="check1" name="check1" type="checkbox" value="true" /><input name="check1" type="hidden" value="false" />; 其它:<input id="check1" name="check1" type="checkbox" value="true" /><input name="check1" type="hidden" value="false" />;
十一、ActionLink <a>
@Html.ActionLink("列表頁", "list") //生成的HTML程式碼 <a href="/Home/list">列表頁</a>
十二、自動繫結
N、輔助方法在構建UI的同時會幫助繫結到控制元件
例如:
//這是一個controller public ActionResult Index() { ViewBag.Name = "張三"; return View(); } //在視圖裡面有一個 @Html.TextBox("Name"); //瀏覽器中生成 <input id="Name" name="Name" type="text" value="張三" />
我們看到,在構建UI的時候,我們設定了一個ViewBag.Name,而同時視圖裡面又有一個TextBox("Name");在相同名稱的情況下,MVC自動為我們綁定了資料。再來看一個:
//後端程式碼 public class Man { public string Name { get; set; } } public ActionResult Index() { ViewBag.man = new Man { Name = "張三" }; return View(); } //檢視程式碼 @Html.TextBox("man.Name") //生成的HTML程式碼 <input id="man_Name" name="man.Name" type="text" value="" />
留意到,id的名稱中的.已經變為下劃線,這是以為"."在Id裡面是不合法的,也是要留給javascript用的。