[译]创建自定义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等等。