Blazor Server - CRUD com Entity Framework Core 3.1

Blazor Server - CRUD com Entity Framework Core 3.1 - IV

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

Vamos continuar a terceira parte do artigo definindo o componente para deletar os dados de um aluno existente em nosso projeto Blazor Server.

Criando o componente DeleteAluno

No componente DeleteAluno vamos deletar dados do aluno e vamos apenas exibir os dados do aluno selecionado e solicitar a confirmação da exclusão.

Para isso não precisamos usar um componente EditForm nem realizar a validação dos dados.

Crie o componente DeleteAluno na pasta Pages e a seguir inclua o código abaixo:

@page "/deletealuno/{id:int}"

@inject NavigationManager NavigationManager
@inject HttpClient http
@inject IWebHostEnvironment Env

<h2>Confirma Exclusão ?</h2>
<p>Deseja realmente deletar este aluno com Id: <b> @id</b></p>
<br />

<Aviso Exibir="Exibir">
    <strong>@Mensagem</strong>
</Aviso>

<div class="col-md-8">
    <table class="table">
        <tr>
            <td>Nome</td>
            <td>@aluno.Nome</td>
        </tr>
        <tr>
            <td>Email</td>
            <td>@aluno.Email</td>
        </tr>
        <tr>
            <td>Idade</td>
            <td>@aluno.Idade</td>
        </tr>
    </table>
    <div class="form-group">
        <input type="button" value="Deletar" @onclick="@Delete" class="btn btn-primary" />
        <input type="button" value="Cancelar" @onclick="@Cancel" class="btn" />
    </div>
</div>

@code {
    bool Exibir = false;

    [Parameter]
    public string Mensagem { get; set; }

    [Parameter]
    public int id { get; set; }

    Estudante aluno = new Estudante();

    protected override async Task OnInitializedAsync()
    {
        try
        {
            aluno = await http.GetJsonAsync<Estudante>("/api/estudante/" + id);  
        }
        catch (Exception ex)
        {
            Exibir = true;
            if (Env.IsDevelopment())
            {
                Mensagem = "Erro ao acessar os dados ...\n" + ex.StackTrace.ToString();
            }
            else
            {
                Mensagem = "Não foi possível acessar o aluno ...";
            }
        }

    protected async Task Delete()
    {
        try
        {
            await http.DeleteAsync("/api/estudante/" + id);  
            NavigationManager.NavigateTo("alunos");
        }
        catch (Exception ex)
        {
            Exibir = true;
            if (Env.IsDevelopment())
            {
                Mensagem = "Erro ao acessar os dados ...\n" + ex.StackTrace.ToString();
            }
            else
            {
                Mensagem = "Não foi possível excluir o aluno ...";
            }
        }
    }

    void Cancel()
    {
        NavigationManager.NavigateTo("alunos");
    }
}

Para obter os dados do aluno a ser excluido definimos o parâmetro id que é o código do aluno, e, no evento OnInitializedAsync() estamos obtendo os dados do aluno pelo seu id usando o método GetJsonAsync.

Neste código também estamos injetando o serviço HttpClient e o serviço NavigationManager e agora estamos injetando o serviço IWebHostEnvironment para poder verificar em qual ambiente estamos.

Se estivermos no ambiente de produção vamos exibir uma mensagem amigável caso contrário vamos exibir uma mensagem com mais detalhes de erro.

Para poder ter acesso a este recurso vamos incluir no arquivo _Imports.razor a referência aos namespaces Microsoft.AspNetCore.Hosting e Microsoft.Extensions.Hosting :

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using Blazor_Crud1
@using Blazor_Crud1.Shared
@using Blazor_Crud1.Data
@using Microsoft.AspNetCore.Hosting
@using Microsoft.Extensions.Hosting;

Para exibir a mensagem de erro vamos criar um componente chamado Aviso na pasta Shared :

@if (Exibir)
{
    <div class="alert alert-secondary mt-4" role="alertdialog">
        @ChildContent
    </div>
}

@code {
    [Parameter]
    public bool Exibir { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

Aqui temos dois parâmetros : o primeiro usado para definir se desejamos exibir a mensagem e o segundo parâmetro do tipo RenderFragment que é a mensagem.

Para excluir o aluno usamos o método DeleteAsync() passando o id do aluno selecionado.

Executando o projeto teremos o resultado abaixo:

Com isso concluímos a implementação dos componentes e agora estamos realizando as operações CRUD para gerenciar dados do aluno.

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

"Mas eu confio na tua benignidade; na tua salvação se alegrará o meu coração.
Cantarei ao Senhor, porquanto me tem feito muito bem."
Salmos 13:5,6

Referências:

José Carlos Macoratti