在 ASP.NET MVC 中使用 HTML Helpers 的那些事

在 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 }

还有？

作为分享，如果你还有更好的理解或补充，欢迎留言！

 

posted @ 2015-11-23 10:34  duanyong  阅读(321)  评论(0)  编辑  收藏  举报