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
[code language=”csharp”]
@Html.ValidationSummary(true)
[/code]
Tag Helper
[code language=”html”]
<div asp-validation-summary=”All” id=”validation_day” class=”form-group”>
<span style=”color:red”>This is my message</span>
</div>
[/code]
- ValidationMessageFor
Html Helper
[code language=”csharp”]
@Html.ValidationMessageFor(model => model.Nome)
[/code]
Tag Helper
[code language=”html”]
<span asp-validation-for=”Nome” />
[/code]
- Select
Html Helper
[code language=”csharp”]
@Html.DropDownListFor(model=>model.Tags)
[/code]
Tag Helper
[code language=”html”]
<select asp-for=”Tags” asp-items=”(IEnumerable<SelectListItem>)Model.Tags” size=”20" class=”form-control”>
<option value=””> — Selecione — </option>
</select>
[/code]
- Form
Html Helper
[code language=”csharp”]
@using (Html.BeginForm(“Create”))
{
@Html.AntiForgeryToken()
}
[/code]
Tag Helper
[code language=”html”]
<form asp-anti-forgery=”false” asp-action=”Create”>
</form>
[/code]
- Hidden
Html Helper
[code language=”csharp”]
@Html.HiddenFor(model=>model.Id)
[/code]
Tag Helper
[code language=”html”]
<input type=”hidden” asp-for=”Id” /></pre>
[/code]
- Label
Html Helper
[code language=”csharp”]
@Html.LabelFor(model => model.Nome, new { @class = “control-label col-md-2” })
[/code]
Tag Helper
[code language=”html”]
<label asp-for=”Nome” class=”control-label col-md-2" />
[/code]
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.
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.
[code language=”csharp”]
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>
}
}
[/code]
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:
[code language=”csharp”]
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;
}
[/code]
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.
