在 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 }
还有?
作为分享,如果你还有更好的理解或补充,欢迎留言!