Construir formularios funcionales es una de las tareas más frecuentes en cualquier aplicación web. En Blazor, este proceso se simplifica gracias a componentes nativos como EditForm, que permiten vincular directamente un modelo de datos con los campos del formulario mediante binding. A continuación se detalla paso a paso cómo crear un formulario para registrar productos, conectarlo con la capa de entidades y preparar el botón de guardado.
¿Cómo preparar el proyecto antes de crear el formulario?
Antes de escribir una sola línea de diseño, es necesario verificar que el proyecto de inicio esté configurado correctamente. Si en clases anteriores se dejó el proyecto Data Access como proyecto principal, al ejecutar con Ctrl + F5 aparecerá un error [0:22]. La solución es hacer clic derecho sobre el proyecto de Blazor (en este caso llamado Inventario) y seleccionar "Establecer como proyecto de inicio" [0:44]. Con esto, la aplicación arranca sin problemas mostrando la estructura base de Blazor.
Una buena práctica de organización es crear una carpeta específica para productos dentro del proyecto [1:18]. Mientras más ordenada esté la estructura de carpetas, más sencillo será localizar y modificar archivos en el futuro.
¿Qué diferencia hay entre un componente y una página?
Al agregar un nuevo elemento se selecciona Razor Component [1:30]. Se recomienda incluir la palabra Component en el nombre del archivo (por ejemplo, CreateProductComponent) para distinguir fácilmente los componentes de las páginas [1:38]. Un componente es reutilizable en cualquier parte de la aplicación, pero no es visible al usuario hasta que se asocia a una página [7:30].
Para que Blazor reconozca el componente sin necesidad de escribir la ruta completa, se registra en el archivo _Imports.razor con la directiva @using seguida de la ruta de la carpeta [1:58]:
csharp
@using Inventory.Components.Products
¿Cómo funciona EditForm y el binding con el modelo?
El corazón del formulario en Blazor es la etiqueta EditForm [3:20]. A diferencia del <form> tradicional de HTML, EditForm trabaja sobre un modelo que representa el objeto de datos. En este caso, se crea una instancia de ProductEntity dentro del bloque @code [2:42]:
csharp
@code {
ProductEntity oProduct = new ProductEntity();
}
Para acceder a la clase ProductEntity se agrega un @using apuntando a la capa de entidades [2:30]. Una vez disponible el objeto, se asigna como modelo del formulario:
html
<EditForm Model="oProduct">
<!-- campos del formulario -->
</EditForm>
Gracias a este vínculo, cada campo del formulario queda enlazado bidireccionalmente con las propiedades del objeto, lo que significa que cualquier dato ingresado por el usuario se refleja automáticamente en oProduct.
¿Cómo se crean los campos del formulario con Bootstrap?
Dentro del EditForm se utilizan controles propios de Blazor que corresponden a los controles HTML habituales. Para un cuadro de texto se emplea InputText con la propiedad @bind-Value [4:08]:
html
<div class="form-control">
<label>Referencia:</label>
<InputText @bind-Value="oProduct.ProductId" class="form-control" />
</div>
Este mismo patrón se repite para cada propiedad de ProductEntity [5:02]:
- ProductId: referencia del producto.
- ProductName: nombre del producto.
- Description: se utiliza
InputTextArea en lugar de InputText para permitir textos más extensos [5:30].
La cantidad no se incluye en el formulario porque todo producto nuevo inicia con cantidad cero; los movimientos de inventario se gestionan a través de entradas y salidas [4:50].
Bootstrap aporta el diseño predefinido mediante la clase form-control, lo que ahorra tiempo considerable en estilos [3:50].
¿Cómo conectar el botón de guardar con la capa de negocio?
Se agrega un botón HTML estándar con un evento @onclick que apunta al método SaveProduct [5:56]:
html
<input type="button" value="Guardar producto" @onclick="SaveProduct" />
El símbolo @ antes de onclick indica que la ejecución ocurre del lado del servidor [6:10]. El método se define como privado dentro del bloque @code:
csharp
private void SaveProduct()
{
BProduct.CreateProduct(oProduct);
}
¿Inyección de dependencias o método estático?
Existen dos formas de invocar la capa de negocio (BProduct) [6:38]:
- Inyección de dependencias: registrar
BProduct en el Startup con AddSingleton y luego inyectarlo en el componente.
- Método estático: marcar los métodos de
BProduct como static, eliminando la necesidad de crear una instancia [6:52].
Ambas opciones son válidas. La elección depende de la arquitectura del proyecto y de las buenas prácticas de C Sharp que se quieran aplicar.
El formulario queda funcional, aunque todavía falta asociar una categoría mediante un menú desplegable y vincular el componente a una página para que sea accesible al usuario [7:20]. Esos dos pasos se abordan en la siguiente sesión. ¿Ya tienes pensado cómo diseñar tu selector de categorías? Comparte tu enfoque en los comentarios.
