在 ASP.NET MVC 中使用 HTML Helpers 方法，可以返回得到标准的 HTML 标签，就像 <input>、<button> 或者 <img> 等等。
同样，你也可以创建自己的 HTML Helpers 方法，生成更加复杂的 HTML 内容。
几种不同类型的 HTML Helpers
从以下三种类型去考察 HTML Helpers 的创建和使用
01 在 View 中创建并重复使用
1 @helper ListingItems(string[] items) 2 { 3 <ul> 4 @foreach (string item in items) 5 { 6 <li>@item</li> 7 } 8 </ul> 9 } 10 11 <h3>Programming Languages:</h3> 12 @ListingItems(new string[] { "C", "C++", "C#" }) 13 14 <h3>Book List:</h3> 15 @ListingItems(new string[] { "How to C", "how to C++", "how to C#" })
使用 Razor @helper 在 View 中创建 ListingItems，但只能在同一个 View 中重复使用。
02 内置的 HTML Helper 方法
内置的 HTML Helper 方法是 HtmlHelper class 的扩展方法，可以划分成三种不同的使用：
02.1 标准的 HTML Helper 方法
这种，用来生成常规的 HTML 元素，参见下表
| HTML Element | Example |
| TextBox | @Html.TextBox("Textbox1", "val") Output:
<input id="Textbox1" name="Textbox1" type="text" value="val" />
|
| TextArea |
@Html.TextArea("Textarea1", "val", 5, 15, null)
Output:
<textarea cols="15" id="Textarea1" name="Textarea1" rows="5">val</textarea>
|
| Password |
@Html.Password("Password1", "val")
Output:
<input id="Password1" name="Password1" type="password" value="val" />
|
| Hidden Field |
@Html.Hidden("Hidden1", "val")
Output:
<input id="Hidden1" name="Hidden1" type="hidden" value="val" />
|
| CheckBox |
@Html.CheckBox("Checkbox1", false)
Output:
<input id="Checkbox1" name="Checkbox1" type="checkbox" value="true" />
<input name="myCheckbox" type="hidden" value="false" />
|
| RadioButton |
@Html.RadioButton("Radiobutton1", "val", true)
Output:
<input checked="checked" id="Radiobutton1" name="Radiobutton1"
type="radio" value="val" />
|
| Drop-down list |
@Html.DropDownList (“DropDownList1”, new SelectList(new [] {"Male", "Female"}))
Output:
<select id="DropDownList1" name="DropDownList1">
<option>M</option>
<option>F</option>
</select>
|
| Multiple-select |
Html.ListBox(“ListBox1”, new MultiSelectList(new [] {"Cricket", "Chess"}))
Output:
<select id="ListBox1" multiple="multiple" name="ListBox1">
<option>Cricket</option>
<option>Chess</option>
</select>
|
02.2 强类型的 HTML Helper 方法
这种，可以使用 lambda 表达式，基于 model 对象的属性来创建常规的 HTML 元素容器，并为其设置相应的 id、value、name 等，参见下表：
| HTML Element | Example |
| TextBox |
@Html.TextBoxFor(m=>m.Name)
Output:
<input id="Name" name="Name" type="text" value="Name-val" />
|
| TextArea |
@Html.TextArea(m=>m.Address , 5, 15, new{}))
Output:
<textarea cols="15" id="Address" name=" Address " rows="5">Addressvalue</textarea>
|
| Password |
@Html.PasswordFor(m=>m.Password)
Output:
<input id="Password" name="Password" type="password"/>
|
| Hidden Field |
@Html.HiddenFor(m=>m.UserId)
Output:
<input id=" UserId" name=" UserId" type="hidden" value="UserId-val" />
|
| CheckBox |
@Html.CheckBoxFor(m=>m.IsApproved)
Output:
<input id="Checkbox1" name="Checkbox1" type="checkbox" value="true" />
<input name="myCheckbox" type="hidden" value="false" />
|
| RadioButton |
@Html.RadioButtonFor(m=>m.IsApproved, "val")
Output:
<input checked="checked" id="Radiobutton1" name="Radiobutton1"
type="radio" value="val" />
|
| Drop-down list |
@Html.DropDownListFor(m => m.Gender, new SelectList(new [] {"Male", "Female"}))
Output:
<select id="Gender" name="Gender">
<option>Male</option>
<option>Female</option>
</select>
|
| Multiple-select |
Html.ListBoxFor(m => m.Hobbies, new MultiSelectList(new [] {"Cricket", "Chess"}))
Output:
<select id="Hobbies" multiple="multiple" name="Hobbies">
<option>Cricket</option>
<option>Chess</option>
</select>
|
02.3 模板 HTML Helper 方法
这是一种更加简便的方法，可以使用 lambda 表达式，基于 model 对象的属性来创建常规的 HTML 元素容器，并为其设置相应的 id、value、name 等。不同的是，需要为 model 属性进行数据注释（DataType attribute of DataAnnitation），例如，当你使用 DataType 为 Password 给属性进行数据注释，那么模板 HTML Helper 会自动创建一个类型为 Password 的 HTML input 元素。参见下表：
| Templated Helper | Example |
| Display |
Renders a read-only view of the specified model property and selects an appropriate HTML element based on property’s data type and metadata.
Html.Display("Name") |
| DisplayFor |
Strongly typed version of the previous helper
Html.DisplayFor(m => m. Name) |
| Editor |
Renders an editor for the specified model property and selects an appropriate HTML element based on property’s data type and metadata.
Html.Editor("Name") |
| EditorFor |
Strongly typed version of the previous helper
Html.EditorFor(m => m. Name) |
03 自定义 HTML Helpers
你当然可以创建一个自己的 helper 方法，作为 HTMLHelper 的扩展方法；或者在公共类中创建一个静态方法：
1 using System; 2 using System.Linq.Expressions; 3 using System.Web.Mvc; 4 5 namespace Test.Models 6 { 7 public static class CustomHelpers 8 { 9 //Submit Button Helper 10 public static MvcHtmlString SubmitButton(this HtmlHelper helper, string 11 buttonText) 12 { 13 string str = "<input type="submit" value="" + buttonText + "" />"; 14 return new MvcHtmlString(str); 15 } 16 //Readonly Strongly-Typed TextBox Helper 17 public static MvcHtmlString TextBoxFor<TModel, TValue>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> 18 expression, bool isReadonly) 19 { 20 MvcHtmlString html = default(MvcHtmlString); 21 22 if (isReadonly) 23 { 24 html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper, 25 expression, new 26 { 27 @class = "readOnly", 28 @readonly = "read-only" 29 }); 30 } 31 else 32 { 33 html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper, 34 expression); 35 } 36 return html; 37 } 38 } 39 }
还有？
作为分享，如果你还有更好的理解或补充，欢迎留言！