Blazor -  CRUD básico usando Dapper - II

Hoje veremos como realizar um CRUD básico usando o micro ORM Dapper em uma aplicação Blazor.

Continuando a primeira parte do artigo vamos criar os componentes da aplicação Blazor.

Alterando o código do componente Index.razor

O componente Index.razor é que vai apresentar a página inicial do projeto.

Vamos alterar o código gerado incluindo o código abaixo:

@page "/"
<div>
    <img src="/images/maco1b.jpg" alt="Macoratti .net " class="center" />
</div>
<hr />
<img src="/images/loja.jpg" class="imageLogo" />

Criando o componente para exibir os produtos

Vamos criar na pasta Pages o componente ListaProdutos.razor que vai exibir a relação dos produtos contidos na tabela Produtos:

@page "/produtos"
@inject IProdutoService produtoService
<h2>Produtos</h2>
<p>
    <a href="/novoproduto">Novo Produto</a>
</p>
@if (produtos == null)
{
    <img src="./basicloader.gif" />
}
else
{
    <table class='table'>
        <thead>
            <tr>
                <th>Nome</th>
                <th>Descrição</th>
                <th>Estoque</th>
                <th>Preco</th>
                <th>Imagem</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var produto in produtos)
            {
                <tr>
                    <td>@produto.Nome</td>
                    <td>@produto.Descricao</td>
                    <td>@produto.Estoque</td>
                    <td>@produto.Preco</td>
                    <td>@produto.Imagem</td>
                    <td>
                        <a href='/editaproduto/@produto.ProdutoId'>Edita</a>
                        <a href='/deletaproduto/@produto.ProdutoId'>Deleta</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}
@code {
    IEnumerable<Produto> produtos;
    protected override async Task OnInitializedAsync()
    {
        produtos = await produtoService.ListAll();
    }
}

Criando o componente para criar um novo produto

Na pasta Pages crie o componente NovoProduto.razor que vai criar um novo produto e salva na tabela Produtos:

@page "/novoproduto"
@inject NavigationManager NavigationManager
@inject IProdutoService produtoService
<h2>Novo Produto</h2>
<hr />
<form>
    <div class="row">
        <div class="col-md-8">
            <div class="form-group">
                <label for="Nome" class="control-label">Nome</label>
                <input for="Nome" class="form-control" @bind="@produto.Nome" />
            </div>
            <div class="form-group">
                <label for="Descricao" class="control-label">Descrição</label>
                <input for="Descricao" class="form-control" @bind="@produto.Descricao" />
            </div>
            <div class="form-group">
                <label for="Estoque" class="control-label">Estoque</label>
                <input for="Estoque" class="form-control" @bind="@produto.Estoque" />
            </div>
            <div class="form-group">
                <label for="Preco" class="control-label">Preço</label>
                <input for="Preco" class="form-control" @bind="@produto.Preco" />
            </div>
            <div class="form-group">
                <label for="Imagem" class="control-label">Foto</label>
                <input for="Imagem" class="form-control" @bind="@produto.Imagem" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <input type="button" class="btn btn-primary" @onclick="@CriaProduto" value="Salvar" />
                <input type="button" class="btn" @onclick="@Cancela" value="Cancelar" />
            </div>
        </div>
    </div>
</form>
@code {
    Produto produto = new Produto();
    protected async Task CriaProduto()
    {
        await produtoService.Create(produto);
        NavigationManager.NavigateTo("produtos");
    }
    void Cancela()
    {
        NavigationManager.NavigateTo("produtos");
    }
}

Criando o componente para atualizar um produto

Na pasta Pages crie o componente EditaProduto.razor que vai permitir alterar as informações de um produto e salvar na tabela Produtos:

@page "/editaproduto/{id:int}"
@inject NavigationManager NavigationManager
@inject IProdutoService produtoService
<h2>Edita Produto</h2>
<hr />
<form>
    <div class="row">
        <div class="col-md-8">
            <div class="form-group">
                <label for="Nome" class="control-label">Nome</label>
                <input for="Nome" class="form-control" @bind="@produto.Nome" />
            </div>
            <div class="form-group">
                <label for="Descricao" class="control-label">Descricao</label>
                <input for="Descricao" class="form-control" @bind="@produto.Descricao" />
            </div>
            <div class="form-group">
                <label for="Estoque" class="control-label">Estoque</label>
                <input for="Estoque" class="form-control" @bind="@produto.Estoque" />
            </div>
            <div class="form-group">
                <label for="Preco" class="control-label">Preco</label>
                <input for="Preco" class="form-control" @bind="@produto.Preco" />
            </div>
            <div class="form-group">
                <label for="Imagem" class="control-label">Imagem</label>
                <input for="Imagem" class="form-control" @bind="@produto.Imagem" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <input type="button" class="btn btn-primary" @onclick="@AtualizaProduto" value="Atualiza" />
            <input type="button" class="btn" @onclick="@Cancela" value="Cancela" />
        </div>
    </div>
</form>
@code {
    [Parameter]
    public int id { get; set; }
    Produto produto = new Produto();
    protected override async Task OnInitializedAsync()
    {
        produto = await produtoService.GetById(id);
    }
    protected async Task AtualizaProduto()
    {
        await produtoService.Update(produto);
        NavigationManager.NavigateTo("produtos");
    }
    void Cancela()
    {
        NavigationManager.NavigateTo("produtos");
    }
}

Criando o componente para deletar um produto

Na pasta Pages crie o componente DeletaProduto.razor que vai excluir um produto da tabela Produtos:

@page "/deletaproduto/{id:int}"
@inject NavigationManager NavigationManager
@inject IProdutoService produtoService
<p>Deseja deletar este produto com Id :<b> @id</b></p>
<br />
<div class="col-md-8">
    <table class="table">
        <tr>
            <td>Nome</td>
            <td>@produto.Nome</td>
        </tr>
        <tr>
            <td>Descrição</td>
            <td>@produto.Descricao</td>
        </tr>
        <tr>
            <td>Estoque</td>
            <td>@produto.Estoque</td>
        </tr>
        <tr>
            <td>Preço</td>
            <td>@produto.Preco</td>
        </tr>
        <tr>
            <td>Imagem</td>
            <td>@produto.Imagem</td>
        </tr>
    </table>
    <div class="form-group">
        <input type="button" value="Deleta" @onclick="@Deleta" class="btn btn-primary" />
        <input type="button" value="Cancela" @onclick="@Cancela" class="btn" />
    </div>
</div>
@code {
    [Parameter]
    public int id { get; set; }
    Produto produto = new Produto();
    protected override async Task OnInitializedAsync()
    {
        produto = await produtoService.GetById(id);
    }
    protected async Task Deleta()
    {
        await produtoService.Delete(id);
        NavigationManager.NavigateTo("produtos");
    }
    void Cancela()
    {
        NavigationManager.NavigateTo("produtos");
    }
}

Agora é só alegria...

Executando o projeto iremos obter o seguinte resultado:

Pegue o projeto completo aqui: BlazorProdutos.zip

"Porque o reino de Deus não é comida nem bebida, mas justiça, e paz, e alegria no Espírito Santo."
Romanos 14:17


Referências:

José Carlos Macoratti