提及到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 标签开头，后面跟着添加方法的签名，例子如下：
class="pln">@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.
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. 你永远不知道你能做多少， 只有你去做了才知道.
相关文章
