首页 > 代码库 > MVC 5 第三章 HTML Helper
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 示例
输出Output:
<input id="Textbox1" name="Textbox1" type="text" http://www.mamicode.com/http://www.mamicode.com/http://www.mamicode.com/http://www.mamicode.com/http://www.mamicode.com/value="val" />输出Output:
<textarea cols="15" id="Textarea1" name="Textarea1" rows="5">val</textarea>输出Output:
<input id="Password1" name="Password1" type="password" http://www.mamicode.com/http://www.mamicode.com/http://www.mamicode.com/http://www.mamicode.com/http://www.mamicode.com/value="val" />输出Output:
<input id="Hidden1" name="Hidden1" type="hidden" http://www.mamicode.com/http://www.mamicode.com/http://www.mamicode.com/http://www.mamicode.com/http://www.mamicode.com/value="val" />输出Output:
<input id="Checkbox1" name="Checkbox1" type="checkbox" value="http://www.mamicode.com/true" /> <input name="myCheckbox" type="hidden" value="http://www.mamicode.com/false" />输出Output:
<input checked="checked" id="Radiobutton1" name="Radiobutton1" type="radio" http://www.mamicode.com/http://www.mamicode.com/http://www.mamicode.com/http://www.mamicode.com/http://www.mamicode.com/value="val" />输出Output:
<select id="DropDownList1" name="DropDownList1"> <option>M</option> <option>F</option> </select>输出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.
输出Output:
<input id="Name" name="Name" type="text" value="http://www.mamicode.com/Name-val" />输出Output:
<textarea cols="15" id="Address" name=" Address " rows="5">Addressvalue</textarea>输出Output:
<input id="Password" name="Password" type="password"/>输出Output:
<input id=" UserId" name=" UserId" type="hidden" value="http://www.mamicode.com/UserId-val" />输出Output:
<input id="Checkbox1" name="Checkbox1" type="checkbox" value="http://www.mamicode.com/true" /> <input name="myCheckbox" type="hidden" value="http://www.mamicode.com/false" />输出Output:
<input checked="checked" id="Radiobutton1" name="Radiobutton1" type="radio" http://www.mamicode.com/http://www.mamicode.com/http://www.mamicode.com/http://www.mamicode.com/http://www.mamicode.com/value="val" />输出Output:
<select id="Gender" name="Gender"> <option>Male</option> <option>Female</option> </select>输出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输入元素。具体示例如下所示。
Html.Display("Name")
Html.DisplayFor(m => m. Name)
Html.Editor("Name")
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=http://www.mamicode.com/"" + 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. 你永远不知道你能做多少, 只有你去做了才知道.