Blazor - Acessando uma WEB API com HttpClient - II

Hoje veremos como acessar dados de uma Web API de forma simples e direta no Blazor.

Continuando a primeira parte do artigo vamos agora criar um serviço para acessar a nossa API.

Criando um serviço para acessar a Web API

Abra o projeto criado no artigo anterior e crie uma pasta Services no projeto.

A seguir vamos criar a interface IProdutoService onde vamos definir apenas o método para retornar a lista de produtos.

using System.Collections.Generic;
using System.Threading.Tasks;
namespace Blazor_ApiDados.Services
{
    public interface IProdutoService
    {
        Task<List<Produto>> GetProdutos();
    }
}

Crie a classe ProdutoService que vai implementar estar interface:

using Blazor_ApiDados.Data;
using Microsoft.AspNetCore.Components;
using System.Collections.Generic;
using System.Net.Http;
using System.Threading.Tasks;
namespace Blazor_ApiDados.Services
{
    public class ProdutoService : IProdutoService
    {
        HttpClient http;
        public ProdutoService(HttpClient _http)
        {
            this.http = _http;
        }
        public async Task<List<Produto>> GetProdutos()
        {
            var url = "https://www.macoratti.net.br/catalogo/api/produtos/v2/todos";
            var produtos = await http.GetJsonAsync<List<Produto>>(url);
            return produtos;
        }
    }
}

Podemos agora registrar o serviço criado no método ConfigureServices da classe Startup:

       public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddSingleton<HttpClient>();
            services.AddSingleton<IProdutoService, ProdutoService>();
        }

Agora vamos criar mais um item no arquivo NavMenu.razor para exibir a opção Produtos:

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

        <li class="nav-item px-3">
            <NavLink class="nav-link" href="produtos">
                <span class="oi oi-plus" aria-hidden="true"></span>Produtos
            </NavLink>
        </li>

    </ul>
</div>

...

Na pasta Pages vamos criar o componente Blazor Produtos.razor e com o código abaixo:

@page "/produtos"
@inject IProdutoService produtoService
<h3>Produtos</h3>
@if (produtos == null)
{
    <p>Carregando produtos...</p>
}
else
{
<div class="row">
    @foreach (var produto in produtos)
    {
                <div class="card m-5 border-0">
                    <div class="card-img-top">
                        <img src="@produto.ImagemUrl" width="80" height="80" class="img-fluid">
                    </div>
                    <div class="card-block">
                        <h2 class="card-title">@produto.Nome</h2>
                        <p class="card-text"><h4>@produto.Descricao</h4></p>
                        <p class="card-text"><h4>@produto.Preco</h4></p>
                    </div>
                </div>
    }
</div>
}
@code {
   List<Produto> produtos { get; set; }
   protected override async Task OnInitializedAsync()
   {
        produtos = await produtoService.GetProdutos();
   }
}

Neste código estamos usando o evento OnInitializedAsync() para invocar o método GeJsonAsync() do serviço ProdutoService que vai retornar uma lista de objetos serializados a partir do endpoint da nossa API.

Para variar estou definindo um layout de exibição dos produtos usando o Card do Bootstrap.

Agora é só alegria...

Executando o projeto teremos o resultado abaixo:

Melhoramos um pouco o acesso à nossa API e agora estamos usando um serviço básico e não fazendo o acesso direto.

Aguarde mais artigos sobre o Blazor.

Pegue o projeto aqui:   ApiDados_2.zip (sem as referências)

"Foge também das paixões da mocidade; e segue a justiça, a fé, o amor, e a paz com os que, com um coração puro, invocam o Senhor."
2 Timóteo 2:22
 


Referências:

José Carlos Macoratti