Usando Librerías de Blazor

Clase 18 de 19 • Curso de Aplicaciones Web con Blazor WebAssembly y .NET

Diego Medardo Saavedra García

student•

A mi me funcionó sin pasar 2 argumentos, sino solo 1 en el archivo Products.razor

        toastService.ShowSuccess("Producto eliminado");

Pablo Cesar Lara Londoño

student•

Si, también me pasó igual.

LEONARDO DANIEL ROSPIGLIOSI ZAVALETA

student•

me pasó lo mismo, solo 1 parametro

Jairo Alonso Contreras Mateus

student•

Muy buena tarde,

Bendiciones,

Ya llevo un tiemopo trabajando con los componentes de syncfusion, por si de algo le puedo ser de ayuda a la comunidad.

Sergio Sanchez

student•

Seria genial saber un poco para que los utilizas profesionalmente. (?) gracielas!

Mauricio Carrasco

student•

No me salía el mensaje, y lo resolví poniendo el tag \<AssemblyName> con el nombre del proyecto en el archivo .csproj:

  <PropertyGroup>
    <AssemblyName>blazorappdemo</AssemblyName>
    <TargetFramework>net7.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

Ivan Fernando Bedoya Jaramillo

student•

Esto me ayudó bastante, no me estaba dejando hacer la configuración en el Program.cs. Gracias

Sergio Sanchez

student•

Para hacer funcionar el Toast:

El {YOUR APP ASSEMBLY NAME} es el nombr edel namespace que se usa.
Se tiene que usar las opciones en el componente que se incluye en el MainLayout (no sirve solo el Tag), ejemplo:

@using Blazored.Toast.Configuration
``````js
<BlazoredToasts Position="ToastPosition.BottomRight"
                Timeout="10"
                IconType="IconType.FontAwesome"
                SuccessClass="success-toast-override"
                SuccessIcon="fa fa-thumbs-up"
                ErrorIcon="fa fa-bug" />
```\<BlazoredToasts Position="ToastPosition.BottomRight"

&#x20;               Timeout="10"

&#x20;               IconType="IconType.FontAwesome"

&#x20;               SuccessClass="success-toast-override"

&#x20;               SuccessIcon="fa fa-thumbs-up"

&#x20;               ErrorIcon="fa fa-bug" />

Javier Sevillano

student•

Hola Miguel, te tengo una pregunta relacionada con perfomance. Supongamos que me gusta o se ajusta a lo que quiero algunos compoenentes de MudBlazor, pero también oros de Radzen y Blazored.

En términos de perfomance, sería mejor incluir solo librerias de un fabricante, que usar componentes de varios fabricantes? Al cargar componentes de varios fabricantes se hace el sitio web más pesado?

Miguel Teheran

teacher•

Si es correcto, no es ideal usar tantas librerías independientes que estas se pueden agregar de manera aislada. todas tienen unos paquetes base que se deben instalar y el mantenimiento también se vuelve una locura.

Boris Vargas Paucara

student•

Excelente curso de introduccion a Blazor. Muy buen profesor.

Christian Camilo Urrego Salas

student•

En DevExpress también se cuenta con una libreria para Blazor. https://demos.devexpress.com/blazor/

Kevin Castellano

student•

En la consola del navegador me aparece esto:

blazored-toast.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)

El mismo desaparece al borrar o comentar en index.html la línea:

<link href="_content/Blazored.Toast/blazored-toast.min.css" rel="stylesheet" />

¿Es necesaria la misma?

Miguel Teheran

teacher•

parece que esa parte tuvo un cambio ahora la referencia debe hacerse asi:

<link href="{YOUR APP ASSEMBLY NAME}.styles.css" rel="stylesheet">

Revisa la documentacion oficila para hacer el paso a paso de la instalacion en tu proyeco: https://github.com/Blazored/Toast

Luca Cristian Manea

student•

lo hiice como comenta el profe

Cesar Bautista Mejia

student•

¿En este curso no explican nada sobre eventos?

Miguel Teheran

teacher•

Te refieres a los eventos de la interfaz grafica? incluye todo el tema de crear un form

Cesar Bautista Mejia

student•

Utilizando Blazor .net 7 o Superior

Por ejemplo ¿Como detecto el evento de cambio de Resolución de Pantalla? ¿Se puede utilizar los eventos de JavaScript?

Como contexto, en la pagina Counter.razor ¿Como llamar elementos o eventos que se crean en los elementos Shared /MainLayout.razor o Shared /NavMenu.razor?

Por cierto ¿Cuando se avientan el curso de .NET Maui con Blazor?

Raúl Alejandro Chávez Valenzuela

student•

Parece que la versión 4.2.1 de toast (la última al día de hoy) no funciona con .NET 9.

[Bug] 4.2.1 Not working in .net 9.0 · Issue #269 · Blazored/Toast

Raúl Alejandro Chávez Valenzuela

student•

Lo probé yo y busqué por qué no funcionaba.

Sí se muestran los toast, pero abajo, feos y sin estilo. Lo que describe el issue tiene sentido.

Cristhian Llanos

student•

Alguien ha conseguido visualizar las imágenes? Yo solo veo las primeras, pero el resto no.

Fabián Antonio Salgado Sepúlveda

student•

Tiene problemas las imágenes, lo corregí de esta forma

public async Task<List<Product>?> Get()
{
    var response = await _httpClient.GetAsync("/api/v1/products");
    var content = await response.Content.ReadAsStringAsync();
    if (!response.IsSuccessStatusCode)
    {
        throw new ApplicationException(content);
    }
    List<Product> productos = JsonSerializer.Deserialize<List<Product>>(content , _jsonSerializerOptions);
    productos?.ForEach(producto =>
    {
        int cantidad = producto.Images.Count();
        string[] imagenes = new string[cantidad];
        int i = 0;
        foreach (var images in producto.Images)
        {
            imagenes[i] = images.ToString().Replace("\"", "").Replace("]", "").Replace("[", "");
            i++;
        }

        producto.Images = imagenes;
    }); 

    return productos;
}

Usando Librerías de Blazor

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