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

發行項
09/27/2024

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.vb

Public Module ImageHelper

<System.Runtime.CompilerServices.Extension> _
Function Image(ByVal helper As HtmlHelper, ByVal id As String, ByVal url As String, ByVal alternateText As String) As String
    Return Image(helper, id, url, alternateText, Nothing)
End Function

<System.Runtime.CompilerServices.Extension> _
Function Image(ByVal helper As HtmlHelper, ByVal id As String, ByVal url As String, ByVal alternateText As String, ByVal htmlAttributes As Object) As String
    ' Create tag builder
    Dim 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)
End Function

End Module

清單 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="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="MvcApplication1" %>
<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 With {.border="4px"})%>

</asp:Content>

$[New Project] $新增專案$ 對話方塊$

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

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

<%@ Import Namespace="MvcApplication1" %>

在 Visual Basic 應用程式中，預設命名空間與應用程式的名稱相同。

上一個下一個

共用方式為

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

TagBuilder 類別概觀

建立影像 HTML 協助程式

意見反應

其他資源