建立自訂的 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() Helper 方法來呈現簡單的 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 () Helper 方法可用來建立開頭和結尾的 HTML <form> 標籤。請注意，方法 Html.BeginForm() 是在 using 語句內呼叫。 using 語句可確保 <form> 標記會在 using 區塊的結尾關閉。

如果您想要，而不是使用區塊來建立，您可以呼叫 Html.EndForm () Helper 方法來關閉 <form> 標籤。使用哪種方法來建立最直覺的開頭和結尾 <form> 標籤。

Helper 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 Helper 方法時，您會將新方法新增至檢視的 Html 屬性所代表的 HtmlHelper 類別。

清單 3 中的類別會將擴充方法新增至名為的 HtmlHelperLabel() 類別。您應該留意到這個類別的一些事項。首先，請注意類別是靜態類別。您必須使用靜態類別來定義擴充方法。

第二，請注意，方法的第一個參數 Label() 前面加上關鍵字 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 Helper 方法。

在本教學課程中，我著重于建置非常簡單的 HTML 協助程式方法。瞭解 HTML 協助程式可以像您想要一樣複雜。您可以建置 HTML 協助程式來呈現豐富的內容，例如樹狀檢視、功能表或資料庫資料的資料表。

上一個下一個

Share via

建立自訂的 HTML 協助程式 (C#)

瞭解 HTML 協助程式

使用靜態方法建立 HTML 協助程式

使用擴充方法建立 HTML 協助程式

總結

意見反應

意見反應

其他資源