ASP .NET Core 3.1 - Usando o Identity de cabo a rabo - X

Hoje vamos continuar a série de artigos mostrando como usar o ASP .NET Core Identiy na versão 3.1 da ASP .NET .Core e do EF Core.

Continuando a nona parte do artigo veremos como realizar a validação do lado do cliente.

A validação do lado do servidor na ASP .NET Core

Uma forma de implementar a validação do lado do servidor é usar atributos de validação como Required, StringLength, etc,  através do recurso Data Annotations.

Como o nome indica, a validação do lado do servidor é feita no servidor. Portanto, há uma viagem de ida e volta entre o navegador do cliente e o servidor.

A requisição deve ser enviada pela rede ao servidor Web para processamento. Isso significa que, se a rede estiver lenta ou se o servidor estiver ocupado processando outras solicitações, o usuário final poderá esperar alguns segundos e também aumentará a carga no servidor.

Essa validação pode ser realizada na própria máquina do cliente, o que significa que não há ida e volta ao servidor, nem tempo de espera, o cliente recebe feedback instantâneo e a carga no servidor também é reduzida em grande medida.

A validação do lado do cliente

Existem duas abordagens que podemos usar para implementar a validação no lado do cliente:

  1. Escrever o nosso próprio código JavaScript personalizado para implementar a validação do lado do cliente, que é obviamente tediosa e demorada;
  2. Usar as bibliotecas de validação unobtrusive do lado do cliente fornecidas pela asp.net core;

Na segunda abordagem não temos que escrever uma única linha de código, basta incluir os scripts de validação jQuery Unobtrusive :


<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/jquery-validate/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
 

A validação unobtrusive nos permite pegar os atributos de validação do servidor já existentes e usá-los para implementar a validação do cliente. Não precisamos escrever uma única linha de código JavaScript personalizado. Tudo o que precisamos é dos 3 arquivos de script acima na ordem especificada.

A validação discreta é feita usando a biblioteca jquery.validate.unobtrusive.js. Essa biblioteca é construída sobre a biblioteca jquery.validate.js, que por sua vez usa o jQuery. É por isso que precisamos importar essas 3 bibliotecas na ordem especificada.

Nota:  Essas bibliotecas são instaladas por padrão na pasta wwwroot do projeto.

Como funciona essa validação ?

No nosso exemplo a propriedade Email esta decorada com o atributo [Required]. Para gerar um campo input para o Email, usamos a tag helper :


   <input asp-for="Email"/>
 

As tag helpers da ASP .NET Core trabalham em combinação com os atributos de validação do modelo e geram o seguinte código HTML :


   <input id="Email" name="Email" type="email" data-val="true" data-val-required="O Email  é obrigatório." />
 

Observe que no HTML gerado temos os atributos data-* que  permitem adicionar informações extras a um elemento HTML.

Esses atributos data-* transportam todas as informações necessárias para executar a validação do lado do cliente. É a biblioteca unobtrusive (ou seja, jquery.validate.unobtrusive.js) que lê esses atributos data-val e executa a validação do lado do cliente.

Se a validação unobtrusive não estiver funcionando no seu projeto faça as seguintes verificações:

No próximo artigo veremos a validação remota na ASP .NET Core.

"Os meus olhos estão continuamente no Senhor, pois ele tirará os meus pés da rede."
Salmos 25:15

Referências:

José Carlos Macoratti