Utiliser la classe TagBuilder pour créer des HTML Helpers

Cet article est la traduction la plus fidèle possible de l'article original : Using the TagBuilder Class to Build HTML Helpers

Le Framework ASP.NET MVC comprend une classe utilitaire nommée TagBuilder, que vous pouvez utiliser lors de la construction des HTML helper. La classe TagBuilder, comme son nom l'indique, vous permet de créer facilement des balises HTML. Dans ce bref didacticiel, vous disposerez d'une vue d'ensemble de la classe TagBuilder, et vous apprendrez comment utiliser cette classe lors de la construction d'un HTML helper simple qui permet le rendu des balises HTML <img>.

La classe TagBuilder est contenue dans l'espace de noms System.Web.Mvc. Elle dispose de cinq méthodes :

• AddCssClass() - vous permet d'ajouter un nouvel attribut class = "" à une balise.
• GenerateId() - permets d'ajouter un attribut id à une balise. Cette méthode remplace automatiquement les points dans l'Id de la balise (par défaut, les points sont remplacés par des caractères de soulignement).
• MergeAttribute() - vous permet d'ajouter des attributs à une balise. Il existe plusieurs surcharges de cette méthode.
• SetInnerText() - permets de configurer l'intérieur du texte de la balise.
• ToString() - vous permet de rendre la balise. Vous pouvez spécifier si vous voulez créer une balise normale, une balise de début, une balise de fin, ou une balise autofermante.

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

• Attributes - représente tous les attributs de la balise.
• IdAttributeDotReplacement - représente le caractère utilisé par la méthode GenerateId () pour remplacer les points (la valeur par défaut est un caractère de soulignement).
• InnerHTML - représente l'intérieur du contenu de la balise. L'attribution d'une chaîne à cette propriété n'encode pas la chaîne en HTML.
• TagName - représente le nom de la balise.

Ces méthodes et propriétés vous donnent toutes les méthodes de base et les propriétés dont vous avez besoin pour créer une balise HTML. Vous n'avez pas vraiment besoin d'utiliser la classe TagBuilder. Vous pourriez tout aussi bien utiliser une classe StringBuilder. Cependant, la classe TagBuilder vous rend la vie un peu plus facile.

Lorsque vous créez une instance de la classe TagBuilder, vous passez le nom de la balise que vous voulez construire dans le constructeur du TagBuilder. Ensuite, vous pourrez appeler des méthodes comme AddCssClass et MergeAttribute() pour modifier les attributs de la balise. Enfin, vous appelez la méthode ToString() pour faire un rendu de la balise.

Par exemple, le listing 1 représente un HTML Helper Image. Le HTML Helper Image est implémenté en interne avec un TagBuilder qui représente un tag HTML <img>.

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)
        {
            // Crée le TagBuilder
            var builder = new TagBuilder("img");
           
            // Crée un id valide
            builder.GenerateId(id);

            // Ajoute les attributs au TagBuilder
            builder.MergeAttribute("src", url);
            builder.MergeAttribute("alt", alternateText);
            builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

            // Fait un rendu du tag
            return builder.ToString(TagRenderMode.SelfClosing);
        }

    }
}

La classe dans le Listing 1 contient deux méthodes statiques nommées Image. Lorsque vous appelez la méthode Image(), vous pouvez lui passer un objet qui représente un ensemble d'attributs HTML.

Remarquez comment la méthode TagBuilder.MergeAttribute() est utilisée pour ajouter des attributs 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() peut accepter un paramètre Dictionary<string,object> . La classe RouteValueDictionary est utilisée pour convertir l'Object représentant une collection d'attributs en Dictionary<string,object>.

Après avoir créé le Helper Image, vous pouvez l'utiliser dans vos vues ASP.NET MVC au même titre que l'un des Helper HTML standards. La vue du 2 utilise le Helper Image pour afficher la même image d'une Xbox deux fois (voir Figure 1). Le Helper Image est appelée a la fois avec et sans collection d'attributs HTML.

<%@ 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>

Notez que vous devez importer l'espace de noms associés au helper Image en haut de la vue Index.aspx. Le Helper est importé avec la directive suivante :

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