Utiliser la classe TagBuilder pour créer des HTML Helpers

Philippe Vialatte (Traduction

Stephen Walther vous présente une classe utilitaire du Framework ASP.NET MVC, nommée TagBuilder. Vous pouvez utiliser la classe TagBuilder pour construire facilement des balises HTML.

- Titre : Utiliser la classe TagBuilder pour créer des HTML Helpers

- Auteur : Philippe Vialatte (Traduction

- Parution : 22 avril 2009

- Licence : Copyright ® 2009 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Traduction

- Introduction

- Vue d'ensemble de la classe TagBuilder

- Création d'un HTML Helper image

Traduction

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

Introduction

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

Vue d'ensemble de la classe TagBuilder

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.

Création d'un HTML Helper image

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

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)
{
// 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.

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'aide d'images

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