Utilisation de la classe TagBuilder pour générer des helpers HTML (C#)

par Stephen Walther

Stephen Walther vous présente une classe utilitaire utile dans l’infrastructure ASP.NET MVC nommée classe TagBuilder. Vous pouvez utiliser la classe TagBuilder pour générer facilement des balises HTML.

L’infrastructure ASP.NET MVC inclut une classe utilitaire utile nommée classe TagBuilder que vous pouvez utiliser lors de la création d’assistances HTML. La classe TagBuilder, comme le nom de la classe l’indique, vous permet de créer facilement des balises HTML. Dans ce bref tutoriel, vous disposez d’une vue d’ensemble de la classe TagBuilder et vous apprenez à utiliser cette classe lors de la création d’une assistance HTML simple qui restitue les balises HTML <img> .

Vue d’ensemble de la classe TagBuilder

La classe TagBuilder est contenue dans l’espace de noms System.Web.Mvc. Il a cinq méthodes :

• AddCssClass() : vous permet d’ajouter un nouvel attribut class=" » à une balise.
• GenerateId() : vous permet d’ajouter un attribut id à une balise. Cette méthode remplace automatiquement les points dans l’ID (par défaut, les points sont remplacés par des traits de soulignement)
• MergeAttribute() : vous permet d’ajouter des attributs à une balise. Il existe plusieurs surcharges de cette méthode.
• SetInnerText() : vous permet de définir le texte interne de la balise. Le texte interne est encodé automatiquement au format HTML.
• ToString() : vous permet d’afficher la balise. Vous pouvez spécifier si vous souhaitez créer une balise normale, une balise de début, une balise de fin ou une balise à fermeture automatique.

La classe TagBuilder a quatre propriétés importantes :

• Attributs : représente tous les attributs de la balise.
• IdAttributeDotReplacement : représente le caractère utilisé par la méthode GenerateId() pour remplacer des points (la valeur par défaut est un trait de soulignement).
• InnerHTML : représente le contenu interne de la balise. L’affectation d’une chaîne à cette propriété n’encode pas la chaîne au format HTML.
• TagName : représente le nom de la balise.

Ces méthodes et propriétés vous fournissent toutes les méthodes et propriétés de base dont vous avez besoin pour créer une balise HTML. Vous n’avez pas vraiment besoin d’utiliser la classe TagBuilder. Vous pouvez utiliser une classe StringBuilder à la place. Cependant, la classe TagBuilder vous rend la vie un peu plus facile.

Création d’une image HTML Helper

Lorsque vous créez un instance de la classe TagBuilder, vous passez le nom de la balise que vous souhaitez générer au constructeur TagBuilder. Ensuite, vous pouvez appeler des méthodes telles que les méthodes AddCssClass et MergeAttribute() pour modifier les attributs de la balise. Enfin, vous appelez la méthode ToString() pour afficher la balise.

Par exemple, listing 1 contient une assistance HTML d’image. L’assistance Image est implémentée en interne avec un TagBuilder qui représente une balise HTML <img> .

Listing 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 dans listing 1 contient deux méthodes statiques surchargées nommées Image. Lorsque vous appelez la méthode Image(), vous pouvez passer un objet qui représente un ensemble d’attributs HTML ou non.

Notez comment la méthode TagBuilder.MergeAttribute() est utilisée pour ajouter des attributs individuels tels que l’attribut src au TagBuilder. Notez, en outre, comment la méthode TagBuilder.MergeAttributes() est utilisée pour ajouter une collection d’attributs au TagBuilder. La méthode MergeAttributes() accepte un paramètre Dictionary<string,object> . La classe RouteValueDictionary est utilisée pour convertir l’objet représentant la collection d’attributs en une chaîne,objet> Dictionary<.

Après avoir créé l’assistance Image, vous pouvez utiliser l’assistance dans votre ASP.NET vues MVC comme n’importe quelle autre assistance HTML standard. L’affichage de la liste 2 utilise l’assistance Image pour afficher deux fois la même image d’une Xbox (voir la figure 1). L’assistance Image() est appelée à la fois avec et sans collection d’attributs HTML.

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

Figure 01 : Utilisation de l’assistance Image (Cliquer pour afficher l’image en taille réelle)

Notez que vous devez importer l’espace de noms associé à l’assistance Image en haut de la vue Index.aspx. L’assistance est importée avec la directive suivante :

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

PrécédentSuivant