Usar la clase TagBuilder para compilar aplicaciones auxiliares HTML (VB)

por Stephen Walther

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

El marco de MVC de ASP.NET incluye una clase de utilidad útil denominada clase TagBuilder que se puede usar al compilar aplicaciones auxiliares HTML. La clase TagBuilder, como sugiere el nombre de la clase, le permite compilar fácilmente etiquetas HTML. En este breve tutorial, se proporciona información general sobre la clase TagBuilder y aprenderá a usar esta clase al compilar una aplicación auxiliar HTML simple que representa 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 de identificador a una etiqueta. Este método reemplaza automáticamente los puntos en el identificador (de forma predeterminada, los puntos se sustituyen por un carácter 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 automáticamente en HTML.
  • ToString (): permite representar la etiqueta. Puede especificar si desea crear una etiqueta normal, una etiqueta inicial, una etiqueta final o una etiqueta de autocierre.

La clase TagBuilder tiene cuatro propiedades importantes:

  • Attributes: representa todos los atributos de la etiqueta.
  • IdAttributeDotReplacement: representa el carácter usado por 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 la cadena en HTML.
  • 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. En realidad, no es necesario usar la clase TagBuilder. En su lugar, podría usar una clase StringBuilder. Sin embargo, la clase TagBuilder hace que su vida sea un poco más fácil.

Crear una aplicación auxiliar HTML de imagen

Cuando se crea una instancia de la clase TagBuilder, se pasa el nombre de la etiqueta que se va a compilar al 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, se llama al método ToString () para representar la etiqueta.

Por ejemplo, la lista 1 contiene una aplicación auxiliar HTML de imagen. La aplicación auxiliar de imágenes se implementa internamente con un 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 (). Cuando se llama al método Image (), se puede pasar un objeto que representa 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. Tenga en cuenta, además, cómo se usa el método TagBuilder. MergeAttributes () para agregar una colección de atributos al TagBuilder. El método MergeAttributes () acepta un diccionario<cadena, objeto> parámetro. La clase RouteValueDictionary se usa para convertir el objeto que representa la colección de atributos en un diccionario<cadena, objeto>.

Después de crear la aplicación auxiliar de imágenes, puede usar el ayudante en las vistas de MVC de ASP.NET como cualquier otra aplicación auxiliar HTML estándar. La vista de la lista 2 usa la aplicación auxiliar de imágenes para mostrar la misma imagen de una Xbox dos veces (consulte la figura 1). Se llama a la aplicación auxiliar Image () con y sin una colección de atributos HTML.

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>

el cuadro de diálogo nuevo proyecto

Figura 01: uso de la aplicación auxiliar de imágenes (haga clic para ver la imagen de tamaño completo)

Tenga en cuenta que debe importar el espacio de nombres asociado a la aplicación auxiliar de imágenes en la parte superior de la vista index. aspx. La aplicación auxiliar se importa con la siguiente directiva:

<%@ Import Namespace="MvcApplication1" %>

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