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

作者：Stephen Walther

Stephen Walther 將介紹 ASP.NET MVC 架構中實用的公用程式類別「TagBuilder」。 您可以使用 TagBuilder 類別輕鬆建置 HTML 標籤。

ASP.NET MVC 架構內含實用的公用程式類別「TagBuilder」，可用於建置 HTML 協助程式。 顧名思義，TagBuilder 類別可讓您輕鬆建置 HTML 標籤。 在這個簡短的教學課程中，我們會簡介 TagBuilder 類別，並說明如何使用此類別建置可轉譯 <img> 標籤的簡易 HTML 協助程式。

TagBuilder 類別概觀

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

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

TagBuilder 類別有四個重要屬性：

• Attributes - 代表標籤的所有屬性。
• 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 類別可用來將代表屬性集合的物件轉換成 Dictionary<string,object>。

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

清單 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 檢視頂端，匯入與影像協助程式相關聯的命名空間。 使用下列指示詞匯入協助程式：

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

上一個下一個