Uso della classe TagBuilder per compilare helper HTML (C#)

di Stephen Walther

Stephen Walther presenta una classe di utilità utile nel framework MVC ASP.NET denominata classe TagBuilder. È possibile usare la classe TagBuilder per compilare facilmente tag HTML.

Il framework MVC ASP.NET include una classe di utilità utile denominata classe TagBuilder che è possibile usare durante la compilazione di helper HTML. La classe TagBuilder, come suggerisce il nome della classe, consente di compilare facilmente tag HTML. In questa breve esercitazione viene fornita una panoramica della classe TagBuilder e si apprenderà come usare questa classe durante la creazione di un semplice helper HTML che esegue il rendering dei tag img> HTML<.

Panoramica della classe TagBuilder

La classe TagBuilder è contenuta nello spazio dei nomi System.Web.Mvc. Ha cinque metodi:

• AddCssClass(): consente di aggiungere un nuovo attributo class="" a un tag.
• GenerateId(): consente di aggiungere un attributo ID a un tag. Questo metodo sostituisce automaticamente i punti nell'ID (per impostazione predefinita, i punti vengono sostituiti da caratteri di sottolineatura)
• MergeAttribute(): consente di aggiungere attributi a un tag. Esistono più overload di questo metodo.
• SetInnerText(): consente di impostare il testo interno del tag. Il testo interno è codificato automaticamente in HTML.
• ToString(): consente di eseguire il rendering del tag. È possibile specificare se si desidera creare un tag normale, un tag di inizio, un tag di fine o un tag di chiusura automatica.

La classe TagBuilder ha quattro proprietà importanti:

• Attributi: rappresenta tutti gli attributi del tag.
• IdAttributeDotReplacement: rappresenta il carattere utilizzato dal metodo GenerateId() per sostituire i punti (il valore predefinito è un carattere di sottolineatura).
• InnerHTML: rappresenta il contenuto interno del tag. L'assegnazione di una stringa a questa proprietà non codifica la stringa.
• TagName: rappresenta il nome del tag.

Questi metodi e proprietà offrono tutti i metodi e le proprietà di base necessari per creare un tag HTML. Non è davvero necessario usare la classe TagBuilder. È invece possibile usare una classe StringBuilder. Tuttavia, la classe TagBuilder semplifica la vita.

Creazione di un helper HTML immagine

Quando si crea un'istanza della classe TagBuilder, si passa il nome del tag da compilare al costruttore TagBuilder. Successivamente, è possibile chiamare metodi come i metodi AddCssClass e MergeAttribute() per modificare gli attributi del tag. Infine, chiamare il metodo ToString() per eseguire il rendering del tag.

Ad esempio, l'elenco 1 contiene un helper HTML immagine. L'helper Image viene implementato internamente con un TagBuilder che rappresenta un tag img> HTML<.

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

    }
}

La classe nell'elenco 1 contiene due metodi di overload statici denominati Image. Quando si chiama il metodo Image(), è possibile passare un oggetto che rappresenta o meno un set di attributi HTML.

Si noti che il metodo TagBuilder.MergeAttribute() viene usato per aggiungere singoli attributi, ad esempio l'attributo src a TagBuilder. Si noti inoltre come viene usato il metodo TagBuilder.MergeAttributes() per aggiungere una raccolta di attributi a TagBuilder. Il metodo MergeAttributes() accetta una stringa Dictionary<, un parametro object> . La classe RouteValueDictionary viene utilizzata per convertire l'oggetto Object che rappresenta l'insieme di attributi in una stringa Dictionary<, oggetto> .

Dopo aver creato l'helper Image, è possibile usare l'helper nelle visualizzazioni MVC ASP.NET esattamente come qualsiasi altro helper HTML standard. La visualizzazione nell'elenco 2 usa l'helper Image per visualizzare due volte la stessa immagine di una Xbox (vedere la figura 1). L'helper Image() viene chiamato sia con che senza una raccolta di attributi HTML.

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

Figura 01: Uso dell'helper immagine (fare clic per visualizzare l'immagine a dimensione intera)

Si noti che è necessario importare lo spazio dei nomi associato all'helper Image nella parte superiore della visualizzazione Index.aspx. L'helper viene importato con la direttiva seguente:

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