Blazor WebAssembly - Usando componentes e exibindo itens - II

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

Continuando o artigo anterior vamos agora criar os componentes Blazor na pasta Pages do projeto para exibir os produtos.

Exibindo os produtos

Para iniciar a exibição dos produtos vamos criar o componente MeusProdutos.razor com o código abaixo:

@page "/produtos"
@inject IProdutoService ProdutoService

@if(Produtos == null)
{
     <ExibirSpinner/>
}
else
{
    <h3 class="mb-5">Produtos</h3>
    var produtosCount = Produtos.Count();

    @if (produtosCount > 0)
    {
        <div class="row mt-3">
           <ExibirProdutos Produtos="@Produtos"></ExibirProdutos>
        </div>
        <hr class="mb-3"/>
    }
}
@code{
    public IEnumerable<Produto>? Produtos { get; set; }

    protected override void OnInitialized()
    {
        Produtos =  ProdutoService.GetProdutos();
    }
}

Neste código remos o seguinte :

- Estamos injetando uma instância do serviço criado que iremos usar no componente;
- A seguir usamos o componente ExibirSpinner.razor
- No código, para obter a lista de produtos, usamos o método OnInitialized();
- Após verificar se existem produtos usamos o componente ExibirProdutos.razor para exibir a lista de produtos;

A seguir vamos criar na pasta Pages o componente ExibirProdutos.razor :

@foreach (var item in Produtos)
{
    <div class="col-md-3 mb-2">
        <a href="/ProdutoDetalhes/@item.Id">
            <div class="card">
                <img class="img-thumbnail" src="@item.ImagemUrl">
                <div class="card-body">
                    <h5 class="card-title mb-3">
                        @item.Nome
                    </h5>
                    <p class="cart-text">
                        <b>@item.Preco.ToString("C")</b>
                    </p>
                </div>
            </div>
        </a>
    </div>
}

@code {
    [Parameter]
    public IEnumerable<Produto>? Produtos { get; set; }
}

Neste código usamos os recursos do Bootstrap e usamos um Card para exibir a lista de produtos. Note que temos um link que aciona a rota /ProdutoDetalhes/@item.Id passando o Id do produto selecionado.

Vamos criar o arquivo ProdutoDetalhes.razor.css e definir o código CSS para aplicar um efeito na imagem quando ele for selecionada:

a {
   text-decoration: none;
}

a:hover .card {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   transition: box-shadow 0.3s ease-in-out;
}

.card {
   transition: box-shadow 0.3s ease-in-out;
   overflow: hidden;
}

a:hover img {
   transform: scale(1.07);
   transition: 0.5s ease-in-out;
}

img {
   transition: 0.5s ease-in-out;
}

Para concluir vamos criar o componente ProdutoDetalhes.razor na pasta Pages que exibe os detalhes de um produto selecionado:

@page "/ProdutoDetalhes/{Id:int}"

@if (Produto == null && MensagemErro == null)
{
    <ExibirSpinner/>
}
else if (MensagemErro != null)
{
    <ExibirErro MensagemErro="@MensagemErro"></ExibirErro>
}
else
{
    <h3 class="mb-5">Detalhes do Produto</h3>
    <div class="row">
        <div class="col-md-6 mb-4">
            <img class="img-fluid" src="@Produto.ImagemUrl">      
        </div>
        <div class="col-md-6">
            <h3>@Produto.Nome</h3>
            <p class="mb-4">@Produto.Descricao</p>
            <p class="mb-4">
                <b>
                    @Produto.Preco.ToString("C")&nbsp;(@Produto.Estoque items em estoque)
                </b>
            </p>
            <div>
                <button class="btn btn-success">Incluir no Carrinho</button>
            </div>
        </div>
    </div>
}

@code {
    [Inject]
    public IProdutoService? ProdutoService { get; set; }
    [Parameter]
    public int Id { get; set; }

    public Produto? Produto { get; set; }
    public string? MensagemErro { get; set; }

    protected override void OnInitialized()
    {
        try
        {
            Produto = ProdutoService.GetProdutoPorId(Id);
        }
        catch (Exception ex)
        {
            MensagemErro = ex.Message;
        }
     }
}

Neste componente usamos a instância do serviço injetada para invocar o método GetProdutoPorId() no método OnInitialize() do componente e exibimos o produto. O botão incluir no carrinho é usado apenas para ilustrar e onde você pode implementar um carrinho de compras para tratar a seleção do produto.

Note que injetamos o serviço como um propriedade usando o atributo [Inject]. Essa é uma alternativa para usar a diretiva @inject.

Agora é só alegria, executando o projeto teremos o seguinte resultado:

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

"Sabemos que permanecemos nele, e ele em nós, porque ele nos deu do seu Espírito.
E vimos e testemunhamos que o Pai enviou seu Filho para ser o Salvador do mundo."
1 João 4:13,14


Referências:

José Carlos Macoratti