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

par Stephen Walther

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

L’infrastructure MVC ASP.NET 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 son nom 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 affiche 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 comporte 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 les 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 html la chaîne.
• 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 facilite la vie.

Création d’une assistance HTML d’image

Lorsque vous créez une 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 img> HTML<.

Listing 1 – Helpers\ImageHelper.vb

Public Module ImageHelper

<System.Runtime.CompilerServices.Extension> _
Function Image(ByVal helper As HtmlHelper, ByVal id As String, ByVal url As String, ByVal alternateText As String) As String
    Return Image(helper, id, url, alternateText, Nothing)
End Function

<System.Runtime.CompilerServices.Extension> _
Function Image(ByVal helper As HtmlHelper, ByVal id As String, ByVal url As String, ByVal alternateText As String, ByVal htmlAttributes As Object) As String
    ' Create tag builder
    Dim 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)
End Function

End Module

Le module dans Listing 1 contient deux méthodes 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 également 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 un objet> String,Dictionary<.

Après avoir créé l’assistant Image, vous pouvez utiliser l’assistant dans vos vues MVC ASP.NET 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 figure 1). L’assistance Image() est appelée à la fois avec et sans collection d’attributs HTML.

Référencement 2 – Accueil\Index.aspx

<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="MvcApplication1" %>
<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 With {.border="4px"})%>

</asp:Content>

Figure 01 : Utilisation de l’assistance Image(Cliquez 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" %>

Dans une application Visual Basic, l’espace de noms par défaut est identique au nom de l’application.

PrécédentSuivant