ASP .NET MVC 6 -  Por dentro das TagHelpers

  Neste artigo vou apresentar os conceitos básicos sobre o novo recurso da ASP .NET 5 chamado TagHelpers que fornecem uma nova maneira de criar tags customizáveis para marcação de código em Views.
 

Chegou o curso Curso ASP .NET .MVC 5 Vídeo Aulas onde você vai aprender a criar aplicações web dinâmicas usando a ASP .NET MVC 5.

Na ASP .NET 5 temos os HTML Helpers que são métodos que você pode invocar a partir da propriedade Html de uma view. Você também tem acesso aos URL Helpers (via propriedade Url), e Ajax Helpers (via propriedade Ajax).

Todos esses Helpers possuem o mesmo objetivo: tornar a criação de views mais fácil para o desenvolvedor. (Os URL Helpers também estão disponíveis a partir dos controladores). A maioria dos HTML Helpers gera como resultado a renderização de marcas HTML.

Dessa forma se você deseja renderizar um TextBox usando um Html Helper você fazia assim:   

@Html.TextBox("nome")
 
<input id="nome" name="nome" type="text" value="" />

Usando as TagHelpers podemos obter o mesmo resultado escrevendo controles que interagem com Models, Views, etc, usando uma sintaxe mais próxima do HTML com atributos em seus elementos.

Para renderizar o TextBox, podemos usar o recurso TagHelper usando a seguinte sintaxe:

<input type="text" asp-for="Nome" />
 
<input id="nome" name="nome" type="text" value="" />

Então vamos ver como esse recurso funciona e o que podemos fazer com ele.

TagHelpers - Conceito

As TagHelpers são um novo recurso da ASP .NET MVC 6 que você pode usar para gerar HTML. A sintaxe parece com HTML ( elementos e atributos ), mas é processado pelo Razor no servidor.

As TagHelpers são uma sintaxe alternativa aos Html Helpers, mas eles fornecem algumas funcionalidades que era difícil ou impossível de se obter com métodos auxiliares.  Cada TagHelper tem um comportamento diferente e diferentes opções.

Quando você criar um novo projeto MVC 6 usando o Visual Studio, o recurso embutido MVC 6 TagHelpers será habilitado automaticamente, mas você também pode adicionar as tags helpers de qualquer outro assembly/namespace adicionando a diretiva @addTagHelper ao seu arquivo cshtml.

Ex: @addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"

Em especial, as TagHelpers de formulário podem ajudar a criar um código mais limpo em suas views do que o usado pelos Html Helpers.

A título de comparação temos abaixo um exemplo onde estamos criando um textbox para a propriedade Nome de um Model:

<!--Cria um input com uma classe adicional para a propriedade Nome usando um Html Helper-->
@Html.EditorFor(C => C.Nome, new { htmlAttributes = new { @class = "form-control" } })

<!--Cria um input com uma classe adicional para a propriedade Nome usando um Tag Helper-->
<input asp-for="Nome" class="form-control" />

Em ambos os casos será gerado um HTML igual baseado nos atributos da propriedade Nome.

A abordagem TagHelper permite adicionar atributos HTML facilmente a tag input e eles serão incluídos no HTML gerado. A inclusão da classe 'form-control' é natural e de fácil entendimento se comparada com a sintaxe do Html Helper EditorFor.

Além disso o recurso do Intellisense também esta disponível para as TagHelpers.

Em outro exemplo temos a geração do HTML para o elemento Form onde a sintaxe TagHelper é bem mais clara, pois você não precisa mais utilizar a instrução using para gerar a tag para fechar o formulário.

Tudo o que você precisa é especificar o Controller e a Action para o formulário:

<form asp-controller="Conta" asp-action="Login">
      //Os elementos do formulário
</form>

Abaixo temos o HTML gerado:

<form action="/Conta/Login" method="post">
      //Os elementos do formulário
    <input name="__RequestVerificationToken" type="hidden" value="CfDJ ..... j3kB8VKpFwc0rQMjaJTTC_gVv5f0vAg"</n>>
</form>

Observe que por padrão será gerado o token anti-forgery de forma automática para você, mas você pode desabilitar essa geração automática:   

<form asp-controller="Conta" asp-anti-forgery="false" asp-action="Login">
      //Os elementos do formulário
</form>

Para a criação de elementos de formulário temos um conjunto de tag helpers descritos a seguir:

Nota: Em outros artigos irei abordar com mais detalhes cada uma dessas tag helpers.

E ainda você pode acompanhar o desenvolvimento das tag helpers observando o código visto que a ASP .NET MVC 6 é open-source.

A seguir vamos comparar a sintaxe usada em alguns dos principais controles usando os Html Helpers com o novo recurso TagHelper:

Html Helpers Tag Helpers 
@using (Html.BeginForm("Criar"))
{
    @Html.AntiForgeryToken()
    //conteúdo   
}
 

<form asp-anti-forgery="false" asp-action="Criar">
    <!--conteúdo-->
</form>

@Html.LabelFor(model => model.Nome, new { @class = "control-label col-md-2" })
 		  
<label asp-for="Nome" class="control-label col-md-2"  />

@Html.EditorFor(model => model.Nome)
 

<input type="text" asp-for="Nome" />

@Html.ValidationMessageFor(model => model.Nome)
 

<span asp-validation-for="Nome" />

@Html.DropDownListFor(model=>model.Tags)

 <select asp-for="Tags" asp-items="(IEnumerable<SelectListItem>)Model.Tags" size="20" class="form-control">
   <option value="">-- Selecione --</option>
</select>
 
 

@Html.ValidationSummary(true)

 

<div asp-validation-summary="All"  id="valida_data" class="form-group">
   <span style="color:red">Mensagem</span>
</div>

@Html.HiddenFor(model=>model.Id)
 
<input type="hidden" asp-for="Id" />  

Além das TagHelpers existentes por padrão na ASP .NET MVC 6 você também pode criar a sua própria tag helper e isso eu vou mostrar também em outro artigo.

Dessa forma o recurso TagHelper promete facilitar a vida do desenvolvedor e ele vem acompanhado com muitas outras novidades da ASP .NET 5.

Fique ligado nos próximos artigos abordando as novidades da ASP .NET 5 e/ou ASP .NET MVC 6.

E os que são de Cristo crucificaram a carne com as suas paixões e concupiscências.
Gálatas 5:24

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ?

 

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti