As TagHelpers são classes escritas em C #, mas são anexadas a elementos HTML para executar o código do lado do servidor a partir da View Razor. Em outras palavras, a View criada em HTML tem sua lógica de apresentação definida em C#, que é executada no servidor.
Então, como vamos usar o Tag Helpers?
Para usar os Helpers de Tag internos ou personalizados, é necessário primeiro referenciar a biblioteca do TagHelper denominada Microsoft.AspNetCore.Mvc.TagHelpers. Também pode ser via Nuget. Uma vez referenciado, importe-o usando a diretiva @AddTagHelper como mostrado abaixo dentro de _ViewImports.cshtml,
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Um TagHelper é qualquer classe que implementa a interface ITagHelper. No entanto, quando criamos um Taghelper cusmotizado, você geralmente deriva de TagHelper, o que fornece acesso ao método Process.
Criando assistentes de tag personalizados
Agora temos uma ideia básica do que é o TagHelper, então que tal criar nosso próprio? Vou pegar um cenário muito simples, no qual vamos introduzir uma tag simples chamada ‘Appreciate’, que pegará o valor como nome de uma pessoa e será exibida na tela.
Crie uma nova classe chamada AppreciateTagHelper e adicione o código como mostrado abaixo:
public class AppreciateTagHelper: TagHelper {
private
const string appreciationText = "Olá";
public string PersonName {
get;
set;
}
public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output) {
output.TagName = "Appreciation";
string message = $ "{appreciationText}, {PersonName}";
var attribute = new TagHelperAttribute(name: "Label", value: message);
output.Attributes.Add(attribute);
output.Content.SetContent(message);
}
}
Em seguida, importe o recém-criado Tag Helper e isso pode ser feito adicionando uma linha no arquivo _ViewImports.cshtml como mostrado abaixo,
@using AspNetCoreTagHelpers @using AspNetCoreTagHelpers.Models @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @addTagHelper AspNetCoreTagHelpers.Helper.AppreciateTagHelper, AspNetCoreTagHelpers
A última é atualizar a respectiva view e o código para isso é:
<appreciate person-name="Código Simples"></appreciate>
Com isto você deverá agora ter tudo funcionando! Você pode ter acesso ao código fonte aqui.
Um grande abraço!
