Conocer las bases de .NET core

1

¿Qué necesitas para aprender a desarrollar aplicaciones profesionales en .NET con Blazor?

2

Todo lo que aprenderás sobre Blazor

3

Evolución de .Net

4

¿Cómo funciona el Desarrollo Web sin Blazor?

5

Instalando Visual Studio Community

6

Instalando SQL Server Express

Entender la estructura de Blazor

7

Webassemblies y .Net Core 3

8

Anatomía de una aplicación Blazor

9

Blazor pages

10

Blazor components

11

Introducción a formularios

12

Inyección de dependencias

Aplicar Entity Framework

13

Arquitectura vs. Patrones de Diseño

14

Estructurando nuestro proyecto

15

¿En qué consiste Entity Framework y por qué vamos a trabajarlo?

16

Creación de entidades

17

Data annotations

18

Trabajando el relacionamiento entre entidades

19

Creando el datacontext

20

Migraciones

21

Alimentando la base de datos

Integrar datos en ambientes Blazor

22

Construyendo la capa intermedia o capa de negocio

23

El CRUD de integración de datos

24

Creación de formularios con Blazor

25

Finalizando el formulario

26

Trabajando listas de datos

27

Agregando filtros a nuestra lista

28

Guardando nuevos registros

29

Creación formulario de actualización de datos

30

Aplicando actualización de datos

31

Registrando productos en almacenamiento

32

Creando página de almacenamiento

33

Cargando productos por Bodega para entradas y salidas

34

Relacionando productos y formulario de entradas y salidas

35

Finalizando el formulario de entradas y salidas

Aplicar Diseño con Bootstrap

36

Revisión de estilos: Introducción a Bootstrap

37

Publicando el sitio

38

Cierre del curso

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Blazor components

10/38
Recursos

¿Cómo crear y organizar componentes en Glaceau?

Crear componentes es una de las bases fundamentales en Glaceau, ya que permiten reutilizar código y estructurar mejor nuestras aplicaciones. En esta guía te mostraremos cómo iniciar la organización de componentes y cómo construirlos correctamente en tu proyecto.

¿Cómo organizar tus carpetas de trabajo?

La organización es clave al trabajar con componentes. Debemos comenzar por crear una carpeta específica para almacenarlos.

  1. Crear la carpeta de componentes:

    • Dentro de tu repositorio, crea un directorio llamado components. Esta carpeta contendrá todos los trabajos actuales y futuros relacionados con componentes.
  2. Crear subcarpetas para ejercicios:

    • Dentro de components, crea una subcarpeta denominada Ejercicios.
  3. Clasificar por clase:

    • Adicionalmente, crea estructuras dentro de Ejercicios que correspondan a diferentes clases o temas en los que estés trabajando.

¿Cómo construir un componente en Glaceau?

  1. Crear un nuevo componente:
    • Selecciona la opción "Agregar nuevo ítem" y elige crear un componente.
    • El componente base tendrá una estructura similar a una página web, pero inicialmente mostrará solo un <h3>.
  2. Organizar el contenido:
    • Copia elementos necesarios del componente y pégalos en su lugar correspondiente para estructurarlo adecuadamente.
<h3>Formulario componente</h3> 
<!-- Inicia creando un componente básico para un formulario -->
  1. Llamar al componente desde tu aplicación:
    • Muchas veces necesitarás integrar tu componente en diferentes partes de tu aplicación.
    • Asegúrate de importar el componente correctamente usando la estructura de visualización de rutas de tu aplicación.

¿Cómo gestionar parámetros en tus componentes?

Los parámetros son poderosos en la personalización de componentes, ya que permiten modificar dinámicamente lo que se muestra.

  1. Definir un parámetro:
    • Los parámetros en Glaceau se definen como públicos para permitir la modificación externa.
public string Mensaje { get; set; }
  1. Inicializar componentes con parámetros:
    • Usa métodos de ciclos de vida del componente como OnInitializedAsync para establecer valores iniciales.
protected override async Task OnInitializedAsync()
{
    Mensaje = Mensaje ?? "Mensaje por defecto";
}

¿Cómo personalizar la carga inicial y el ciclo de vida de un componente?

El comportamiento de inicio de un componente debe personalizarse para mejorar la experiencia de usuario al cargar los datos necesarios al inicio.

  1. Utilizar métodos del ciclo de vida:

    • Métodos como OnInitializedAsync permiten configurar acciones iniciales de los componentes.
  2. Desplegar información diferenciada:

    • Al llamar repetidamente un componente con diferentes parámetros, podrás obtener diferentes resultados sin cambiar el código interno del componente.
<!-- Ejemplo de uso de un componente con diversas inicializaciones -->
<Form001 Mensaje="¡Hola Mundo!" />
<Form001 Mensaje="¡Bonjour le monde!" />

¿Por qué es ventajoso trabajar con componentes reutilizables?

Las mayores ventajas de trabajar con componentes en Glaceau son:

  • Reutilización de código: Permite mantener un código más limpio y eficiente al evitar la repetición.
  • Modularidad: Facilita el mantenimiento y la actualización de partes específicas de tu aplicación.
  • Consistencia: Asegura una presentación uniforme de los elementos en diversas partes de la aplicación.

En resumen, la correcta creación y gestión de componentes no solo te brinda un código más organizado, sino también aplicaciones más robustas y escalables. Si sigues estos pasos, estarás en camino de ser un experto en el desarrollo modular y eficaz con Glaceau. ¡Adelante con tus proyectos y sigue aprendiendo!

Aportes 18

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

esos componentes son como los de angular jajaja

Una actualizada del curso no estaría mal!

La palabra clave async lo que indica es que este método se quiere sincronizar con métodos que se ejecutarán de forma asíncrona.
Si quieren entender un poco mejor les dejo el siguiente video donde lo explican con JS.
https://www.youtube.com/watch?v=bWvnWhVCHAc

Se me hizo similar a Angular

Si usan .NET 8 y tienen problemas haciendo que se dispare el evento del button, necesitan agregar el siguiente using al principio del Form component: @rendermode InteractiveServer
ACTUALIZEN EL CURSO

No se cual fue el error que tuve, estaba en Visual Studio 2022 y al agregar el directorio en el _Imports no me reconocía la carpeta Components, probé de muchas formas, reiniciando el IDE, reparándolo moviendo la carpeta, finalmente pude resolverlo borrando la carpeta y creando una nueva con el mismo nombre. Imagino que abra sido un error del IDE, ya que cuando lo hice por primera ves en el 2019 no tuve ningún problema

Tuve muchos problemas al momento de añadir mi espacio de trabajo en _Imports, no se porque me marcaba error, me aparecía que no lo encontraba, pensé que era un error del IDE ya que estoy con Visual Studio 2022, y no había tenido problemas con el 2019, finalmente como lo resolví fue eliminando la carpeta y creando una nueva con el mismo nombre

Esta es otra forma en la que pueden agregar un componente por si tiene problemas con la primera.

<Inventory.Components.Ejercicios.BlazorPages.Form001 GeneralMessage ="Vista Index" />
Actualicen el curso

En Visual Studio 2022, la ruta sería así:

@using Inventory.wwwroot.Components.Exercises.BlazorPages

Pareciera que se inspiraron en angular y en react jaja.

metodos asincronos no usan un void o no esperarían no recibir nada, en vez de eso se define como tarea o "Task"

[Parameter] parametro

Blazor no se puede trabajar con el lenguaje Visual Basic?

Para que funcione bind usar esto: @rendermode InteractiveServer @attribute \[StreamRendering] ![](https://static.platzi.com/media/user_upload/image-5f43d464-e322-4a63-bf99-0d1b72cee08c.jpg)
ahora el proyecto ya se refresca solo cuando usamos dotnet watch run

Blazor es increíble.