创建自定义 HTML 帮助程序 (C#)

项目
07/13/2023

本教程的目的是演示如何创建可在 MVC 视图中使用的自定义 HTML 帮助程序。通过利用 HTML 帮助程序，可以减少创建标准 HTML 页面时必须执行的 HTML 标记的繁琐键入量。

本教程的目的是演示如何创建可在 MVC 视图中使用的自定义 HTML 帮助程序。通过利用 HTML 帮助程序，可以减少创建标准 HTML 页面时必须执行的 HTML 标记的繁琐键入量。

在本教程的第一部分中，我将介绍 ASP.NET MVC 框架附带的一些现有 HTML 帮助程序。接下来，我介绍两种创建自定义 HTML 帮助程序的方法：说明如何通过创建静态方法和创建扩展方法创建自定义 HTML 帮助程序。

了解 HTML 帮助程序

HTML 帮助程序只是返回字符串的方法。字符串可以表示所需的任何类型的内容。例如，可以使用 HTML 帮助程序来呈现标准 HTML 标记，如 HTML <input> 和 <img> 标记。还可以使用 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 窗体。

图 01：使用 HTML 帮助程序呈现的页面 (单击以查看全尺寸图像)

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

如果愿意，可以调用 Html.EndForm () 帮助程序方法来关闭 <form> 标记，而不是创建 using 块。使用哪种方法来创建对你看起来最直观的开始和结束 <form> 标记。

Html.TextBox()帮助程序方法在列表 1 中用于呈现 HTML <input> 标记。如果在浏览器中选择“查看源”，则会在清单 2 中看到 HTML 源。请注意，源包含标准 HTML 标记。

重要

请注意， Html.TextBox()-HTML 帮助程序是使用 <%= %> 标记而不是标记呈现的 <% %> 。如果未包含等号，则不会向浏览器呈现任何内容。

ASP.NET MVC 框架包含一小组帮助程序。很可能需要使用自定义 HTML 帮助程序扩展 MVC 框架。在本教程的其余部分，你将了解两种创建自定义 HTML 帮助程序的方法。

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

创建新的 HTML 帮助程序的最简单方法是创建返回字符串的静态方法。例如，假设你决定创建一个新的 HTML 帮助程序来呈现 HTML <label> 标记。可以使用清单 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 中修改后的索引视图使用 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 中的类将扩展方法添加到名为的HtmlHelperLabel()类。有关此类，应注意一些事项。首先，请注意类是静态类。必须使用静态类定义扩展方法。

其次，请注意方法的第一个参数Label()前面是关键字 (keyword) this。扩展方法的第一个参数指示扩展方法扩展的类。

清单 3 – Helpers\LabelExtensions.cs

using System;
using System.Web.Mvc;

namespace MvcApplication1.Helpers
{
     public static class LabelExtensions
     {
          public static string Label(this IHtmlHelper helper, string target, string text)
          {
               return String.Format("<label for='{0}'>{1}</label>", target, text);
          }
     }
}

创建扩展方法并成功生成应用程序后，扩展方法会显示在 Visual Studio Intellisense 中，就像类的所有其他方法一样 (请参阅图 2) 。唯一的区别在于，扩展方法旁边会显示一个特殊符号， () 向下箭头的图标。

图 02：使用 Html.Label () 扩展方法 (单击以查看全尺寸图像)

列表 4 中修改的索引视图使用 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 帮助程序的方法。首先，你了解了如何通过创建返回字符串的静态方法创建自定义 Label() HTML 帮助程序。接下来，你了解了如何通过在类上HtmlHelper创建扩展方法来创建自定义 Label() HTML 帮助程序方法。

在本教程中，我重点介绍如何构建一个极其简单的 HTML 帮助程序方法。请注意，HTML 帮助程序可以根据需要复杂。可以生成 HTML 帮助程序来呈现丰富的内容，例如树视图、菜单或数据库数据表。

通过

创建自定义 HTML 帮助程序 (C#)

了解 HTML 帮助程序

使用静态方法创建 HTML 帮助程序

使用扩展方法创建 HTML 帮助程序

总结

反馈

其他资源