Blazor Server - CRUD com EFCore com Modal Dialog

Continuando a primeira parte do artigo vamos agora fazer alguns ajustes no projeto e cria o componente Blazor para exibir a lista de tarefas.

Antes de iniciar a criação dos componentes vamos fazer uns pequenos ajustes em nosso projeto.

Vamos criar na pasta wwwroot a pasta images e nesta pasta vamos incluir o arquivo tarefas1.jpg e a seguir vamos alterar o código do componente Index.razor para exibir esta imagem:

Outro ajuste que vamos fazer é incluir alguns dados iniciais na tabela ListaTarefas. Para isso vamos alterar o código da classe de contexto AppDbContext definindo no método OnModelCreating o código que usa a propriedade HasData do EF Core:

Agora basta gerar o script de migração digitando na janela do Package Manager Console: add-migration SeedData

A seguir digite o comando : update-database e pronto 'é só correr para o abraço...'

Precisamos também registrar os serviços criados no arquivo Startup no método ConfigureServices:

       public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<AppDbContext>(options =>
               options.UseSqlServer(
                   Configuration.GetConnectionString("DefaultConnection")));

            services.AddRazorPages();
            services.AddServerSideBlazor();
           services.AddTransient<ITarefasService, TarefasService>();
        }

O último ajuste é definir no arquivo _Imports.razor do projeto os namespaces Blazor_Tarefas.Data e Blazor_Tarefas.Services:

@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.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Blazor_Tarefas
@using Blazor_Tarefas.Shared
@using Blazor_Tarefas.Data
@using Blazor_Tarefas.Services

Vamos criar um componente Blazor chamado ListaTarefas cujo objetivo será exibir a relação das tarefas já cadastradas. No nosso exemplo teremos duas tarefas cadastradas.

Assim inclua na pasta Pages o componente ListaTarefas.razor e a seguir inclua o código abaixo neste arquivo:

@page "/listatarefas"

@inject ITarefasService service

<h3>Lista de Tarefas</h3>

@if (listaTarefas == null)
{
    <p><em>Carregado...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Tarefa</th>
                <th>Status</th>
                <th>Término</th>
                <th>Edita</th>
                <th>Deleta</th>
            </tr>
        </thead>
        <tbody>
           @foreach (var tarefa in listaTarefas)
            {
                <tr>
                    <td>@tarefa.Nome</td>
                    <td>@tarefa.Status</td>
                    <td>@tarefa.DataConclusao.ToShortDateString()</td>
                    <td><input type="button" class="btn btn-primary" value="Edita" /></td>
                    <td><input type="button" class="btn btn-danger" value="Deleta" /></td>
                </tr>
            }
        </tbody>
    </table>
}
<div>
    <input type="button" data-toggle="modal" data-target="#taskModal" class="btn btn-primary" value="Incluir Tarefa" />
</div>

@code {
List<Tarefa> listaTarefas;

    protected override async Task OnInitializedAsync()
    {
        listaTarefas = await service.Get();
    }
}

Neste componente estamos injetando uma instância do serviço ITarefasService para acessar os dados e no método OnInitializedAsync() chamamos o método Get() do serviço que retorna os dados que são exibidos.

Tudo muito básico e padronizado. Executando o projeto agora teremos o resultado a seguir:

Vamos fazer isso na próxima parte do artigo usando os recursos do JQuery e do BootStrap e criar janelas modais usando os recursos da interoperabilidade JavaScript.

"Quando eu disse: O meu pé vacila; a tua benignidade, Senhor, me susteve."
Salmos 94:18