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

2022-03-17 02:18:13

在 ASP.NET MVC 中使用 HTML Helpers 方法，可以返回得到标准的 HTML 标签，就像 <input>、<button> 或者 <img> 等等。

同样，你也可以创建自己的 HTML Helpers 方法，生成更加复杂的 HTML 内容。

几种不同类型的 HTML Helpers

从以下三种类型去考察 HTML Helpers 的创建和使用

01 在 View 中创建并重复使用

 @helper ListingItems(string[] items)

 {

     <ul>

         @foreach (string item in items)

         {

             <li>@item</li>

         }

     </ul>

 }

 <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#" })

使用 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 的扩展方法；或者在公共类中创建一个静态方法：

 using System;

 using System.Linq.Expressions;

 using System.Web.Mvc;

 namespace Test.Models

 {

     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;

         }

     }

 }

还有？

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

码农公寓