Neste artigo vamos falar sobre as TagHelpers, uma nova forma de declarar os elementos Html no ASP.NET MVC 6.

Quem não se lembra do código misto do ASP 3.0 (HTML + VBSCRIPT), onde tudo era uma coisa só, essa forma de escrita voltou a tona com o ASP.NET MVC 1.0 e com o lançamento da View Engine Razor (MVC 3.0) começamos a ter algo bem mais trabalhado integrando Views e ViewModels de forma mais harmônica através do processo de Model Binding.


Tag Helpers

As TagHelpers simplificam muito a forma de escrever o Html da View, tornando até mesmo mais atraente para os designers que antes torciam o nariz para os Html Helpers soltos nas Views.

Show me the Code

Vamos comparar as diferenças de sintaxe entre os Html Helpers e TagHelpers:

 

  • Validation Summary

Html Helper

@Html.ValidationSummary(true)

Tag Helper

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

 

  • ValidationMessageFor

Html Helper

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

Tag Helper

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

 

  • Select

Html Helper

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

Tag Helper

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

 

  • Form

Html Helper

@using (Html.BeginForm("Create"))
{
   @Html.AntiForgeryToken()
}

Tag Helper

<form asp-anti-forgery="false" asp-action="Create">
</form>

 

  • Hidden

Html Helper

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

Tag Helper

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

 

  • Label

Html Helper

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

Tag Helper

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

 

O Código das Tag Helpers

Como o código fonte do ASP.NET MVC é “open source” você pode acompanhar as issues do time e a evolução da mágica do framework, inclusive podemos ver todo o desenvolvimento das taghelpers.

GitHub TagHelpers

O legal disso é que podemos olhar o que elas estão fazendo internamente e entender melhor como usa-las.

Vamos olhar um pouco a TagHelper Select.

 

TagHelper Select, inside your soul

As TagHelpers não são milagres mágicos do Tinhoso, são classes bem desenhadas para realizar estas opções que teríamos que fazer no braço.

namespace Microsoft.AspNet.Mvc.TagHelpers
{
   [TargetElement("select", Attributes = ForAttributeName)]
    public class SelectTagHelper : TagHelper
    {
        private const string ForAttributeName = "asp-for";
        private const string ItemsAttributeName = "asp-items";

<strong>…More Code Below</strong>
     }
}

Veja que as Constants são os atributos que vamos colocar nas Tags Html, caso não tenha notado a diferença, vai até o Item Select acima e veja os nomes.

E abaixo o método Process realiza o trabalho de transformação:

public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            // Note null or empty For.Name is allowed because TemplateInfo.HtmlFieldPrefix may be sufficient.
            // IHtmlGenerator will enforce name requirements.
            var metadata = For.Metadata;
            if (metadata == null)
            {
                throw new InvalidOperationException(Resources.FormatTagHelpers_NoProvidedMetadata(              "<select>"
                   ForAttributeName,
                    nameof(IModelMetadataProvider),
                    For.Name));
            }
            var realModelType = For.ModelExplorer.ModelType;
            var allowMultiple = typeof(string) != realModelType &&

                typeof(IEnumerable).GetTypeInfo().IsAssignableFrom(realModelType.GetTypeInfo());

            // Ensure GenerateSelect() _never_ looks anything up in ViewData.

            var items = Items ?? Enumerable.Empty();
            var currentValues = Generator.GetCurrentValues(
                ViewContext,
                For.ModelExplorer,
                expression: For.Name,
                allowMultiple: allowMultiple);

            var tagBuilder = Generator.GenerateSelect(
                ViewContext,
                For.ModelExplorer,
                optionLabel: null,
                expression: For.Name,
                selectList: items,
                currentValues: currentValues,
                allowMultiple: allowMultiple,
                htmlAttributes: null);

            if (tagBuilder != null)
            {
                output.MergeAttributes(tagBuilder);
                output.PostContent.Append(tagBuilder.InnerHtml);
            }
           // Whether or not (not being highly unlikely) we generate anything, could update contained
            // elements. Provide selected values for tag helpers. They'll run next.
            ViewContext.FormContext.FormData[SelectedValuesFormDataKey] = currentValues;
        }

Custom Tag Helpers

Sabendo disso com certeza notamos a possibilidade de criar as nossas próprias Tag Helpers Customizadas e isso é ótimo.

Existem componentes particulares por cada cliente e suas aplicações e com esta técnica podemos melhorar a questão do reaproveitamento e padronização das aplicações.

Segue link com um exemplo de TagHelper Customizada Clique Aqui.

Nadador de maratonas aquática aposentado, Pai, Programador .net e do que estiver por ai. Trabalho a alguns anos, grande parte deste fazendo “projetinhos”. Assumido um programador, não gosta de ver a glória sem participar da guerra. Sonhando um dia acertar no projeto perfeito e viver eternamente sendo dono da sua própria intelectualidade.

Facebook Twitter LinkedIn Google+ Skype 

Comentários

comentarios