使用 TagBuilder 類別建置 HTML 協助程式 (C#)

作者：Stephen Walther

Stephen Walther 會在名為 TagBuilder 類別的 ASP.NET MVC 架構中，為您介紹實用的公用程式類別。 您可以使用 TagBuilder 類別輕鬆地建置 HTML 標籤。

ASP.NET MVC 架構包含一個名為 TagBuilder 類別的實用公用程式類別，您可以在建置 HTML 協助程式時使用。 TagBuilder 類別，如同類別的名稱所建議，可讓您輕鬆地建置 HTML 標籤。 在本簡短教學課程中，您會提供 TagBuilder 類別的概觀，並瞭解如何在建置轉譯 HTML img > 標籤的簡單 HTML < 協助程式時使用此類別。

TagBuilder 類別的概觀

TagBuilder 類別包含在 System.Web.Mvc 命名空間中。 它有五種方法：

• AddCssClass () - 可讓您將新的 class=「」 屬性新增至標記。
• GenerateId () - 可讓您將 id 屬性新增至標記。 這個方法預設會自動取代識別碼 (中的句點，句點會取代為底線)
• MergeAttribute () - 可讓您將屬性新增至標記。 這個方法有多個多載。
• SetInnerText () - 可讓您設定標記的內部文字。 內部文字會自動進行 HTML 編碼。
• ToString () - 可讓您轉譯標記。 您可以指定是否要建立一般標籤、開始標記、結束標記或自我結束記號。

TagBuilder 類別有四個重要屬性：

• 屬性 - 代表標記的所有屬性。
• IdAttributeDotReplacement - 代表 GenerateId () 方法用來取代句點的字元， (預設值為底線) 。
• InnerHTML - 代表標記的內部內容。 將字串指派給這個屬性 並不會 對字串進行 HTML 編碼。
• TagName - 代表標記的名稱。

這些方法和屬性可讓您建立 HTML 標籤所需的所有基本方法和屬性。 您不需要真的需要使用 TagBuilder 類別。 您可以改用 StringBuilder 類別。 不過，TagBuilder 類別可讓您的生活變得更輕鬆。

建立影像 HTML 協助程式

當您建立 TagBuilder 類別的實例時，您會將要建置的標記名稱傳遞至 TagBuilder 建構函式。 接下來，您可以呼叫 AddCssClass 和 MergeAttribute () 方法等方法來修改標記的屬性。 最後，您會呼叫 ToString () 方法來轉譯標記。

例如，清單 1 包含影像 HTML 協助程式。 映射協助程式會在內部使用代表 HTML < img > 標籤的 TagBuilder 來實作。

清單 1 - Helpers\ImageHelper.cs

using System.Web.Mvc;
using System.Web.Routing;

namespace MvcApplication1.Helpers
{
    public static class ImageHelper
    {
        public static string Image(this HtmlHelper helper, string id, string url, string alternateText)
        {
            return Image(helper, id, url, alternateText, null);
        }

        public static string Image(this HtmlHelper helper, string id, string url, string alternateText, object htmlAttributes)
        {
            // Create tag builder
            var builder = new TagBuilder("img");
            
            // Create valid id
            builder.GenerateId(id);

            // Add attributes
            builder.MergeAttribute("src", url);
            builder.MergeAttribute("alt", alternateText);
            builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

            // Render tag
            return builder.ToString(TagRenderMode.SelfClosing);
        }

    }
}

清單 1 中的 類別包含兩個名為 Image 的靜態多載方法。 當您呼叫 Image () 方法時，可以傳遞代表一組 HTML 屬性的物件。

請注意 TagBuilder.MergeAttribute () 方法如何用來將 src 屬性之類的個別屬性新增至 TagBuilder。 此外，請注意，TagBuilder.MergeAttributes () 方法如何用來將屬性集合新增至 TagBuilder。 MergeAttributes () 方法接受 Dictionary < string，object > 參數。 RouteValueDictionary 類別可用來將代表屬性集合的 Object 轉換成 Dictionary < 字串，物件 > 。

建立影像協助程式之後，您可以在 ASP.NET MVC 檢視中使用協助程式，就像任何其他標準 HTML 協助程式一樣。 清單 2 中的檢視會使用影像協助程式來顯示 Xbox 的相同影像兩次， (請參閱圖 1) 。 Image () 協助程式會使用和不使用 HTML 屬性集合來呼叫。

清單 2 - Home\Index.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="MvcApplication1.Helpers" %>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">

    <!-- Calling helper without HTML attributes -->
    <%= Html.Image("img1", ResolveUrl("~/Content/XBox.jpg"), "XBox Console") %>

    <!-- Calling helper with HTML attributes -->
    <%= Html.Image("img1", ResolveUrl("~/Content/XBox.jpg"), "XBox Console", new {border="4px"})%>

</asp:Content>

圖 01：使用影像協助程式 (按一下即可檢視完整大小的影像)

請注意，您必須在 Index.aspx 檢視頂端匯入與 Image Helper 相關聯的命名空間。 協助程式會使用下列指示詞彙入：

<%@ Import Namespace="MvcApplication1.Helpers" %>

上一個下一個