Usando a classe TagBuilder para criar auxiliares HTML (C#)

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 que você adicione 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 que você adicione atributos a uma marca. Há várias sobrecargas desse método.
• SetInnerText() – permite definir o texto interno da marca. O texto interno é codificado em HTML automaticamente.
• ToString() – permite renderizar 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 pontos (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.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);
        }

    }
}

A classe na Listagem 1 contém dois métodos estáticos 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="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: 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.Helpers" %>

AnteriorAvançar