【翻译】了解ASP.NET MVC的HTML助手

原文：Understanding HTML Helpers in ASP.NET MVC

作者：Shailendra Chauhan works as Software Analyst at reputed MNC and has more than 5 years of hand over Microsoft .NET technologies. He is a .NET Consultant and is the founder & chief editor of www.dotnet-tricks.com and www.dotnetinterviewtricks.com blogs. He is author of book ASP.NET MVC Interview Questions and Answers.
He loves to work with web applications and mobile apps using Microsoft technology including ASP.NET, MVC, C#, SQL Server, WCF, Web API, Entity Framework,Cloud Computing, Windows Azure, jQuery, jQuery Mobile, Knockout.js, Angular.js and many more web technologies. More...

HTML助手就是用来返回HTML字符串的方法。这些字符串可以用来表现你所期望的任何内容。例如，可以使用HTML助手来渲染标准的HTML标记，如HTML的<input>、<button>和<img>等标记。


还可以通过创建自定义的HTML助手来渲染更多更复杂的内容，如菜单条或用来显示数据库数据的HTML表格。
 

不同类型的HTML助手

以下列出了三种类下的HTML助手：

内联式的HTML助手

这些需要在同一视图内使用Razor的@hepler标记来创建。这些助手可以在同一视图内被重用。

    @helper ListingItems(string[] items)
    {
    <ol>
    @foreach (string item in items)
    {
    <li>@item</li>
    }
    </ol>
    }
     
    <h3>Programming Languages:</h3>
     
    @ListingItems(new string[] { "C", "C++", "C#" })
     
    <h3>Book List:</h3>
     
    @ListingItems(new string[] { "How to C", "how to C++", "how to C#" })

内置的HTML助手

内置的HTML助手是HtmlHelper类的扩展方法。内置的HTML助手可以划分为3种类型：

标准的HTML助手

这些助手可以用来渲染最常用的HTML元素类型，如HTML文本输入框、复选框等。以下是最常用的标准Html助手列表：

HTML元素	示例
TextBox	@Html.TextBox("Textbox1", "val") 输出： <input id="Textbox1" name="Textbox1" type="text" value="val" />
TextArea	@Html.TextArea("Textarea1", "val", 5, 15, null) 输出： <textarea cols="15" id="Textarea1" name="Textarea1" rows="5">val</textarea>
Password	@Html.Password("Password1", "val") 输出： <input id="Password1" name="Password1" type="password" value="val" />
Hidden Field	@Html.Hidden("Hidden1", "val") 输出： <input id="Hidden1" name="Hidden1" type="hidden" value="val" />
CheckBox	@Html.CheckBox("Checkbox1", false) 输出： <input id="Checkbox1" name="Checkbox1" type="checkbox" value="true" /> <input name="myCheckbox" type="hidden" value="false" />
RadioButton	@Html.RadioButton("Radiobutton1", "val", true) 输出： <input checked="checked" id="Radiobutton1" name="Radiobutton1" type="radio" value="val" />
Drop-down list	@Html.DropDownList (“DropDownList1”, new SelectList(new [] {"Male", "Female"})) 输出： <select id="DropDownList1" name="DropDownList1"> <option>M</option> <option>F</option> </select>
Multiple-select	Html.ListBox(“ListBox1”, new MultiSelectList(new [] {"Cricket", "Chess"})) 输出： <select id="ListBox1" multiple="multiple" name="ListBox1"> <option>Cricket</option> <option>Chess</option> </select>

强类型的HTML助手

这些助手主要用来在强类型视图内渲染最常用的HTML元素类型，如HTML文本输入框、复选框等等。HTML元素会根据模型属性来创建。强类型HTML助手需要与lambda表达式一起使用。模型对象会被作为lambda表达式的值来传递，而你可以从模型中选择一个字段或属性来设置HTML助手id、名称和值属性。以下是最常用的强类型HTML助手的列表：

HTML元素	示例
TextBox	@Html.TextBoxFor(m=>m.Name) 输出： <input id="Name" name="Name" type="text" value="Name-val" />
TextArea	@Html.TextArea(m=>m.Address , 5, 15, new{})) 输出： <textarea cols="15" id="Address" name=" Address " rows="5">Addressvalue</textarea>
Password	@Html.PasswordFor(m=>m.Password) 输出： <input id="Password" name="Password" type="password"/>
Hidden Field	@Html.HiddenFor(m=>m.UserId) 输出： <input id=" UserId" name=" UserId" type="hidden" value="UserId-val" />
CheckBox	@Html.CheckBoxFor(m=>m.IsApproved) 输出： <input id="Checkbox1" name="Checkbox1" type="checkbox" value="true" /> <input name="myCheckbox" type="hidden" value="false" />
RadioButton	@Html.RadioButtonFor(m=>m.IsApproved, "val") 输出： <input checked="checked" id="Radiobutton1" name="Radiobutton1" type="radio" value="val" />
Drop-down list	@Html.DropDownListFor(m => m.Gender, new SelectList(new [] {"Male", "Female"})) 输出： <select id="Gender" name="Gender"> <option>Male</option> <option>Female</option> </select>
Multiple-select	Html.ListBoxFor(m => m.Hobbies, new MultiSelectList(new [] {"Cricket", "Chess"})) 输出： <select id="Hobbies" multiple="multiple" name="Hobbies"> <option>Cricket</option> <option>Chess</option> </select>

模板化的HTML助手

这些助手需要弄清楚那些HTML元素是被要求基于模型类的属性进行渲染的。尽管这需要一些细致和耐心的设置，但这是一种将数据显示给用户的非常灵活的做法。为了使用模板化的HTML助手来设置适合的HTML元素，需要使用DataAnnitation类的DataType特性。

例如，当使用DataType作为密码，模板化的助手会自动渲染密码类型的HTML的input元素。

模板化助手	示例
Display	渲染一个指定模型属性的只读视图，并基于属性的数据类型和元数据选择适当的HTML元素。 Html.Display("Name")
DisplayFor	前一个的助手的强类型版本。 Html.DisplayFor(m => m. Name)
Editor	为指定的模型属性渲染一个编辑器，并给予属性的数据类型和元数据选择适当的HTML元素。 Html.Editor("Name")
EditorFor	前一个的助手的强类型版本。 Html.EditorFor(m => m. Name)

自定义的HTML助手

还可以通过创建HtmlHelper类的扩展方法或在功能类内创建静态方法的方式来创建自定义的辅助方法。

    public static class CustomHelpers
    {
    //Submit Button Helper
    public static MvcHtmlString SubmitButton(this HtmlHelper helper, string
    buttonText)
    {
    string str = "<input type=\"submit\" value=\"" + buttonText + "\" />";
    return new MvcHtmlString(str);
    }
    //Readonly Strongly-Typed TextBox Helper
    public static MvcHtmlString TextBoxFor<TModel, TValue>(this
    HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>>
    expression, bool isReadonly)
    {
    MvcHtmlString html = default(MvcHtmlString);
     
    if (isReadonly)
    {
    html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper,
    expression, new { @class = "readOnly",
    @readonly = "read-only" });
    }
    else
    {
    html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper,
    expression);
    }
    return html;
    }
    }