Introdução
Neste guia, vamos criar um projeto simples com um formulário que possui validação em Blazor.
Antes de começarmos, é importante verificar a versão do .NET instalada. Para fazer isso, execute o seguinte comando:
dotnet --version
A versão instalada no meu sistema é a seguinte:
7.0.101
Para simplificar o processo, vamos criar um projeto Blazor Server usando o comando a seguir:
dotnet new blazorserver
Criação da tela
Dentro da pasta "Pages", adicione o arquivo "PessoaForm.razor" com o seguinte código:
@page "/pessoa-form"
@using Microsoft.Extensions.Logging
@inject ILogger<Pessoa> Logger
<EditForm EditContext="@editContext" OnSubmit="@HandleSubmit">
<h2>Formulário de Pessoa</h2>
<DataAnnotationsValidator />
<ValidationSummary />
<div class="mb-3">
<label class="form-label">Nome</label>
<InputText class="form-control" @bind-Value="pessoa.Nome"/>
</div>
<div class="mb-3">
<label class="form-label">E-mail</label>
<InputText class="form-control" @bind-Value="pessoa.Email"/>
</div>
<div class="mb-3">
<label class="form-label">Idade</label>
<InputNumber class="form-control" @bind-Value="pessoa.Idade" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</EditForm>
@code {
private Pessoa pessoa = new();
private EditContext? editContext;
protected override void OnInitialized()
{
editContext = new(pessoa);
}
private async Task HandleSubmit()
{
if (editContext != null && editContext.Validate())
{
Logger.LogInformation("Formulário válido!");
await Task.CompletedTask;
}
else
{
Logger.LogInformation("Formulário inválido!");
}
}
}
Pontos a serem observados:
- O componente "EditForm" no Blazor é essencial para a criação e manipulação de formulários. Ele permite a vinculação bidirecional de dados, facilita a validação de entrada e fornece uma maneira conveniente de lidar com a submissão de formulários.
- O componente "DataAnnotationsValidator" é responsável por validar as regras de validação definidas nas anotações de dados do modelo associado ao formulário. Ele verifica automaticamente os campos do formulário e exibe mensagens de erro correspondentes.
- O componente "ValidationSummary" exibe um resumo de todos os erros de validação do formulário em um local centralizado, facilitando a visualização e a correção das informações inválidas.
- A classe "EditContext" registra e rastreia os campos que estão sendo editados, permitindo a detecção de alterações e atualizações adequadas nos dados do formulário. Além disso, ele gerencia e exibe mensagens de validação, fornecendo feedback relevante ao usuário sobre erros ou problemas de validação.
- O método
editContext.Validate()
é usado no Blazor para executar a validação de um formulário associado a um objeto EditContext. Quando chamado, o métodoValidate()
percorre todos os campos do formulário e aplica as regras de validação definidas nas anotações de dados do modelo associado. - O formulário foi desenvolvido utilizando como base o framework Bootstrap 5.
Criação do modelo
Na pasta "Data" crie um arquivo "Pessoa.cs", com o seguinte código:
using System.ComponentModel.DataAnnotations;
namespace FormValidation.Data;
public class Pessoa
{
[Required(ErrorMessage = "O campo {0} é obrigatório")]
[StringLength(10, ErrorMessage = "O campo {0} é muito longo.")]
public string? Nome { get; set; } = "";
[Required(ErrorMessage = "O campo {0} é obrigatório")]
public string? Email { get; set; } = "";
[Required(ErrorMessage = "O campo {0} é obrigatório")]
[Range(1,150, ErrorMessage ="A idade tem que ser entre 1 e 150.")]
public int Idade { get; set; }
}
Pontos a serem observados:
- Data Annotations é um recurso do .NET que permite a aplicação de anotações ou atributos diretamente em classes e propriedades de modelo para definir metadados e comportamentos específicos. No caso do nosso modelo essas anotações são usadas para fins de validação de dados, onde podemos definir regras como campos obrigatórios
Required
, comprimento máximoRange
, formato de dados, entre outros.
Conclusão
Neste post exploramos como realizar a validação de formulários no Blazor. Através do uso do componente EditForm, podemos criar formulários interativos com vinculação bidirecional de dados e recursos de validação. Com a ajuda das Data Annotations, podemos definir regras de validação diretamente nas propriedades do modelo, permitindo que o Blazor realize a validação automática dos campos do formulário. Além disso, os componentes DataAnnotationsValidator e ValidationSummary nos auxiliam na exibição de mensagens de erro claras e precisas, garantindo uma experiência do usuário aprimorada. Com essas técnicas e recursos, estamos preparados para criar formulários robustos, confiáveis e amigáveis ao usuário no Blazor.
Top comments (0)