七、创建自定义的HTML Helper
这篇文章我们来讨论一下如何创建我们自己的HTML Helper ，以便在MVC视图中使用。使用HTML Helper可以减少书写那些烦人的HTML标记。
在这篇文章的第一部分，我们来谈一下ASP.NET MVC框架中现有的HTML Helper，然后我们再来研究两种创建自定义HTML Helper的方法：通过静态方法创建和通过扩展方法创建。
一、理解HTML Helper
HTML Helper就是一个返回字符串的方法，这个字符串能提供你想要的各种类型的内容。比如，我们可以使用HTML Helper呈显标准 的HTML标记（<input>和<img>等），我们也可以使用HTML Helper呈显一些稍复杂的内容，如属性页或HTML Table表格。
ASP.NET MVC框架主要包含下列标准的HTML Helper，但不全。
Html.ActionLink()
Html.BeginForm()
Html.CheckBox()
Html.DropDownList()
Html.EndForm()
Html.Hidden()
Html.ListBox()
Html.Password()
Html.RadioButton()
Html.TextArea()
Html.TextBox()
下面的表单中，使用HTML Helper的两个方法Html.BeginForm()和Html.TextBox()呈显了一个表单。
《图1》
Listing 1 – Views\Home\Index.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head id="Head1" runat="server">
<title>Index</title>
</head>
<body>
<div>
<% using (Html.BeginForm()){ %>
<label for="firstName">First Name:</label>
<br />
<%= Html.TextBox("firstName")%>
<br /><br />
<label for="lastName">Last Name:</label>
<br />
<%= Html.TextBox("lastName")%>
<br /><br />
<input type="submit" value="Register" />
<% } %> 1
</div>
</body>
</html>
Html.BeginForm()方法用来创建一对<form>标记，我们注意到Html.BeginForm()方法放在using语句中，using语句确保在using语句块结束的时候产生一个</form>结束标记。
当然我们也可以不使用using语句块，我们可以使用Html.EndForm()方法来产生</form>结束标记。使用哪种方式可以根据自己的情况来选择。
Html.TextBox()方法用来显示<input>标记，如果我们在浏览器中点击“查看源文件”会看到我们的HTML Helper变成HTML标记了。
Listing 2 – Index.aspx Source
<%@ Page Language="C#" AutoEventWireup="false" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title> </head>
<body>
<div>
<form action="http://localhost:33102/" method="post">
<label for="firstName">First Name:</label>
<br />
<input id="firstName" name="firstName" type="text" value="" />
<br /><br />
<label for="lastName">Last Name:</label>
<br />
<input id="lastName" name="lastName" type="text" value="" />
<br /><br />
<input id="btnRegister" name="btnRegister" type="submit" value="Register" />
</form>
</div>
</body>
</html>
注意：要用<%= %>来显示Html.Text()的内容，而不能用<%%>标记，否则不会在浏览器显示任何数据。
在ASP.NET MVC框架中包含一部分HTML Helper，好多情况下我们需要自定义HTML Helper来扩展MVC框架。在下面的部分我们来学习两种自定义HTML Helper的方法。
二、使用静态方法来创建HTML Helper
最简单的创建HTML Helper的途径是使用返回字符串的静态方法。假设，我们要创建一个HTML Helper，该HTML Helper用来呈显<label>标签，我们可以使用下面的代码来实现
Listing 2 – Helpers\LabelHelper.cs
using System;
namespace MvcApplication1.Helpers
{
public class LabelHelper
{
public static string Label(string target, string text)
{
return String.Format("<label for='{0}'>{1}</label>", target, text);
}
}
}
在上面的代码中没有什么特殊的地方，Label()方法返回一个HTML字符串。
下面的代码就是使用我们的LabelHelper来呈显<label>标签的。这里需要注意的是，视图中包含了一个<%@ import%>指示符，用来导入Application1.Helpers命名空间
Listing 2 – Views\Home\Index2.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApplication1.Views.Home.Index2"%>
<%@ Import Namespace="MvcApplication1.Helpers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Index2</title>
</head>
<body>
<div>
<% using (Html.BeginForm()) { %>
<%= LabelHelper.Label("firstName", "First Name:") %>
<br />
<%= Html.TextBox("firstName")%>
<br /><br />
<%= LabelHelper.Label("lastName", "Last Name:") %>
<br />
<%= Html.TextBox("lastName")%>
<br /><br />
<input type="submit" value="Register" />
<% } %>
</div>
</body>
</html>
三、使用扩展方法来创建HTML Helper
如果我们想让我们自定义的HTML Helper像ASP.NET MVC自带的HTML Helper那样直接使用的话，需要使用扩展方法。扩展方法就是让我们向已存在的类中加入新方法。我们可以给HtmlHelper类中扩展新方法，以达到我们创建自定义HTML Helper的目的。
下面的代码中向HtmlHelper类中扩展了一个名子为Label()的新方法，这里有两点内容需要我们注意：
1、 我们自定义扩展方法的类是一个静态类。
2、 Label()方法的第一个参数有一个this关键字声明，这第一个参数就是指示我们这个扩展方法是扩展的哪个类。
Listing 3 – Helpers\LabelExtensions.cs
using System;
using System.Web.Mvc;
namespace MvcApplication1.Helpers
{
public static class LabelExtensions
{
public static string Label(this HtmlHelper helper, string target, string text)
{
return String.Format("<label for='{0}'>{1}</label>", target, text);
}
}
}
在我们创建完扩展方法后，我们重新生成我们的程序，这时我们就可以在VS的智能感知列表中指到我们的Label()方法，所不一样的是：我们这个扩展方法前面的图标带有一个蓝色的向下箭头。
《图2》
下面是我们使用扩展方法Label()的页面视图代码
Listing 4 – Views\Home\Index3.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index3.aspx.cs" Inherits="MvcApplication1.Views.Home.Index3" %>
<%@ Import Namespace="MvcApplication1.Helpers" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Index3</title>
</head>
<body>
<div>
<% using (Html.BeginForm())
{ %>
<%= Html.Label("firstName", "First Name:") %>
<br />
<%= Html.TextBox("firstName")%>
<br /><br />
<%= Html.Label("lastName", "Last Name:") %>
<br />
<%= Html.TextBox("lastName")%>
<br /><br />
<input type="submit" value="Register" />
<% } %>
</div>
</body>
</html>
总结
在这篇文章中我们学习两种创建自定义HTML Helper的方法。
1、 创建返字符串的静态方法创建自定义HTML Helper
2、 使用对HtmlHelper类编写扩展方法来创建自定义HTML Helper
在这篇文章中，我们创建了一个很简单的自定义HTML Helper，我们可以编写复杂的HTML Helper，如呈显树状目录，菜单或数据表格等 。
