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

Finalizando el formulario

25/38
Recursos

¿Cómo implementar un formulario de creación de productos?

La implementación de formularios en aplicaciones web puede parecer un desafío, pero con la guía adecuada, se convierte en un proceso claro y manejable. A continuación, exploraremos cómo crear un formulario para productos, asegurándonos de que se pueda integrar fácilmente en cualquier página.

¿Cómo llamar a un componente de formulario en una página?

Para comenzar, es esencial saber cómo integrar un componente de formulario ya preparado en una página específica. Aquí, vamos a utilizar la página Index como ejemplo. El procedimiento es bastante sencillo:

  1. Eliminación del contenido inicial: Borra el mensaje "Hola mundo" y mantén únicamente la estructura básica de la página.
  2. Llamar al componente: Simplemente abre la etiqueta del componente y ciérrala, asegurándose de que esté correctamente nombrada.
  3. Verificación de cambios: Una vez que el componente esté integrado, salva tu trabajo y procesa para ver si hay actualizaciones necesarias.
<!-- Ejemplo de llamado de componente en HTML -->
<Página>
  <ComponenteLlamado />
</Página>

¿Cómo solucionar errores de diseño en formularios?

En ocasiones, al integrarlo, pueden surgir problemas de diseño. Un error común es el reconocimiento incorrecto de controles de formulario, especialmente si se trata de un grupo en lugar de un control individual. La solución implica:

  • Convertir el control erróneamente etiquetado como un grupo dentro del formulario.
  • Guardar y refrescar el ambiente para verificar los cambios.

¿Cómo agregar categorías a un formulario de productos?

Agregar categorías organizadas es clave para que el usuario pueda seleccionar adecuadamente al crear un producto. Sigue estos pasos para implementar un menú desplegable:

  1. Creación de una clase de diseño: Implementa una clase CSS específica para mantener la consistencia del diseño.
  2. Uso de un menú desplegable: Utiliza un <select> con opciones para las categorías.
  3. Asociación asincrónica: A través de programación asincrónica, carga las categorías desde la base de datos o una lista predefinida.
<!-- Ejemplo de menú desplegable en HTML -->
<select class="form-control">
  <!-- Opciones cargadas dinámicamente -->
  <option value="{{category.id}}">{{category.name}}</option>
</select>

¿Qué técnicas usar para cargar dinámicamente categorías?

Para optimizar el rendimiento de carga y asegurar las actualizaciones en tiempo real, requieres implementar técnicas asincrónicas mediante programación. Esto se logra definiendo una tarea asincrónica que se ejecuta al cargar el componente:

  1. Inicialización asincrónica: Define la tarea que llamará a las categorías existentes.
  2. Ciclo de vida de la aplicación: Asegúrate de que las categorías se cargan al inicio del ciclo de vida del componente.

¿Cómo mejorar la estética del formulario?

Un aspecto crucial de cualquier desarrollo web es la experiencia del usuario. Para mejorar la apariencia del formulario:

  1. Adopta patrones de diseño estético: Incorpora clases CSS para una visualización más agradable.
  2. Control de diseño adaptable: Ajusta los formularios para responder a diferentes dispositivos, asegurando que el diseño sea responsivo y consistente.

Con estos pasos y consideraciones, lograrás no solo implementar un formulario funcional y estético, sino también una integración eficaz dentro de las páginas de tu aplicación, fomentando una experiencia de usuario fluida y profesional. ¡Sigue adelante y sigue perfeccionando tus habilidades de desarrollo!

Aportes 9

Preguntas 8

Ordenar por:

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

utilizando injection ;

@inject B_Category bCategory

 protected override async Task OnInitializedAsync()
    {
        categories = bCategory.CategoryList();
    }

inspeccionando en la consola resulta que hay un error critico
con WebAssembly y SqlServer
busque pero no encontre ninguna solucion que funcionara al dia de hoy si alguien sabe como arreglarlo lo agradeceria mucho, dejo el codigo de error
Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Strings.PlatformNotSupported_DataSqlClient
System.PlatformNotSupportedException: Strings.PlatformNotSupported_DataSqlClient
at Microsoft.Data.SqlClient.SqlConnectionStringBuilder…ctor(String connectionString)
at Microsoft.EntityFrameworkCore.SqlServer.Storage.Internal.SqlServerConnection.<>c.<get_IsMultipleActiveResultSetsEnabled>b__7_0(String cs)

Que lindo que fue este episodio. Ver como todo va saliendo como uno espera y entendiendo todo lo que va pasando es espectacular. Felicitaciones a Platzi y al profesor por este tremendo curso que nos brindan!!!

Si tienen problemas con el CategoryId que tiene el valor null y no les guarda el producto en la base, en el método OnInitializedAsync tienen que agregarle al oProduct.CategoryId el primer elemento de la lista de categorias (es el que se le muestra al cliente), es decir.

ProductEntity oProduct = new ProductEntity();
List<CategoryEntity> categories = new List<CategoryEntity>();

protected override async Task OnInitializedAsync()
{
	categories = B_Category.CategoryList();
	if (categories.Any())
 	{
		Product.CategoryId = categories.First().Id;
	}
}

Si al ejecutar la aplicación Blazor no les parece la lista de categorías en el desplegable, una de las primeras comprobaciones que haría es verificar que efectivamente se esta leyendo de la BBDD con la depuración de VS 😉

Para los que tiene problemas porque el CategoryId les aparece null en la tabla es porque deben seleccionar alguna opción en el InputSelect. Si agregan la que trae por defecto no toma el campo.

Muy interesante

Agregué un inputNumber para la cantidad de producto

 <div class="form-group">
            <label>Cantidad</label>
            <InputNumber @bind-Value="oProduct.TotalQuantity" class="form-control" />
        </div>

excelente el paso a paso del profesor!!