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" %>
Comentários
https://aka.ms/ContentUserFeedback.
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulteEnviar e exibir comentários de