[译]创建自定义HTML Helper
[译]创建自定义HTML Helper
原文：Creating Custom HTML Helpers
这个教程的目标是说明如何创建自定义HTML Helper，并应用于MVC视图。我们在创建标准的HTML页面时，使用HTML Helper的优势在于可以减少繁琐的HTML标记的输入。
在这个教程的第一部分中，我描述了一些ASP.NET MVC framework中已经存在的HTML Helper。接下来，我描述了创建自定义HTML Helper的两种方法：静态方法和扩展方法。
了解HTML Helper
一个HTML Helper就是一个返回字符串的方法。这个字符串可以是你想要的任何类型的内容。比如，你可以使用HTML Helper呈现像<input>和<img>这样的标准HTML标记。你也可以使用它呈现更多复杂的内容，如标签条或带有数据库数据的HTML表。
ASP.NET MVC framework包括下面的一些标准HTML Helper（并非全部）：
- Html.ActionLink()
- Html.BeginForm()
- Html.CheckBox()
- Html.DropDownList()
- Html.EndForm()
- Html.Hidden()
- Html.ListBox()
- Html.Password()
- Html.RadioButton()
- Html.TextArea()
- Html.TextBox()
例如，我们来看一下Listing 1。这个form是在两个标准HTML Helper的帮助下被呈现出来的（参见Figure 1）。这个form使用Html.BeginForm和Html.TextBox()两个方法呈现了一个简单的HTML form。
Figure 01: Page rendered with HTML Helpers
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" /> <% } %> </div> </body> </html>
Html.BeginForm()用于创建<form>标记，包括</form>标记。请注意，Html.BeginForm()在using语句中被调用（译者：关于using语句和using指令的区别请参考MSDN），using语句可以保证在using块结束的时候</form>被应用。
当然，如果你愿意，也可以使用Html.EndForm()替换using语句来产生</form>标记。究竟使用哪种方法，全凭你的喜好和习惯。
Listing 1中使用Html.TextBox呈现<input>标记。通过浏览器的“查看源文件”命令，你可以看到如Listing 2的HTML源代码。请注意，源代码中包含的全部是标准HTML标记。
注意：Html.TextBox()方法被用于<%= %>，而非<% %>，如果你没有包含等号，浏览器不会呈现任何内容。
ASP.NET MVC Framework只包括了一小部分HTML Helper，你很有可能需要扩展MVC Framework，自定义HTML Helper。在这个教程的接下来部分，你会学到创建自定义HTML Helper的两种方法。
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 Helper
创建自定义HTML Helper的最简单途径就是创建一个返回字符串的静态方法。想像一下，比如你决定创建一个新的HTML Helper用于呈现<label>标记。你可以使用Listing 3中的类来呈现一个<label>。
Lising 3 – 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); } } }
Listing 3中的类没有什么特别的。Label()方法只是简单的返回一个字符串。
在Listing 4中，我们修改Index视图，使用LabelHelper来呈现<label>标记。请注意，在视图中包含了一个<%@ imports %>指令，用于导入MvcApplication1.Helpers命名空间。
Listing 4 – 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 framework中所包含的标准HTML Helper一样工作。扩展方法允许我们给一个已经存在的类加入新的方法。When creating an HTML Helper method, you add new methods to the HtmlHelper class represented by a view’s Html preperty.
Listing 5中的类，给HtmlHelper类加了一个名为Label()的扩展方法。有几件事情需要我们注意。第一，这是一个静态类。我们必须定义给这个类定义一个扩展方法。
第二，在Label()方法的第一个参数之前使用关键字this。扩展方法的第一个参数指示说明扩展方法所扩展的类。
Listing 5 – 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); } } }
在我们创建扩展方法之后，并成功编译应用程序，Label()方法会显示在Visual Studio Intellisense中，就像类中其他的所有方法一样（参见Figure 2）。唯一的不同是会有一个特殊符号（一个带向下箭头的图标）显示在扩展方法旁边。
Figure 02: Using the Html.Label() extension method
在Listing 6中，我们修改了Index视图，使用Html.Label()来呈现<label>标记。
Listing 6 – 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 Helpers方法。第一，我们学习了如何通过返回字符串的静态方法来创建一个自定义Label() HTML Helper。第二，我们学习了如何通过创建HtmlHelper类的扩展方法来创建自定义Label() HTML Helper。
在这个教程中，我们着眼于构建一个非常简单的HTML Helper方法。实际上，HTML Helper表现的更为复杂。我们可以创建HTML Helper，用于呈现树状图、菜单或Grid等等。
第一帖，请大家多给指点。我会继续翻译一些我喜欢的文章，谢谢大家，谢谢原作者，谢谢cnblogs.com ^_^