Developpez.com - Microsoft DotNET
X

Choisissez d'abord la catégorieensuite la rubrique :


Utiliser la classe TagBuilder pour créer des HTML Helpers

Date de publication : 22 Avril 2009

Par Philippe Vialatte (Traduction (philippe.developpez.com)
 

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.

               Version PDF (Miroir)   Version hors-ligne (Miroir)

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 : en  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 :

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

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


               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

Copyright © 2009 developpez 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.

Responsable bénévole de la rubrique Microsoft DotNET : Hinault Romaric -