Creando componentes para conexión a la API

Curso de Aplicaciones Web con Blazor WebAssembly y .NET

Contenido del curso

Introducción

Componentes de Blazor

Conectando Blazor a Backend

Usando Librerías de Blazor

Cierre

19
Conclusión y cierre
01:52 min

Tomar examen

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 de 19

Clase 12 / 19

Comentarios (16)16 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);
        } 
    }
    
}

category.cs

using System.Text.Json;

namespace blazorappdemo;

public class CategoryService{

    private readonly HttpClient client;
     private readonly JsonSerializerOptions option;

    public CategoryService(HttpClient httpClient){
        client=httpClient;
        option=new JsonSerializerOptions{PropertyNameCaseInsensitive =true};
      }  
    public async Task<List<Category>?> Get(){
        var response=await client.GetAsync("/v1/Categories");
        var content= await response.Content.ReadAsStringAsync();
        if (!response.IsSuccessStatusCode)
        {
            throw new ApplicationException(content);
        }
        return JsonSerializer.Deserialize<List<Category>>(content,option);
        
    }
    
}

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

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?

Introducción

Presentación

Prerrequisitos

¿Qué es WebAssembly y Blazor?

Creando un proyecto de Blazor en Visual Studio

Creando un proyecto de Blazor con el CLI

Analizando extensiones de Visual code para blazor

Componentes de Blazor

Estructura de componentes y arquitectura en Blazor

Ciclo de vida en componentes y parámetros

Creando componentes compartidos

Creando archivo de configuración

Conectando Blazor a Backend

Configurando conexión al backend para el proyecto

Creando componentes para conexión a la API

Mostrando lista de productos

Creando Menú y CSS para la lista de productos

Creando formulario para agregar registros

Integrando formulario con servicios

Usando Librerías de Blazor

Creando funcionalidad de eliminar usando JavaScript

Usando Librerías de Blazor

Cierre

Conclusión y cierre

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