通过

创建自定义 HTML Helper

  • 项目

这是 Visual C# 教程（转到 Visual Basic 教程）

本教程的目的是向您演示如何创建可在 MVC 视图中使用的 HTML Helper。通过利用 HTML Helper，可以减少创建标准 HTML 页面所需键入的 HTML 标记的工作量。

在本教程的第一部分中，作者描述了 ASP.NET MVC Framework 中包含的一些现有的 HTML Helper。接下来，作者描述了两种创建自定义 HTML Helper 的方法：解释了如何通过创建静态方法和扩展方法创建自定义 HTML Helper。

« 前一篇教程  |  下一篇教程 »

了解 HTML Helper

HTML Helper 是一种返回字符串的方法。字符串可以代表希望的任何类型内容。例如，可以使用 HTML Helper 呈现标准的 HTML 标记，如 HTML<input> 和<img>标记。也可以使用 HTML Helper 呈现更复杂的内容，如标签条或数据库数据的 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()

例如，程序清单 1 中的表单在两个标准 HTML Helper 的帮助下呈现，如图 1 所示。此表单使用Html.BeginForm()和Html.TextBox() Helper 方法呈现了一个简单的 HTML 表单。

图 1：使用 HTML Helper 呈现的页面（单击查看大图）

程序清单 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() Helper 方法用于创建开始和结束 HTML<form>标记。请注意，Html.BeginForm() 方法在 using 语句中调用。using 语句确保<form> 标记在 using 块的结尾处结束。

如果愿意，可以不创建 using 块，而是调用 Html.EndForm() Helper 方法来结束 <form>标记。不管用哪种方法创建开始和结束<form> 标记，都显得非常直观。

程序清单 1 中使用 Html.TextBox() Helper 方法呈现 HTML<input>标记。如果在浏览器中选择查看源代码，则可以看到程序清单 2 中的 HTML 源代码。请注意，源代码包含标准的 HTML 标记。

重要事项：请注意，Html.TextBox()HTML Helper 使用 <%= %> 标记而不是<% %>标记呈现。如果不包括等号，则浏览器中不会呈现任何内容。

ASP.NET MVC Framework 包含少量的 Helper。大多数情况下，需要使用自定义 HTML Helper 扩展 MVC Framework。在本教程后面的部分中，我们将学习创建自定义 HTML Helper 的两种方法。

程序清单 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="https://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 <label> 标记的新 HTML Helper。可以使用程序清单 2 中的类呈现 <label>。

程序清单 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);
               }
          }
}

程序清单 2 中的类没有任何特别之处。Label() 方法只是返回字符串。

程序清单 3 中修改后的 Index 视图使用 LabelHelper 呈现 HTML <label> 标记。请注意，视图包含 <%@ imports %> 指示导入 Application1.Helpers 命名空间。

程序清单 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

如果想创建如同 ASP.NET MVC Framework 中标准的 HTML Helper 一样工作的 HTML Helper，则需要创建扩展方法。扩展方法可以用于向现有类添加新的方法。创建 HTML Helper 方法时，会将新方法添加到由视图的 Html 属性表示的 HtmlHelper 类中。

程序清单 3 中的类将扩展方法添加到名称为 Label() 的 HtmlHelper 类中。关于此类，有几点需要注意的地方。首先，请注意这个类是静态类。必须在静态类中定义扩展方法。

其次，请注意 Label() 方法的第一个参数前具有关键字 this。扩展方法的第一个参数表明扩展方法所扩展的类。

程序清单 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);
          }
     }
}

创建扩展方法并成功生成应用程序后，扩展方法如同类的其他所有方法一样出现在 Visual Studio Intellisense 中，如图 2 所示。唯一的不同之处是，扩展方法旁会显示一个特殊的符号（向下箭头图标）。

图 2：使用 Html.Label() 扩展方法（单击查看大图）

程序清单 4 中修改后的 Index 视图使用 Html.Label() 扩展方法呈现所有的 <label>标记。

<%@ 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 的两种方法。首先，我们学习了如何通过创建返回字符串的静态方法创建自定义 Label() HTML Helper。接下来，我们学习了如何通过在 HtmlHelper 类中创建扩展方法创建自定义 Label() HTML Helper 方法。

在本教程中，作者集中构建了一个非常简单的 HTML Helper 方法。但 HTML Helper 也可以尽可能复杂。可以构建呈现丰富的内容（如视图、菜单或数据库数据表）的 HTML Helper。





下一篇教程