[翻译：ASP.NET MVC 教程]创建自定义HTML辅助函数

时间：2022-01-28 16:16:21

本教程的目标是向你演示怎样在MVC视图中创建可使用的自定义HTML辅助函数。通过利用HTML辅助函数，你可以减少创建标准HTML页面时必须键入的冗长的HTML标签的数量。

在本教程的第一部分，我将描述包含在ASP.NET MVC框架中一些现存的HTML辅助函数。接着，我将描述两种创建自定义HTML辅助函数的方法：通过创建静态方法以及通过创建扩展方法来创建自定义HTML辅助函数。

理解HTML辅助函数

HTML辅助函数就是一个返回字符串的方法。字符串能代表你想要的任何类型的内容。例如，你可以使用HTML辅助函数来呈现像<input>和<img>这样的标准HTML标签。你也可以使用HTML辅助函数来呈现更为复杂的内容，诸如多面板选项卡或是数据库记录的HTML表格。

ASP.NET MVC框架包含了下列一套标准的HTML辅助函数（这并不是完整的列表）：

  • Html.ActionLink()
  • Html.BeginForm()
  • Html.CheckBox()
  • Html.DropDownList()
  • Html.EndForm()
  • Html.Hidden()
  • Html.ListBox()
  • Html.Password()
  • Html.RadioButton()
  • Html.TextArea()
  • Html.TextBox()

例如，考虑清单1中的表单。该表单为两个标准的HTML辅助函数所呈现（见图1）。该表单使用Html.BeginForm()和Html.TextBox()辅助函数方法来呈现一个简单的HTML表单。

[翻译：ASP.NET MVC 教程]创建自定义HTML辅助函数

图1：用HTML辅助函数所呈现的页面

清单1——Views\Home\Index.aspx

<%@ 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.BeginForm()辅助函数方法是被用来创建闭合HTML标签<form>的。注意到Html.BeginForm()方法用using语句被调用。using语句确保<form>标签在using语句块的结尾关闭。

如果你愿意，你可以调用Html.EndForm()辅助函数方法来关闭<form>标签以替代using语句块。使用两者之一来创建闭合<form>标签由你的直觉而定。

在清单1中被使用的Html.TextBox()辅助函数方法是用来呈现HTML <input>标签的。如果你在浏览器中选择查看源代码，那么你将见到清单2中的HTML源。注意到该源包含标准HTML标签。

重要：注意到Html.TextBox()辅助函数方法是以<%= %>标签的形式而不是以<% %>的形式所呈现的。如果你没有包含等号，那么浏览器将不呈现任何内容。

ASP.NET MVC框架包含一套小型的辅助函数。多数情况下，你需要通过自定义HTML辅助函数来扩展MVC框架。在本教程之前所提到的，你将了解到两种创建自定义HTML辅助函数的方法。

清单2——Index.aspx源代码

<%@ 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辅助函数

创建一个新的HTML辅助函数的最简单的方法便是创建一个返回字符串的静态方法。设想一下，例如，你决定创建一个呈现HTML标签<label>的HTML辅助函数。你可以使用清单1中的类来呈现一个<label>标签。

清单1——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);
               }
          }
}

清单1中的类并没有什么特别之处。Label()方法简单地返回了一个字符串。

清单2中修改过的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辅助函数

如果你想要创建像包含在ASP.NET MVC框架中的标准HTML辅助函数那样工作的HTML辅助函数，那么你需要创建扩展方法。控制方法让你向现存的类中添加新方法。当创建一个HTML辅助函数时，你向代表视图Html属性的HtmlHelper类中添加了方法。

清单3中的类向HtmlHelper类中添加了一个名为Label()的扩展方法。对于该类，有不少事是你应当注意的。首先，注意到该类是一个静态类。你必须用静态类来定义一个扩展方法。

其次，注意到Label()方法的第一个参数是由关键字this所引出的。该扩展方法的第一个参数表示该扩展方法继承自该类（即HtmlHelper）。

清单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代码智能提示中（见图2）。唯一的区别在于这些扩展方法以特殊的图符（一个下载箭头图标）缀前出现。

[翻译：ASP.NET MVC 教程]创建自定义HTML辅助函数

图2：使用Html.Label()扩展方法

在清单4中修改过的Index视图使用Html.Label()扩展方法来呈现视图中所有的<label>标签。

清单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辅助函数的两种方法。首先，你了解到怎样通过创建返回字符串的静态方法来创建一个自定义HTML辅助函数Label()。接着，你了解到怎样通过在HtmlHelper类上创建扩展方法来创建一个自定义HTML辅助函数Label()。

在本教程中，我集中于构建一个极为简单的HTML辅助函数方法。意识到HTML辅助函数的复杂度可以由你掌控。你可以构建呈现富文本，诸如树状视图、菜单或是数据库数据表格这样的HTML辅助函数。

作者：Kinglee
文章出处：Kinglee’s Blog ( http://www.cnblogs.com/Kinglee/)
版权声明：本文的版权归作者与博客园共有。转载时须注明本文的详细链接，否则作者将保留追究其法律责任。
标签：

相关文章