ASP .NET  Core - Usando Tag Helpers em formulários

 Neste artigo vamos introduzir os conceitos básicos para usar as Tag Helpers da ASP .NET Core de forma a criar formulários HTML robustos.

As Tag Helpers permitem que o código do lado do servidor participe na criação e renderização de elementos HTML em arquivos Razor. Elas são um novo recurso semelhante aos HTML Helpers, que nos ajudam a renderizar o HTML.

Em muitos casos, os HTML Helpers fornecem uma abordagem alternativa a uma Tag Helper específica, mas é importante reconhecer que as Tag Helpers não substituem os HTML Helpers e não há uma Tag Helper para cada HTML Helper.

Nota:  Para usar as Tag Helpers, nas versões do VS onde ela não vêm instalada por padrão, precisamos instalar uma biblioteca NuGet - Microsoft.AspNet.Mvc.TagHelpers e também adicionar uma diretiva addTagHelper à(s) views que usam essas tag helpers.

A Tag Helper Form

Vamos iniciar com a Tag Helper Form que :

- Gera o valor de atributo Action HTML <FORM> para uma Action de um controlador MVC ou uma rota nomeada;
- Gera um Token de Verificação de Solicitação oculto para evitar a falsificação de solicitações entre sites (quando usado com o atributo [ValidateAntiForgeryToken] no método de action HTTP Post);
- Fornece o atributo asp-route-<Nome do parâmetro>, no qual <Nome do parâmetro> é adicionado aos valores da rota. Os parâmetros routeValues para Html.BeginForm e Html.BeginRouteForm fornecem funcionalidade semelhante;
- Possui os HTML Helpers alternativos : HTML Html.BeginForm e Html.BeginRouteForm;

Exemplo:

<form asp-controller="Demo" asp-action="Registro" method="post">
    <!-- elementos Input e Submit -->
</form>

A Tag Helper Form acima gera o seguinte HTML:

<form method="post" action="/Demo/Registro">
  <!-- elementos Input and Submit -->
  <input name="__RequestVerificationToken" type="hidden" value="<removido por simplicidade...>" />
</form>

O runtime MVC gera o valor do atributo action a partir dos atributos das tag Helper Form asp-controller e asp-action. Ela gera também um token verificação de solicitação oculto para evitar a falsificação de solicitações entre sites.

Proteger um formulário HTML puro de falsificação de solicitações entre sites é muito difícil, a tag Helper form fornece esse serviço para você.

Usando uma rota nomeada

A tag Helper asp-route pode também gerar uma marcação para o atributo HTML action. Um aplicativo com uma rota nomeada registro poderia usar a seguinte marcação para a página de registro:

<form asp-route="registro" method="post">
    <!-- elementos Input e Submit -->
</form>

Muitas views na pasta Views/Account, geradas quando você cria uma nova aplicação web com autenticação, utilizam o atributo asp-route-returnurl, aqui returnurl que representa o parâmetro usado:


<form asp-controller="Account" asp-action="Login"  asp-route-returnurl="@ViewData["ReturnUrl"]"  method="post" class="form-horizontal" role="form">
 

Com os templates embutidos, returnUrl só é preenchido automaticamente quando você tenta acessar um recurso autorizado, mas não é autenticado ou autorizado.

Quando você tenta um acesso não autorizado, o middleware de segurança o redireciona para a página de login com o conjunto returnUrl.

A Tag Helper Input

A Tag Helper Input vincula um elemento HTML <input> a uma expressão de modelo na sua view razor. A sintaxe usada é :

<Input asp-for="<Nome da expressão>" />

A Tag Helper Input:

- Gera os atributos HTML id e name para o 'nome da expressão' especificado no atributo asp-for. Asp-for="Property1.Property2" é equivalente a m => m.Property1.Property2, que é o valor do atributo literalmente é parte de uma expressão. O nome da expressão é o que é usado para o valor do atributo asp-for;

- Define o valor do atributo do tipo HTML com base no tipo de modelo e nos atributos de anotação de dados aplicados à propriedade do modelo;

- Não substituirá o valor do atributo do tipo HTML quando um for especificado;

- Gera atributos de validação HTML5 a partir de atributos de anotação de dados aplicados às propriedades do modelo;

- Tem como alternativa os HTML Helper: Html.TextBoxFor e Html.EditorFor;

- Fornece a forte digitação. Se o nome da propriedade mudar e você não atualizar a Tag Helper você receberá um erro semelhante ao seguinte:

An error occurred during the compilation of a resource required to process this request. Please review the following specific error details and modify your source code appropriately.

Type expected 'RegisterViewModel' does not contain a definition for 'Email' and no extension method 'Email' accepting a first argument of type 'RegisterViewModel' could be found (are you missing a using directive or an assembly reference?)

A Tag Helper Input define o atributo de tipo HTML com base nos tipos da .NET framework.

A tabela a seguir lista alguns tipos comuns do .NET e o tipo de HTML gerado (nem todos os tipos de .NET estão listados).

Tipo .NET Input Type
Bool  type=”checkbox”
String  type=”text”
DateTime  type=”datetime”
Byte  type=”number”
Int  type=”number”
Single, Double  type=”number”

A tabela a seguir mostra alguns atributos de anotações de dados(data annotations) comuns que a Tag Helper Input mapeará para os tipos de entrada específicos (nem todos os atributos de validação estão listados):

Atributo Input Type
[EmailAddress]  type=”email”
[Url]  type=”url”
[HiddenInput]  type=”hidden”
[Phone]  type=”tel”
[DataType(DataType.Password)]  type=”password”
[DataType(DataType.Date)]  type=”date”
[DataType(DataType.Time)]  type=”time”

Exemplo de uso:

ViewModel C#
using System.ComponentModel.DataAnnotations;     
namespace FormsTagHelper.ViewModels
{
    public class RegisterViewModel
    {
        [Required]
        [EmailAddress]
        [Display(Name = "Email Address")]
        public string Email { get; set; }
        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; }
    }
}
Tag Helper
@model RegisterViewModel
<form asp-controller="Demo" asp-action="RegistroInput"  method="post">
    Email:  <input asp-for="Email" /> <br />
    Password: <input asp-for="Password" /><br />
    <button type="submit">Registrar</button>
</form>

 

HTML Gerado
<form method="post" action="/Demo/RegistroInput">
       Email:
       <input type="email" data-val="true"
              data-val-email="O Email não é um endereço de email válido."
              data-val-required="O campo Email é obrigatório"
              id="Email" name="Email" value="" /> <br>
       Password:
       <input type="password" data-val="true"
              data-val-required="O campo Password é obrigatório."
              id="Password" name="Password" /><br>
       <button type="submit">Registrar</button>
     <input name="__RequestVerificationToken" type="hidden" value="<removido...>" />
   </form>

As anotações de dados aplicadas às propriedades Email e Password geram metadados no modelo. A Tag Helper Input consome os metadados do modelo e produz atributos data-val-* de HTML5.

Esses atributos descrevem os validadores a serem anexados aos campos de entrada. Isso fornece validação HTML5 e jQuery discreta. Os atributos não-intrusivos têm o formato data-val-rule= "Error Message", onde rule é o nome da regra de validação (como data-val-required, data-val-email, data-val-maxlength, etc.)

Se uma mensagem de erro for fornecida no atributo, ela será exibida como o valor para o atributo data-val-rule. Há também atributos de formulário data-val-ruleName-argumentName = "argumentValue" que fornecem detalhes adicionais sobre a regra, por exemplo, data-val-maxlength-max = "1024".

A utilização das Tag Helpers ao invés dos Html Helpers torma o código mais fácil de ler para um desenvolvedor web que esteja participando do projeto pois é uma sintaxe mais próxima do código HTML.

Você pode usar qualquer uma delas a seu critério em aplicações ASP .NET Core MVC.

Se dissermos que temos comunhão com ele (Jesus), e andarmos em trevas, mentimos, e não praticamos a verdade.
Mas, se andarmos na luz, como ele na luz está, temos comunhão uns com os outros, e o sangue de Jesus Cristo, seu Filho, nos purifica de todo o pecado.
1 João 1:6,7

Referências:


José Carlos Macoratti