Cursos Empresas Blog Live Conf Eventos Precios

0:0013:06

Creando componentes para conexión a la API

Curso de Aplicaciones Web con Blazor WebAssembly y .NET

Clase 12 / 19

Ver clases

Creando componentes para conexión a la API

Curso de Aplicaciones Web con Blazor WebAssembly y .NET

Clase 12 de 19

Clase 12 / 19

Creando componentes para conexión a la API

Curso de Aplicaciones Web con Blazor WebAssembly y .NET

Clase 12 / 19

Ver clases

Comentarios (17)17 comentarios

Jose G. Romero C.

Hace 4 años

Con esta web pueden auto generar las clases a partir de un objecto json.

https://quicktype.io/csharp

Cesar Bautista Mejia

Hace 3 años

La agrego a favoritos

Henry Espinoza

Hace 2 años

Es util si ya tienes experiencia, si recien vas aprendiendo lo mejor es practicar

Oriana Carolina Ailigo

productService.cs

using System.Net.Http.Json;
using System.Text.Json;

namespace blazorappdemo;

public class ProductService{

    private readonly HttpClient client;
     private readonly JsonSerializerOptions option;

    public ProductService(HttpClient httpClient,JsonSerializerOptions optionsJson){
        client=httpClient;
        option=optionsJson;
      }  
    public async Task<List<Product>?> Get(){
        var response=await client.GetAsync("/v1/product");
        return await JsonSerializer.DeserializeAsync<List<Product>>(await response.Content.ReadAsStreamAsync());
        
    }

    public async Task Add(Product product){
        var response=await client.PostAsync("v1/products", JsonContent.Create(product));
        var content= await response.Content.ReadAsStringAsync();
        if (!response.IsSuccessStatusCode)
        {
            throw new ApplicationException(content);
        }
    }

    public async Task Delete(int productId){
        var response=await client.DeleteAsync($"v1/products/{productId}");
        var content= await response.Content.ReadAsStringAsync();
        if (!response.IsSuccessStatusCode)
        {
            throw new ApplicationException(content);
        } 
    }
    
}

Esteban Cerda Román

Gracias!

Miguel Estuardo Samayoa Giron

Graciaas, me ahorraste bastante tiempo jajajaja

Jairo Alonso Contreras Mateus

Si por alguna razon a alguien le genera error el <List<Product>?>, es poor que falta el using que llama la carpeta Models, ejemplo:

using BlazorAppVisualStudio.Models;

Juan Betancur

En el curso de API's con .Net los modelos se construían de esta manera,

public class Category
{
    public  int Id { get; set; }
    public string Name { get; set; }
    public string? Image { get; set; }
    public ICollection<Product> Products { get; set; }
}

¿afecta en algo tener o no tener la colección en el modelo? ¿Cuál es la diferencia de manejarlo así?

Miguel Teheran

Profesor

correcto! gracias por compartir

Category.cs

namespace blazorappdemo;

public class Category{

    public int Id {get;set;}
    public string Name {get;set;}
    public string? image {get;set;}
    
}

Jesus David Mendez Coronell

public class Product{

public int Id {get;set;}
public string title {get;set;}
public decimal? price {get;set;}
public string Description {get;set;}
public int CategoryId {get;set;}
public string[] Images {get;set;}
public string? image {get;set;}

}

Yo utilizo 2 formas por que en ocasiones tienen errores:

Visual Studio (Comunity, Professional, etc), Editar -> Pegado Especial -> Pegar JSON como Clases

Lo único que necesitas es tener en el Json o Xml en el portapapeles (o seleccionar el texto y darle CTRL + C) No utilices librerías externas a partir de .net core ya vienen las librerías

Sergio Sanc

En este video no se uso el "options" que fue injectado, que implicaciones tendria el no incluirlo?

(Hice la prueba y funciona igual si borro la DI de jsonOptions)

Israel Arroyo

Ctr + .

Genera el constructor easy

Jose Antonio Pinto Gimeno

Hace 9 días•editado

La api mencionada en la clase no funciona, hay alguna ruta renovada para poder hacer las pruebas?

Aunque la url para la api con postman si que recibe información. Pero "fakeapi.platzi.com" no funciona.

Juan Daniel Diaz Jaramillo

Hace un año

using System.Net.Http;

using System.Text.Json;

namespace blazorapp;

public class ProductService

{

private readonly HttpClient client;

private readonly JsonSerializerOptions options;

public ProductService(HttpClient httpClient, JsonSerializerOptions optionsJson)

client = httpClient;

options = optionsJson;

public async Task<List<Product>?> Get()

var response = await client.GetAsync("/v1/products");

response.EnsureSuccessStatusCode(); // <- Esto lanza excepción si no fue 200 OK

await using var stream = await response.Content.ReadAsStreamAsync();

return await JsonSerializer.DeserializeAsync<List<Product>>(stream, options);

Javier Sevillano

En un proyecto real, en Visual studio tendríamos el proyecto web con Blazor, un proyecto Web API que dependería de un un proyecto de servicios, el cual a su vez dependería de un proyecto de Infraestructura donde estarían las clases generadas para usar Entity Framework, que a su vez dependería de un proyecto Core donde están las entidades y DTOs. Este proyecto Core podría referenciarse al proyecto Blazor, cierto? porque las entidades son las mismas

Si correcto, si es un proyecto pequeño se puede hacer refrencia directa, si es un proyecto grande (que use microservicios, microfrontend o que sea una suite de varias apps que se comunican) lo ideal es usar artefactos y crear paquetes nugets con nuestro propio servidor nuget

Porque mencionas que no se va a hacer el crud de categoría? en caso de hacerse el modelo tendría otras cosas adicionales?

Es una tarea para ustedes como un ejercicio, la idea es replicar exactamente lo mismo

edward.arroyave

Si estás siguiendo el curso con Visual Studio, puedes usar una funcionalidad llamada "Pegado especial", que lo genera automáticamente.

Jonathan Camilo Bernal Aldana

en está página a partir del json te genera los modelos par csharp

Profe, Por que la linea 20 del file ProductService.cs tine que ser con await? No se supone que solo las peticiones a la API deben ser async?

Creando componentes para conexión a la API

Creando componentes para conexión a la API

Creando componentes para conexión a la API

Progreso del curso

Introducción

Componentes de Blazor

Conectando Blazor a Backend

Usando Librerías de Blazor

Cierre

Creando componentes para conexión a la API

Creando componentes para conexión a la API

Comentarios

Comentarios