Blazor WebAssembly - Usando componentes e exibindo itens

Blazor WebAssembly - Usando componentes e exibindo itens - I

Hoje vamos recordar como criar componentes Blazor para exibir uma lista de itens em uma aplicação Blazor WebAssembly.

Se você esta chegando agora e não sabe o que é o Blazor leia o artigo ASP .NET Core - Iniciando com o Blazor - Macoratti; se você já conhece e quer saber mais pode fazer o curso de Blazor Essencial.

Os componentes são o coração do Blazor, e, um Componente Blazor nada mais é do que uma “parte” de uma interface de usuário. Podendo ser toda uma página, um pequeno fragmento, uma janela de diálogo ou um formulário. Assim, qualquer elemento que no final será renderizado como uma interface de usuário é um componente da sua aplicação Blazor.

Um componente Blazor é criado usando HTML e código C# e quando a aplicação é compilada este componente é convertido em uma classe.

Neste artigo vou mostrar como criar componentes para exibir uma lista de itens em uma aplicação Blazor WebAssembly.

Vamos realizar as seguintes tarefas:

Definir um modelo de domínio Produto com as propriedades que desejamos exibir;
Criar o componente MeusProdutos.razor para iniciar a exibição dos Produtos e suas imagens;
Criar o componente ExibirProdutos.razor para exibir a página dos produtos com um link para exibir os detalhes;
Criar o componente ProdutoDetalhes.razor para exibir os detalhes de um produto;
Criar o componente para exibir o Spinner;
Criar o componente para exibir as mensagens de erro;

Vamos trabalhar com uma lista de objetos na memória para simplificar o exemplo do artigo e assim não vamos usar um banco de dados relacional.

Recursos usados:

Criando o projeto Blazor WebAssembly

Abra o VS 2022 Community e selecione a opção Create a New Project;

A seguir selecione a opção Blazor Server App e clique em next;

Informe o nome do projeto : BlazorProdutos;

A seguir define as configurações conforme a figura abaixo e clique em Create;

Com o projeto criado vamos fazer as seguintes alterações, ajustes e configurações :

Exclua os arquivos abaixo e suas referências:

Counter.razor
FecthData.razor
SurveyPrompt.razor

Vamos criar a pasta Models no projeto e nesta pasta criar a classe Produto:

public class Produto
{
    public int Id { get; set; }
    public string Nome { get; set; } = string.Empty;
    public string Descricao { get; set; } = string.Empty;
    public string ImagemUrl { get; set; } = string.Empty;
    public decimal Preco { get; set; }
    public int Estoque { get; set; }
}

Esta classe representa o nosso domínio e contém as propriedades que desejamos exibir.

A seguir vamos criar a pasta Services no projeto onde vamos implementar o serviço para retornar a lista de produtos e também um produto pelo seu id. Para isso vamos criar uma interface IProdutoService e sua implementação na classe ProdutoService:

1- IProdutoService

public interface IProdutoService
{
IEnumerable<Produto> GetProdutos();
Produto GetProdutoPorId(int id);
}

2- ProdutoService

public IEnumerable<Produto> GetProdutos()
{
var produtos = new List<Produto>
{
     new Produto { Id= 1,Nome="Tênis Puma confortáveis ", ImagemUrl="/Imagens/Calcados/calcado1.png",
Descricao="Tênis Puma", Preco = 239.45m, Estoque= 50 },
     new Produto { Id= 2,Nome="Tênis coloridos", ImagemUrl="/Imagens/Calcados/calcado2.png",
Descricao="Tênis Coloridos", Preco =199.99m , Estoque=60 },
     new Produto { Id= 3,Nome="Tênis Nike azul", ImagemUrl="/Imagens/Calcados/calcado3.png",
Descricao="Tênis Nike Azul", Preco = 210.50m, Estoque=70 },
     new Produto { Id= 4,Nome="Treinadores Hummel coloridos", ImagemUrl="/Imagens/Calcados/calcado4.png",
Descricao="Tênis Hummel Coloridos", Preco = 170.80m, Estoque=42 },
     new Produto { Id= 5,Nome="Tênis Nike vermelho", ImagemUrl="/Imagens/Calcados/calcado5.png",
Descricao="Tênis Nike Vermelho", Preco = 250.99m, Estoque=45 },
     new Produto { Id= 6,Nome="Sandálias Birkenstock ", ImagemUrl="/Imagens/Calcados/calcado6.png",
Descricao="Sandálidas Birkenstock", Preco = 80.99m, Estoque=35 }
     };
     return produtos;
}

public Produto GetProdutoPorId(int id)
{
var produto = GetProdutos().FirstOrDefault(c=> c.Id == id);
return produto;
}
}

Usando os métodos GetProdutos() e GetProdutoPorId() poderemos obter a lista de produtos e um produto pelo id.

Vamos agora incluir no arquivo _Imports.razor os namespaces que iremos usar neste projeto:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using BlazorProdutos
@using BlazorProdutos.Shared
@using BlazorProdutos.Models
@using BlazorProdutos.Services

A seguir temos que registrar o serviço no container DI nativo usando o código abaixo na classe Program:

using BlazorProdutos;
using BlazorProdutos.Services;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddScoped<IProdutoService, ProdutoService>();

await builder.Build().RunAsync();

Vamos ajustar o código do componente NavMenu.razor definindo apenas duas opções no menu : Home e Produtos.

...
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="produtos">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Produtos
            </NavLink>
        </div>
    </nav>
</div>

...

Ainda na pasta Shared vamos criar os componentes para exibir o Spinner e as mensagens de erro que podem ocorrer em nossa aplicação. Nesta pasta iremos criar os componentes ExibirSpinner.razor e ExibirErro.razor:

1- ExibirSpinner.razor

2- ExibirErro.razor

<h3 class="text-danger"><b>@MensagemErro</b></h3>

@code {

[Parameter]
public string? MensagemErro { get; set; }

}

Agora vamos criar na pasta wwwroot uma pasta imagens e nesta pasta vamos incluir as imagens dos produtos que iremos exibir dentro de uma pasta Calcados, e, na pasta Imagens vamos incluir as imagens do spinner e o logo do Shopping:

A seguir vamos alterar o código do componente Index.razor da pasta Pages para exibir a página inicial com o logo do Shopping:

@page "/"

<PageTitle>Blazor Shopping</PageTitle>

<h2>Blazor Shop</h2>

Executando o projeto teremos o resultado abaixo:

Na próxima parte do artigo iremos criar os componentes para exibir a lista de objetos produtos na pasta Pages.

'Tendo sido, pois, justificados pela fé, temos paz com Deus, por nosso Senhor Jesus Cristo;'
Romanos 5:1

Referências:

José Carlos Macoratti