Blazor Server - CRUD com Entity Framework Core 3.1 - II

Hoje vamos criar uma aplicação Blazor do lado do servidor e realizar um CRUD usando o EF Core 3.1.

Vamos continuar a primeira parte do artigo definindo os demais componentes em nosso projeto Blazor Server para realizar as operações CRUD usando o EF Core 3.1.

Vamos ter que criar 3 componentes Blazor todos na pasta Pages :

  1. AddAluno
  2. EditAluno
  3. DeleteAluno

Para criar cada componente selecione a pasta Pages e acione o menu Project ->Add New Item;

A seguir escolha Razor Component, informe o nome e clique no botão Add;

Neste artigo vamos criar o componente para incluir um novo aluno.

Como vamos realizar a entrada de dados precisamos validar os dados e para isso vamos usar o recurso Data Annotations do namespace System.ComponentModel.DataAnnotations.

Assim vamos aplicar os atributos na entidade Estudante definida na pasta Data e definir a validação:

    public class Estudante
    {
        public int EstudanteId { get; set; }

        [Required(ErrorMessage = "O nome do aluno é obrigatório")]
        public string Nome { get; set; }

        [Required(ErrorMessage = "Informe o email do aluno")]
        [RegularExpression(".+\\@.+\\..+", ErrorMessage = "Informe um email válido...")]
        public string Email { get; set; }

        [Required(ErrorMessage = "A idade deve estar entre 15 e 65 anos")]
        [Range(15, 65)]
        public int Idade { get; set; }
    }

Aqui estamos usando os atributos :

Para as propriedades Email e Idade estamos aplicando dois atributos. O primeiro obriga a entrada do valor e o segundo realiza uma validação mais específica.

Para o nosso exemplo temos definido que:

Validação de dados com EditForm

Para poder realizar a validação no formulário de entrada de dados podemos definir o formulário usando o componente EditForm e utilizar o componente <DataAnnotationsValidator> para ativar a validação definida com Data Annotations.

Um conjunto de componentes de entrada internos está disponível para receber e validar a entrada do usuário. As entradas são validadas quando são alteradas e quando um formulário é enviado. Os componentes de entrada disponíveis no componente EditForm são mostrados na tabela a seguir.

Componente de entrada Renderizado como…
InputText <input>
InputTextArea <textarea>
InputSelect <select>
InputNumber <input type="number">
InputCheckbox <input type="checkbox">
InputDate <input type="date">

Todos os componentes de entrada, incluindo EditForm, dão suporte a atributos arbitrários. Qualquer atributo que não corresponda a um parâmetro de componente é adicionado ao elemento HTML renderizado.

O componente EditForm cria um EditContext como um valor em cascata que controla os metadados sobre o processo de edição, incluindo quais campos foram modificados e as mensagens de validação atuais.

O EditForm também fornece eventos convenientes para envios válidos e inválidos como:

Como alternativa, use OnSubmit para disparar a validação e verificar os valores do campo com o código de validação personalizado.

Para exibir as mensagens de validação podemos usar os componentes:

Vamos então ao trabalho...

Criando o componente AddAluno

No componente AddAluno para incluir um novo aluno vamos ter que validar os dados entrados pelo usuário.

O Blazor suporta formulários e a validação usando os atributos Data Annotations que já definimos na entidade Estudante. Assim vamos:

  • Definir o formulário usando o componente EditForm;
  • Ativar a validação com o atributo DataAnnotationsValidator;
  • Exibir as mensagens de erro usando os atributos: ValidationSummary e ValidationMessage;

Após criar o componente AddAluno inclua o código abaixo:

@page "/addaluno"
@inject HttpClient  http
@inject NavigationManager NavigationManager
<h2>Criar Aluno</h2>
<hr />
<EditForm Model="@aluno" OnValidSubmit="CreateAluno">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div class="row">
        <div class="col-md-8">
            <div class="form-group">
                <label for="Nome" class="control-label">Nome</label>
                <InputText @bind-Value="@aluno.Nome" class="form-control" />
                <ValidationMessage For="@(()=> aluno.Nome)" />
            </div>
            <div class="form-group">
                <label for="Email" class="control-label">Email</label>
                <InputText @bind-Value="@aluno.Email" class="form-control" />
                <ValidationMessage For="@(()=> aluno.Email)" />
            </div>
            <div class="form-group">
                <label for="Idade" class="control-label">Idade</label>
                <InputNumber @bind-Value="@aluno.Idade" class="form-control" />
                <ValidationMessage For="@(()=> aluno.Idade)" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <input type="submit" class="btn btn-primary" value="Salvar" />
                <input type="button" class="btn" @onclick="@Cancel" value="Cancelar" />
            </div>
        </div>
    </div>
</EditForm>

@code {
    Estudante aluno = new Estudante();
    protected async Task CreateAluno()
    {
        await http.PostJsonAsync("/api/estudante/", aluno);
        NavigationManager.NavigateTo("alunos");
    }
    void Cancel()
    {
        NavigationManager.NavigateTo("alunos");
    }
}

Neste código estamos injetando o serviço HttpClient e o serviço NavigationManager. A seguir:

  • O formulário valida a entrada do usuário nos campos uando a validação definida no tipo Estudante. O modelo é criado no bloco de @code do componente. O campo é atribuído ao atributo Model do elemento <EditForm>.
  • O @bind-Value do componente de InputText associa:
    • A propriedade de modelo (aluno.Nome) para a propriedade Value do componente de InputText.
    • Um delegado de evento de alteração para a propriedade ValueChanged do componente de InputText.
  • O componente DataAnnotationsValidator anexa o suporte à validação usando anotações de dados.
  • O componente ValidationSummary resume as mensagens de validação.
  • O componente ValidationMessage exibe as mensagens de validação em campos específicos;
  • O método CreateAluno é disparado quando o formulário for enviado com êxito (aprovado na validação).

    • Executando o projeto teremos o resultado abaixo:

    Na próxima parte do artigo vamos definir o componente para editar dados de um aluno existente.

    Pegue o código do projeto aqui: Blazor_Crud1_2.zip  (sem as referências)

    "Levando ele mesmo(Jesus) em seu corpo os nossos pecados sobre o madeiro, para que, mortos para os pecados, pudéssemos viver para a justiça; e pelas suas feridas fostes sarados."
    1 Pedro 2:24
     


    Referências:

    José Carlos Macoratti