Implementando Tag Helpers customizadas no ASP.NET 5

Uma das novidades que integra o ASP.NET 5 são as Tag Helpers, as quais podem ser consideradas uma alternativa ao uso de HTML Helpers convencionais. Buscando simplificar a codificação de Views este recurso emprega, basicamente, uma sintaxe similar àquela utilizada em código HTML padrão.

Na Listagem 1 encontra-se um exemplo que faz uso de Tag Helpers, assim como de um HTML Helper que integra o próprio framework MVC. No caso específico deste novo recurso, os atributos “asp-controller” e “asp-action” associados ao elemento “a” substituem uma chamada ao método ActionLink do objeto Html.

[code language=”html” highlight=”7,9"]
Consulta a informações sobre continentes:
<ul>
<li>
@Html.ActionLink(“Europa”, “Europa”, “Continente”)
</li>
<li>
<a asp-controller=”Continente” asp-action=”Asia”>
Ásia
</a>
</li>
</ul>
[/code]

Listagem 1: Exemplo de utilização de Tag Helpers

O objetivo deste artigo é demonstrar como Tag Helpers customizadas podem ser criadas, a partir de um exemplo de implementação envolvendo o uso do ASP.NET 5 e do Visual Studio 2015.

Exemplo de utilização em uma aplicação MVC 6

Para demonstrar a implementação de uma Tag Helper customizada será criada uma solução que faz uso dos seguintes recursos:

• O Microsoft Visual Studio Community 2015 como IDE de desenvolvimento;
• O .NET Framework 4.6;
• O framework ASP.NET 5 (beta 5) para a criação de uma aplicação MVC 6.

A ideia é que um atributo chamado “confirmation-message” possa ser utilizado em links HTML (definidos pela tag “a”). A intenção com isto é evitar a codificação de mensagens para confirmação por meio de instruções JavaScript, as quais estariam atreladas ao evento onclick destes elementos.

Um projeto do tipo “ASP.NET Web Aplication” será gerado, tendo por nome “TesteTagHelpers” (Imagem 1). Ao se confirmar este primeiro passo, selecionar na sequência em “ASP.NET 5 Preview Templates” a opção “Web Application” (Imagem 2).

Imagem 1: Criando uma ASP.NET Web Application no Visual Studio 2015

Imagem 2: Selecionando o template Web Application no Visual Studio 2015

Na Listagem 2 está a implementação da classe ConfirmationMessageTagHelper. Este tipo deriva da classe abstrata TagHelper (namespace Microsoft.AspNet.Razor.Runtime.TagHelpers), com essa estrutura representando o meio através do qual novas Tag Helpers são definidas:

• A constante ConfirmationMessageAttributeName contém o nome do atributo (confirmation-message) que representa a Tag Helper definida nesta aplicação de exemplo;
• A classe ConfirmationMessageTagHelper foi marcada com o atributo TargetElementAttribute (namespace Microsoft.AspNet.Razor.Runtime.TagHelpers). Foram indicados como parâmetros nesta instrução o elemento HTML para o qual o uso da Tag Helper será permitido (no caso links, identificados pela tag “a”), bem como o nome do atributo no qual serão especificadas as mensagens de confirmação (o valor “confirmation-message”, indicado pela constante ConfirmationMessageAttributeName);
• A propriedade pública ConfirmationMessage armazenará o valor associado à tag “confirmation-message”. Este mapeamento foi realizado através da utilização do atributo HtmlAttributeName (namespace Microsoft.AspNet.Razor.Runtime.TagHelpers), que está recebendo como parâmetro o valor definido para a constante ConfirmationMessageAttributeName;
• Será através da versão sobrecarregada do método Process que acontecerá a transformação do conteúdo do atributo “confirmation-message” em instrução JavaScript, a qual estará associada ao evento onclick de um link. Uma verificação inicial determina se algum conteúdo foi vinculado ao evento onclick. Se este não for o caso, um novo atributo será adicionado ao objeto representado pelo parâmetro “output”; a mensagem será exibida através da função “confirm”, a partir de uma instância do tipo HtmlString (namespace Microsoft.AspNet.Mvc.Rendering).

[code language=”csharp”]
using System.Linq;
using Microsoft.AspNet.Mvc.Rendering;
using Microsoft.AspNet.Razor.Runtime.TagHelpers;

namespace TesteTagHelpers
{
[TargetElement(“a”, Attributes = ConfirmationMessageAttributeName)]
public class ConfirmationMessageTagHelper : TagHelper
{
private const string ConfirmationMessageAttributeName = “confirmation-message”;

[HtmlAttributeName(ConfirmationMessageAttributeName)]
public string ConfirmationMessage { get; set; }

public override void Process(TagHelperContext context,
TagHelperOutput output)
{
if (output.Attributes.Where(a => a.Name.ToLower() == “onclick”).Count() == 0)
{
output.Attributes.Add(“onclick”,
new HtmlString($”return confirm(‘{ConfirmationMessage}’);”));
}
}
}
}
[/code]

Listagem 2: Classe ConfirmationMessageTagHelper

Já na Listagem 3 está o código da View Index.cshtml, no qual será demonstrado o uso da Tag Helper proposta para este artigo:

• A diretiva @addTagHelper está referenciando o próprio projeto de testes, de forma a possibilitar o uso da Tag Helper customizada em Views da aplicação;
• No atributo “confirmation-message” foi especificada uma mensagem, que será exibida ao se clicar no link representado pelo elemento “a”.

[code language=”html” highlight=”3,9,10,12"]
…

@addTagHelper “*, TesteTagHelpers”

<h3>Exemplo de utilização de uma Tag Helper customizada</h3>

<br />

<a class=”btn btn-default btn-default”
href=”http://www.asp.net/" confirmation-message=”Deseja realmente sair deste site?”>
Site da tecnologia ASP.NET
</a>
[/code]

Listagem 3: View Index.cshtml

Teste da aplicação criada

Na Imagem 3 está a tela inicial da aplicação TesteTagHelpers, com a mensagem para confirmação que será exibida ao se acionar o link “Site da tecnologia ASP.NET”.

Imagem 3: Tela inicial da aplicação TesteTagHelpers

Visualizando o HTML gerado (Imagem 4) será possível constatar que o conteúdo do atributo “confirmation-message” foi convertido, resultando em uma instrução JavaScript associada ao evento onclick do link em questão.

Imagem 4: Código HTML gerado com o uso da Tag Helper de exemplo

Conclusão

Conforme demonstrado ao longo deste artigo, as Tag Helpers constituem uma alternativa mais simples e elegante ao uso de HTML Helpers. É bem provável que a utilização deste novo recurso cresça com o decorrer do tempo, já que o esforço de codificação ao se empregar o mesmo acaba por ser bem menor.

Espero que este conteúdo possa ter sido útil.

Até uma próxima oportunidade!

Referências

ASP.NET 5 Documentation
http://docs.asp.net/en/latest/

ASP.NET 5 — Novidades do Desenvolvimento Web em .NET (Agosto/2015)
http://pt.slideshare.net/renatogroff1/aspnet-5-novidades-do-desenvolvimento-web-em-net-agosto2015

Fontes da solução descrita neste artigo
https://github.com/renatogroffe/TesteTagHelpers