Verwenden der TagBuilder-Klasse zum Erstellen von HTML-Hilfsprogrammen (VB)

von Stephen Walther

Stephen Walther stellt Ihnen eine nützliche Hilfsprogrammklasse im ASP.NET MVC-Framework namens TagBuilder-Klasse vor. Sie können die TagBuilder-Klasse verwenden, um HTML-Tags einfach zu erstellen.

Das ASP.NET MVC-Frameworks enthält eine nützliche Hilfsprogrammklasse namens TagBuilder-Klasse, die Sie beim Erstellen von HTML-Hilfsprogrammen verwenden können. Mit der TagBuilder-Klasse können Sie, wie der Name der Klasse vermuten lässt, auf einfache Weise HTML-Tags erstellen. In diesem kurzen Tutorial erhalten Sie eine Übersicht über die TagBuilder-Klasse und erfahren, wie Sie diese Klasse beim Erstellen eines einfachen HTML-Hilfsprogramms verwenden, das HTML-img-Tags <> rendert.

Übersicht über die TagBuilder-Klasse

Die TagBuilder-Klasse ist im System.Web.Mvc-Namespace enthalten. Es verfügt über fünf Methoden:

• AddCssClass() – Ermöglicht das Hinzufügen eines neuen Class=""- Attributs zu einem Tag.
• GenerateId() – Ermöglicht das Hinzufügen eines ID-Attributs zu einem Tag. Diese Methode ersetzt automatisch Punkte in der ID (standardmäßig werden Punkte durch Unterstriche ersetzt).
• MergeAttribute() – Ermöglicht das Hinzufügen von Attributen zu einem Tag. Es gibt mehrere Überladungen dieser Methode.
• SetInnerText() – Ermöglicht es Ihnen, den inneren Text des Tags festzulegen. Der innere Text wird automatisch HTML codiert.
• ToString() – Ermöglicht das Rendern des Tags. Sie können angeben, ob Sie ein normales Tag, ein Starttag, ein Endtag oder ein selbstschließendes Tag erstellen möchten.

Die TagBuilder-Klasse verfügt über vier wichtige Eigenschaften:

• Attribute: Stellt alle Attribute des Tags dar.
• IdAttributeDotReplacement: Stellt das Zeichen dar, das von der GenerateId()-Methode verwendet wird, um Punkte zu ersetzen (der Standardwert ist ein Unterstrich).
• InnerHTML: Stellt den inneren Inhalt des Tags dar. Durch Zuweisen einer Zeichenfolge zu dieser Eigenschaft wird die Zeichenfolge nicht HTML codiert.
• TagName: Stellt den Namen des Tags dar.

Mit diesen Methoden und Eigenschaften erhalten Sie alle grundlegenden Methoden und Eigenschaften, die Sie zum Erstellen eines HTML-Tags benötigen. Sie müssen nicht wirklich die TagBuilder-Klasse verwenden. Sie könnten stattdessen eine StringBuilder-Klasse verwenden. Die TagBuilder-Klasse erleichtert Ihnen das Leben jedoch ein wenig.

Erstellen eines Bild-HTML-Hilfsprogrammes

Wenn Sie eine instance der TagBuilder-Klasse erstellen, übergeben Sie den Namen des Zu erstellenden Tags an den TagBuilder-Konstruktor. Als Nächstes können Sie Methoden wie die Methoden AddCssClass und MergeAttribute() aufrufen, um die Attribute des Tags zu ändern. Schließlich rufen Sie die ToString()-Methode auf, um das Tag zu rendern.

Beispiel: Eintrag 1 enthält ein Bild-HTML-Hilfsprogramm. Das Imagehilfsprogramm wird intern mit einem TagBuilder implementiert, der ein HTML-img-Tag <> darstellt.

Listing 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

Das Modul in Listing 1 enthält zwei überladene Methoden mit dem Namen Image(). Wenn Sie die Image()-Methode aufrufen, können Sie ein Objekt übergeben, das einen Satz von HTML-Attributen darstellt oder nicht.

Beachten Sie, wie die TagBuilder.MergeAttribute()-Methode verwendet wird, um dem TagBuilder einzelne Attribute wie das src-Attribut hinzuzufügen. Beachten Sie außerdem, wie die TagBuilder.MergeAttributes()-Methode verwendet wird, um dem TagBuilder eine Auflistung von Attributen hinzuzufügen. Die MergeAttributes()-Methode akzeptiert eine Dictionary-Zeichenfolge<, einen Object-Parameter> . Die RouteValueDictionary-Klasse wird verwendet, um das Objekt zu konvertieren, das die Auflistung der Attribute darstellt, in eine Dictionary-Zeichenfolge<,-Objekt>.

Nachdem Sie das Bildhilfsprogramm erstellt haben, können Sie das Hilfsprogramm in Ihren ASP.NET MVC-Ansichten wie alle anderen Standard-HTML-Hilfsprogramme verwenden. Die Ansicht in Listing 2 verwendet das Bildhilfsprogramm, um dasselbe Bild einer Xbox zweimal anzuzeigen (siehe Abbildung 1). Das Image()-Hilfsprogramm wird sowohl mit als auch ohne HTML-Attributauflistung aufgerufen.

Eintrag 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>

Abbildung 01: Verwenden des Bildhilfsprogrammes(Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Beachten Sie, dass Sie den Namespace importieren müssen, der dem Imagehilfsprogramm oben in der Index.aspx-Ansicht zugeordnet ist. Das Hilfsprogramm wird mit der folgenden Direktive importiert:

<%@ Import Namespace="MvcApplication1" %>

In einer Visual Basic-Anwendung ist der Standardnamespace mit dem Namen der Anwendung identisch.

ZurückWeiter