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

项目
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() 帮助程序方法。

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

清单 1 - Views\Home\Index.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Index.aspx.vb" 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 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" />    
     <% End Using %>
     </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="VB" AutoEventWireup="false" CodeBehind="Index.aspx.vb" 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.vb

Public Class LabelHelper
Public Shared Function Label(ByVal target As String, ByVal text As String) As String
     Return String.Format("<label for='{0}'>{1}</label>", target, text)
End Function
End Class

清单 2 中的类没有什么特别之处。方法 Label() 只返回一个字符串。

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

清单 2 - Views\Home\Index2.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Index2.aspx.vb" Inherits="MvcApplication1.Index2"%>
<%@ Import Namespace="MvcApplication1" %>
<!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" />
     <% End Using %>
     </div>
</body>
</html>

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

如果要创建与 ASP.NET MVC 框架中包含的标准 HTML 帮助程序一样的工作方式的 HTML 帮助程序，则需要创建扩展方法。扩展方法使你能够将新方法添加到现有类。创建 HTML 帮助程序方法时，将新方法添加到 HtmlHelper 由视图的 Html 属性表示的类中。

清单 3 中的 Visual Basic 模块将名为的 Label() 扩展方法添加到 HtmlHelper 类。应该注意关于此模块的一些事项。首先，请注意模块是使用属性修饰的 <Extension()> 。若要使用此属性，必须导入 System.Runtime.CompilerServices 命名空间

其次，请注意方法的第一个参数 Label() 表示 HtmlHelper 类。扩展方法的第一个参数指示扩展方法扩展的类。

清单 3 – Helpers\LabelExtensions.vb

Imports System.Runtime.CompilerServices

Public Module LabelExtensions
     <Extension()> _
     Public Function Label(ByVal helper As HtmlHelper, ByVal target As String, ByVal text As String) As String
          Return String.Format("<label for='{0}'> {1}</label>", target, text)

     End Function
End Module

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

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

清单 4 中修改后的索引视图使用 Html.Label () 扩展方法来呈现其 <所有标签> 标记。

清单 4 - Views\Home\Index3.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Index3.aspx.vb" Inherits="MvcApplication1.Index3" %>

<%@ Import Namespace="MvcApplication1" %>
<!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" />    
     <% End Using%>
     </div>
</body>
</html>

总结

在本教程中，你了解了两种创建自定义 HTML 帮助程序的方法。首先，你了解了如何通过创建返回字符串的共享方法创建自定义 Label() HTML 帮助程序。接下来，你了解了如何通过在类上HtmlHelper创建扩展方法来创建自定义 Label() HTML 帮助程序方法。

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

通过

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

了解 HTML 帮助程序

使用共享方法创建 HTML 帮助程序

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

总结

反馈

反馈

其他资源