Usando a classe TagBuilder para criar auxiliares HTML (VB)

por Stephen Walther

Stephen Walther apresenta uma classe de utilitário útil no ASP.NET estrutura MVC chamada classe TagBuilder. Você pode usar a classe TagBuilder para criar facilmente marcas HTML.

O ASP.NET estrutura MVC inclui uma classe de utilitário útil chamada classe TagBuilder que você pode usar ao criar auxiliares HTML. A classe TagBuilder, como o nome da classe sugere, permite que você crie facilmente marcas HTML. Neste breve tutorial, você receberá uma visão geral da classe TagBuilder e aprenderá a usar essa classe ao criar um auxiliar HTML simples que renderiza marcas img> HTML<.

Visão geral da classe TagBuilder

A classe TagBuilder está contida no namespace System.Web.Mvc. Ele tem cinco métodos:

• AddCssClass() – permite que você adicione um novo atributo class="" a uma marca.
• GenerateId() – permite adicionar um atributo id a uma marca. Esse método substitui automaticamente os períodos na ID (por padrão, os períodos são substituídos por sublinhados)
• MergeAttribute() – permite adicionar atributos a uma marca. Há várias sobrecargas desse método.
• SetInnerText() – permite que você defina o texto interno da marca. O texto interno é codificado em HTML automaticamente.
• ToString() – permite que você renderize a marca. Você pode especificar se deseja criar uma marca normal, uma marca de início, uma marca de término ou uma marca de auto-fechamento.

A classe TagBuilder tem quatro propriedades importantes:

• Atributos – representa todos os atributos da marca.
• IdAttributeDotReplacement – representa o caractere usado pelo método GenerateId() para substituir períodos (o padrão é um sublinhado).
• InnerHTML – representa o conteúdo interno da marca. Atribuir uma cadeia de caracteres a essa propriedade não codifica html a cadeia de caracteres.
• TagName – representa o nome da marca.

Esses métodos e propriedades fornecem todos os métodos e propriedades básicos necessários para criar uma marca HTML. Você realmente não precisa usar a classe TagBuilder. Em vez disso, você pode usar uma classe StringBuilder. No entanto, a classe TagBuilder torna sua vida um pouco mais fácil.

Criando um auxiliar HTML de imagem

Ao criar uma instância da classe TagBuilder, você passa o nome da marca que deseja criar para o construtor TagBuilder. Em seguida, você pode chamar métodos como os métodos AddCssClass e MergeAttribute() para modificar os atributos da marca. Por fim, você chama o método ToString() para renderizar a marca.

Por exemplo, a Listagem 1 contém um auxiliar html de imagem. O Auxiliar de imagem é implementado internamente com um TagBuilder que representa uma marca HTML <img> .

Listagem 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

O módulo na Listagem 1 contém dois métodos sobrecarregados chamados Image(). Ao chamar o método Image(), você pode passar um objeto que representa um conjunto de atributos HTML ou não.

Observe como o método TagBuilder.MergeAttribute() é usado para adicionar atributos individuais, como o atributo src ao TagBuilder. Observe, além disso, como o método TagBuilder.MergeAttributes() é usado para adicionar uma coleção de atributos ao TagBuilder. O método MergeAttributes() aceita uma cadeia de caracteres de dicionário<, parâmetro de objeto> . A classe RouteValueDictionary é usada para converter o Object que representa a coleção de atributos em uma cadeia de caracteres dictionary,object<>.

Depois de criar o Auxiliar de imagem, você pode usar o auxiliar em suas exibições ASP.NET MVC, assim como qualquer um dos outros auxiliares HTML padrão. O modo de exibição na Listagem 2 usa o Auxiliar de imagem para exibir a mesma imagem de um Xbox duas vezes (consulte a Figura 1). O auxiliar Image() é chamado com e sem uma coleção de atributos HTML.

Listagem 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: Usando o auxiliar de imagem (clique para exibir a imagem em tamanho real)

Observe que você deve importar o namespace associado ao Auxiliar de imagem na parte superior da exibição Index.aspx. O auxiliar é importado com a seguinte diretiva:

<%@ Import Namespace="MvcApplication1" %>

Em um aplicativo do Visual Basic, o namespace padrão é o mesmo que o nome do aplicativo.

AnteriorAvançar