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

mvc_tutorial09_cs_figure01

 

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）。唯一的不同是会有一个特殊符号（一个带向下箭头的图标）显示在扩展方法旁边。

mvc_tutorial09_cs_figure02

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 ^_^

posted @ 2008-12-09 21:14  mysun  阅读(363)  评论(0)  编辑  收藏  举报