Uso de la clase TagBuilder para compilar asistentes de HTML (VB)

por Stephen Walther

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

El marco ASP.NET MVC incluye una clase de utilidad, 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 representa etiquetas <img> de HTML.

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 se reemplazan por 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 se codifica 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 AddCssClass y MergeAttribute() para modificar los atributos de la etiqueta. Por último, se llama 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.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

El módulo de la Lista 1 contiene dos métodos sobrecargados denominados Image(). Al llamar al método Image(), puede pasar un objeto que represente un conjunto de atributos HTML o no.

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 ASP.NET MVC 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="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>

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

En una aplicación de Visual Basic, el espacio de nombres predeterminado es el mismo que el nombre de la aplicación.

AnteriorSiguiente