Este artigo tem por objetivo abordar a implementação de Tag Helpers customizadas no ASP.NET Core 1.0.

Introdução

As Tag Helpers são mais uma das novidades do ASP.NET Core 1.0, podendo 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 presente em código HTML padrão (através da utilização de atributos em tags convencionais).

A listagem a seguir traz um exemplo de uso de Tag Helpers, assim como de um HTML Helper (alternativa ainda disponível no novo ASP.NET). 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:

...
 
<p style="font-size: 22px;">
    @Html.ActionLink("Sobre - Utilizando HTML Helper", "About", "Home")
</p>
<br />
<p style="font-size: 22px;">
    <a asp-controller="Home" asp-action="About">Sobre - Utilizando Tag Helper</a>
</p>

Além das opções oferecidas pelo ASP.NET Core 1.0, Tag Helpers customizadas também podem ser criadas a fim de atender a algum tipo de demanda mais específica. Um exemplo de implementação deste recurso será detalhado nas próximas seções.

Implementando a aplicação de testes

Para implementar o projeto descrito neste artigo foram utilizados como recursos:
  • O Microsoft Visual Studio Community 2015 Update 3 como IDE de desenvolvimento;
  • O .NET Core 1.0.1;
  • O ASP.NET Core 1.0.1.
Como primeiro passo será gerado um projeto do tipo ASP.NET Core Web Application (.NET Core) chamado TesteCustomTagHelper:



Selecionar na sequência o template Web Application em ASP.NET Core Templates:



Na próxima listagem está a implementação da classe ConfirmationMessageTagHelper. Este tipo deriva da classe abstrata TagHelper (namespace Microsoft.AspNetCore.Razor.TagHelpers), com essa estrutura representando o meio através do qual novas Tag Helpers são definidas:
  • A constante ConfirmationAttributeName 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 HtmlTargetElement (namespace Microsoft.AspNetCore.Razor.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 ConfirmationAttributeName);
  • 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.AspNetCore.Razor.TagHelpers), que está recebendo como parâmetro o valor definido para a constante ConfirmationAttributeName;
  • 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.AspNetCore.Html).
using System.Linq;
using Microsoft.AspNetCore.Razor.TagHelpers;
using Microsoft.AspNetCore.Html;
 
namespace TesteCustomTagHelper
{
    [HtmlTargetElement("a", Attributes = ConfirmationAttributeName)]
    public class ConfirmationMessageTagHelper : TagHelper
    {
        private const string ConfirmationAttributeName = "confirmation-message";
 
        [HtmlAttributeName(ConfirmationAttributeName)]
        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('{this.ConfirmationMessage}');"));
            }
        }
    }
}

Já na próxima listagem está o código do arquivo _ViewImports.cshtml, o qual foi gerado automaticamente durante a criação do projeto:
  • A diretiva @addTagHelper está referenciando o namespace Microsoft.AspNetCore.Mvc.TagHelpers (local em que se encontram as Tag Helpers padrão do ASP.NET Core 1.0), além do próprio projeto de testes;
  • Referenciar o projeto TesteCustomTagHelper via diretiva @addTagHelper torna possível o uso da Tag Helper customizada em Views da aplicação;
  • Esta diretiva também será utilizada para referenciar outras Tag Helpers implementadas em bibliotecas externas das quais um projeto pode vir a depender.
@using TesteCustomTagHelper
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, TesteCustomTagHelper

Por fim, na listagem seguinte está o código da View Index.cshtml (vinculada a HomeController) exemplificando o uso da Tag Helper definida nesta seção. No atributo confirmation-message foi especificada uma mensagem, que será exibida ao se clicar no link representado pelo elemento a:

...
 
<h2>Exemplo de utilização de uma Tag Helper customizada</h2>
<br />
<p style="font-size: 22px;">
    <a href="http://asp.net" confirmation-message="Deseja realmente sair deste site?">
        Site oficial do ASP.NET
    </a>
</p>

Testes

Na próxima está a tela inicial da aplicação de testes, com a mensagem para confirmação que será exibida ao acionar o link Site oficial do ASP.NET:



Visualizando o HTML gerado 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:

Conclusão

Tag Helpers representam uma alternativa mais simples e elegante ao uso de HTML Helpers, conforme exemplos apresentados ao longo deste artigo. A tendência é que a adoçã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.

Referências

ASP.NET Core 1.0 - Documentation
http://docs.asp.net/en/latest/

ASP.NET Core 1.0: conhecendo as Tag Helpers
http://social.technet.microsoft.com/wiki/pt-br/contents/articles/34937.asp-net-core-1-0-conhecendo-as-tag-helpers.aspx