Mostrando lista de productos

A mi al final no me funciono, tal cual se muestra, realice unas modificaciones, hasta lograr que operará, no se si les es de utilidad, pero, comparto el codigo final que en mi caso funciono:

Code:

@page “/product”
@inject ILogger<Products> logger;
@inject IProductService producService;

<PageTitle>Products</PageTitle>

<ModuleTitle Title=“Products”/>

@if (Visible == true)
{
@if (products?.Count > 0)
{
<div class= “products-container”>
@foreach (var product in products)
{
<div class=“card”>
<img class=“card-img-top” src="@product.Images[0]" alt=“Product” loading=“lazy” width = “270” height=“210”>
<div class=“card-body”>
<h4><b>@product.Title</b></h4>
<p>@product.Price?.ToString(“C”)</p>

                </div>
            </div>
        }
    </div>
}
else
{
    <p>No hay productos para mostrar</p>
}

}

@code {
private List<Product>? products;
private bool Visible { get; set; }

private async Task<List<Product>> GetProducts()
{
    return await producService.Get();
}

protected override async void OnInitialized()
{
    Visible = false;
    products = await GetProducts();
    Visible = true;
    StateHasChanged();
}



 //@* <button title="Eliminar" class="btn btn-danger btn-delte" @onclick=@(() => Delete(product))"><span class="oi oi-trash></span></button>*@

}

Si les falla esta linea private List<Product> products;, es por que les hace falta un using que es ejemplo el suguiente:

@using BlazorAppVisualStudio.Models;

Si crear las siguientes 2 lineas en el archivo _Imports.razor, no volveran a preocuparce por esos using al momento de crear sus pages:

@using BlazorAppVisualStudio.Services;
@using BlazorAppVisualStudio.Models;

get de productService.css

public async Task<List<Product>?> Get(){
        var response=await client.GetAsync("/v1/products");
        var content= await response.Content.ReadAsStringAsync();
        if (!response.IsSuccessStatusCode)
        {
            throw new ApplicationException(content);
        }
        return JsonSerializer.Deserialize<List<Product>>(content,option);
    }

A mi me sale que no hay productos que mostrar, y en la consola me aparece el siguiente error:

blazor.webassembly.js:1

   crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
  Unhandled exception rendering component: not found!

System.ApplicationException: not found!
at BlazorApp.ProductService.Get() in C:\Users\dtc4\Documents\Platzi\Blazor\BlazorApp\BlazorApp\Services\ProductService.cs:line 24
at BlazorApp.Pages.Products.GetProducts() in C:\Users\dtc4\Documents\Platzi\Blazor\BlazorApp\BlazorApp\Pages\Products.razor:line 40
at BlazorApp.Pages.Products.OnInitializedAsync() in C:\Users\dtc4\Documents\Platzi\Blazor\BlazorApp\BlazorApp\Pages\Products.razor:line 35
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Hice de esta forma para generar el efecto de loading usando el spinner de boostrap:

@if (products?.Count > 0)
{
    <div class="products-container">
        @foreach (var product in products)
        {
              <div class="card">
                <img class="card-img-top" src="@product.Images[0]" alt="Product" loading="lazy" width = "270" height="210">
                <div class="card-body">
                    <h4><b>@product.Title</b></h4>
                    <p>@product.Price?.ToString("C")</p>
                </div> 
            </div>
        }
    </div>
}else 
{
    <div class="d-flex justify-content-center">
        <div class="spinner-border" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
}

var options = new JsonSerializerOptions() { PropertyNameCaseInsensitive = true };
builder.Services.AddScoped<JsonSerializerOptions>(serviceProvider => options);

He realizado la inyeccion de dependencia desde la clase program.cs para llevar la configuracion global de la clase JsonSerializerOptions y solo inyectarlo

Yo tuve un pequeño error que me hizo pasar algunos minutos tratando de corregir, equivoqué el metodo OnInitializedAsync por OnInitialized. Debemos usar el async para que espere la respuesta del api. Sino aparecera como null exception

Creo que la dificultad mas grande se presenta al intentar usar una versión superior de .NET. Tratando de usar la 7 no hallé como solucionar el error, simplemente no funciona, pienso que una de las causas se debe a que usan versiones diferentes de C#. Al final continuare con la versión que comparte el profe en github, luego de un largo día de tratar dar solución al problema.

interface de productService.cs

public interface IProductService
   {
        Task<List<Product>?> Get();
        Task Add(Product product);
        Task Delete(int productId);
    }

Si les llega a fallar o a marcar IProductService…
es por que falta el using que hace referencia a la carpeta Services, ejemplo:

using BlazorAppVisualStudio.Services;