Hoje veremos como realizar um CRUD básico usando o micro ORM Dapper em uma 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
ASP .NET Core - Iniciando com o Blazor - Macoratti
ASP .NET Core - CRUD usando Blazor e Entity ... - Macoratti
Blazor - O novo framework SPA da Microsoft - Macoratti.net
Visual Studio Code - Suporte ao desenvolvimento Blazor
Blazor - Vale a pena usar o Blazor - Macoratti.net
Criando uma aplicação ASP .NET Core Blazor - Macoratti.net
ASP .NET Core - CRUD usando Blazor e Entity ... - Macoratti.net
Blazor - Passando dados para Componentes - Macoratti.net
Blazor - Passando dados entre páginas - Macoratti.net
Blazor - Apresentando a Biblioteca Blazor Radzen - Macoratti ...