MVC 5 第三章 HTML Helper

提及到HTML helper大家肯定不应该陌生， 因为在书写MVC View的时候肯定需要使用到它。一个HTML Help就是一个返回HTML字符串的方法，这个字符串表示你所期望的类型的内容。例如，你可以使用HTML Helper去呈现标准的HTML标记像HTML <input>, <button>和<image>等标记。如果MVC提供的内建的HTML helper满足不了你的View的输出需求，并且你想输入一种更复杂的类型的内容例如HTML table等等，那么你可以利用MVC提供的定制功能去开发扩展的HTML helper为你所用, 下面我们简单介绍下MVC提供的几种HTML helper.

不同类型的HTML Helpers, 归纳起来MVC提供了如下三种类型的HTML Helper:

1. Inline HTML Helpers(又名内联HTML Helper)

这种类型的HTML Helper只能在定义它的视图View中使用，只能做基本的扩展，缺乏必要的重用性，定义的语法以 Razor @helper 标签开头，后面跟着添加方法的签名，例子如下：

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

2. Built-In Html Helpers(内建的HTML Helper)

此种类型的HTML Helper为MVC默认提供Ship的, 具体细分有可细分为三种类型

1) 标准HTML Helper

HTML Element 示例

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>

 

2) 强类型HTML Helper

这些强类型的Helpers被用于呈现 最常用类型的HTML元素诸如文本框，复选框在强类型的视图中。也就是说视图中HTML元素的创建是基于实体模型属性的。另外，强类型的HTML helpers配合Lambda表达式使用。实体模型对象属性作为一个值被传递给Lambda表达式，并且你可以从实体模型对象中选择字段或属性用来设置HTML helper的id, 名称和值的特性。如下列表列出了最常用的强类型HTML helpers.

HTML Element 示例

 

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>

3）模板类HTML Helpers

这些helpers解决了什么样的HTML元素被用来呈现依据实体模型类的属性。对用户来说这是一个非常灵活的方法，尽管它需要一些初始化的设置。要通过Templated HTML Helper建立正确的HTML元素，可以使用DataAnnotation类的DataType特性。例如，当你使用Password 数据类型的时候，一个templated helper讲自动呈现Password类型的HTML输入元素。具体示例如下所示。

Templated Helper 示例

 

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)

3.自定义Html Helpers(Custom Html Helpers)

如果上述HTML helpers无法满足你的需求，你也可以创建你自己的自定义helper方法，这需要通过创建扩展方法在HTMLHelper类上或者通过在utility类中添加静态方法来实现，具体示例如下所示。

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

                                  P.S. 你永远不知道你能做多少， 只有你去做了才知道.