Uso de la clase TagBuilder para compilar asistentes de HTML (C#)

por Stephen Walther

Stephen Walther presenta una clase de utilidad útil en el marco de ASP.NET MVC, denominada clase TagBuilder. Puede usar la clase TagBuilder para compilar fácilmente etiquetas HTML.

El marco de ASP.NET MVC incluye una clase de utilidad útil, denominada TagBuilder, que puede usar al compilar asistentes HTML. La clase TagBuilder, como sugiere el nombre, permite compilar fácilmente etiquetas HTML. En este breve tutorial, se proporciona información general sobre la clase TagBuilder y descubrirá cómo usarla al compilar un asistente HTML simple que represente etiquetas HTML <img>.

Información general de la clase TagBuilder

La clase TagBuilder se encuentra en el espacio de nombres System.Web.Mvc. Tiene cinco métodos:

• AddCssClass(): permite agregar un nuevo atributo class="" a una etiqueta.
• GenerateId(): permite agregar un atributo id a una etiqueta. Este método reemplaza automáticamente los puntos del id (de manera predeterminada, los puntos los reemplazan caracteres de subrayado).
• MergeAttribute(): permite agregar atributos a una etiqueta. Hay varias sobrecargas de este método.
• SetInnerText(): permite establecer el texto interno de la etiqueta. El texto interno está codificado como HTML automáticamente.
• ToString(): permite representar la etiqueta. Puede especificar si quiere crear una etiqueta normal, una etiqueta de inicio, una etiqueta final o una etiqueta de cierre automática.

La clase TagBuilder tiene cuatro propiedades importantes:

• Attributes: representa todos los atributos de la etiqueta.
• IdAttributeDotReplacement: representa el carácter que usa el método GenerateId() para reemplazar puntos (el valor predeterminado es un carácter de subrayado).
• InnerHTML: representa el contenido interno de la etiqueta. La asignación de una cadena a esta propiedad no codifica como HTML la cadena.
• TagName: representa el nombre de la etiqueta.

Estos métodos y propiedades proporcionan todos los métodos y propiedades básicos que necesita para crear una etiqueta HTML. Realmente no es necesario usar la clase TagBuilder. En su lugar, podría usar una clase StringBuilder. Pero la clase TagBuilder le facilita un poco la vida.

Creación de un asistente HTML de imágenes

Al crear una instancia de la clase TagBuilder, se pasa el nombre de la etiqueta que quiere compilar en el constructor TagBuilder. A continuación, puede llamar a métodos como los métodos AddCssClass y MergeAttribute() para modificar los atributos de la etiqueta. Por último, llame al método ToString() para representar la etiqueta.

Por ejemplo, la Lista 1 contiene un asistente HTML de imágenes. El asistente de imágenes se implementa internamente con un elemento TagBuilder que representa una etiqueta HTML <img>.

Lista 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 clase de la Lista 1 contiene dos métodos sobrecargados estáticos denominados Image. Al llamar al método Image(), puede pasar un objeto que represente un conjunto de atributos HTML.

Observe cómo se usa el método TagBuilder.MergeAttribute() para agregar atributos individuales, como el atributo src a TagBuilder. Observe, además, cómo se usa el método TagBuilder.MergeAttributes() para agregar una colección de atributos a TagBuilder. El método MergeAttributes() acepta un parámetro Dictionary<string,object>. La clase RouteValueDictionary se usa para convertir el objeto que representa la colección de atributos en un parámetro Dictionary<string,object>.

Después de crear el asistente de imágenes, puede usarlo en las vistas de MVC de ASP.NET del mismo modo que cualquiera de los demás asistentes HTML estándar. La vista de la Lista 2 usa el asistente de imágenes para mostrar la misma imagen de una Xbox dos veces (vea la Figura 1). Se llama al asistente Image() con una colección de atributos HTML y sin esta.

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

Figura 01: uso del asistente de imágenes (Haga clic para ver la imagen a tamaño completo).

Tenga en cuenta que debe importar el espacio de nombres asociado al asistente de imágenes en la parte superior de la vista Index.aspx. El asistente se importa con la siguiente directiva:

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

AnteriorSiguiente