No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Mostrando lista de productos

13/19
Recursos

Aportes 10

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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=鈥淧roducts鈥/>

@if (Visible == true)
{
@if (products?.Count > 0)
{
<div class= 鈥減roducts-container鈥>
@foreach (var product in products)
{
<div class=鈥渃ard鈥>
<img class=鈥渃ard-img-top鈥 src="@product.Images[0]" alt=鈥淧roduct鈥 loading=鈥渓azy鈥 width = 鈥270鈥 height=鈥210鈥>
<div class=鈥渃ard-body鈥>
<h4><b>@product.Title</b></h4>
<p>@product.Price?.ToString(鈥淐鈥)</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;

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);
    }

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);
    }

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;