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用的。