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

von Stephen Walther

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

Das ASP.NET MVC-Framework enthält eine nützliche Hilfsprogrammklasse namens tagBuilder-Klasse, die Sie beim Erstellen von HTML-Hilfsprogrammen verwenden können. Die TagBuilder-Klasse, wie der Name der Klasse schon sagt, ermöglicht Ihnen die einfache Erstellung von HTML-Tags. 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 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 zum Ersetzen von Punkten verwendet wird (der Standardwert ist ein Unterstrich).
• InnerHTML: Stellt den inneren Inhalt des Tags dar. Durch das 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 die TagBuilder-Klasse nicht wirklich verwenden. Sie können stattdessen eine StringBuilder-Klasse verwenden. Die TagBuilder-Klasse erleichtert Ihnen das Leben jedoch etwas.

Erstellen eines BILD-HTML-Hilfsprogrammes

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

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

Auflistung 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);
        }

    }
}

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

Beachten Sie, dass 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, das die Auflistung von Attributen darstellt, in eine Dictionary-Zeichenfolge<, ein Objekt> zu konvertieren.

Nachdem Sie das Bildhilfsprogramm erstellt haben, können Sie das Hilfsprogramm in Ihren ASP.NET MVC-Ansichten wie alle anderen standardmäßigen 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.

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

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.Helpers" %>

ZurückWeiter