in ASP.NET

ASP.NET MVC 6 – TagHelpers

O Razor trouxe uma sintax muito mais simples para se utilizar no desenvolvimento web, com ele deixamos de utilizar os “<% %>” que eram necessários na view engine .aspx (Web Forms). Porém ainda era necessário converter e mudar o html puro para utilizar alguns helpers como:

@Html.LabelFor(model => model.Nome, new { @class = "control-label col-md-2" })
e
@Html.EditorFor(model => model.Nome)

para renderizar coisas simples como:

<label class="control-label col-md-2" for="Nome">Nome</label>
e
<input class="text-box single-line" id="Nome" name="Nome" type="text" value="">

Pensando em maneira de simplificar a sintax e trazer o desenvolvimento web cada vez mais próximo ao HTML, o ASP.NET MVC 6 traz uma feature ainda em desenvolvimento que é chamada de TagHelper.

ASP.NET MVC 6 TagHelpers

Com os TagHelpers, é possível escrever controles que interagem com o ASP.NET (Models, Roteamento, DataAnnotations) com uma sintaxe extremamente próxima a do HTML, só utilizando alguns atributos a mais nos elementos HTML’s.

Abaixo vou mostrar alguns exemplos.

Form (com o TagHelper, o formulário utiliza o Anti Forgery como true por padrão, notem que é possível configurar atributos com Action no elemento).

@using (Html.BeginForm("Create"))
{
    @Html.AntiForgeryToken()
    //conteúdo   
}

com TagHelpers

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

 

Validation Summary (aceita valores como “None”, “ModelOnly” e “All” para o atributo asp-validation-summary)

@Html.ValidationSummary(true)

com TagHelpers

<div asp-validation-summary="All"  id="validation_day" class="form-group">
    <span style="color:red">This is my message</span>
</div>

Hidden

@Html.HiddenFor(model=>model.Id)

com TagHelpers

<input type="hidden" asp-for="Id" />    

Label

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

Com TagHelpers

<label asp-for="Nome" class="control-label col-md-2"  />

Input text

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

Com TagHelpers

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

Validation Message

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

Com TagHelpes

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

Select (notem que é possível colocar itens defaults e fixos no próprio html)

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

Com TagHelpers

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

 

Outra coisa muito interessante é a possibilidade de editar e usar qualquer atributo html no corpo do html, ex: class, style, etc.

Caso vocês queiram conhecer algum exemplo de projeto utilizando, no github do ASP.NET existem alguns:

https://github.com/aspnet/Mvc/tree/dev/samples/TagHelperSample.Web

https://github.com/DamianEdwards/TagHelperStarterWeb

Bom espero que este post seja útil, lembrando que esta ainda é uma feature em desenvolvimento, mas é possível testar utilizando a versão do ASP.NET MVC de desenvolvimento.

Estou a disposição para dúvidas, criticas e sugestões.

abs

Rodolfo

  • https://blog.lambda3.com.br/2016/04/mvc-6-self-closing-tag-helpers-com-conteudos-vazios/ MVC 6: Self-closing Tag Helpers com conteúdos vazios | Blogs da Lambda3

    […] novo recurso que ajuda na legibilidade do HTML escrito nas Views do seu projeto, esse recurso é o Tag Helper. Utilizando tag helpers você não precisa mais encher seu HTML com os antigos @Html helpers, eles […]