Cuando ya tienes un sistema de almacenamiento funcional, el siguiente paso lógico es gestionar las entradas y salidas de productos por bodega. Aquí se explica cómo crear un componente en Blazor que cargue bodegas desde la capa de entidades, las muestre en un select HTML y prepare un evento de cambio para filtrar los productos almacenados en cada bodega.
¿Cómo se estructura el componente de entradas y salidas?
Dentro de la carpeta Componentes se crea una nueva carpeta llamada InOuts [0:22]. Esta carpeta agrupa todo lo relacionado con el manejo de entradas y salidas de inventario. Haciendo clic derecho, se selecciona Nuevo ítem > Razor Component y se nombra CreateInOutComponent [0:32].
Este componente trabaja directamente con la entidad InputOutputEntity, que representa cada movimiento de entrada o salida. Para utilizarla, es necesario importar la capa de entidades con using entities [0:50]. Se crea entonces una instancia del modelo:
- Se declara un objeto
InputOutputEntity con nombre oInOuts (la "o" minúscula indica que es un objeto, siguiendo la convención) [1:10].
- Se importa también la capa de negocios para gestionar la lógica asociada.
Además del modelo principal, el componente necesita dos listas adicionales:
- Una lista de bodegas (
List<WarehouseEntity>) llamada warehouses, inicializada como nueva lista vacía [1:30].
- Una lista de almacenamiento (
List<StorageEntity>) llamada storage, que servirá para consultar los productos almacenados dentro de cada bodega [1:48].
¿Cómo se cargan las bodegas al iniciar el componente?
Siguiendo el patrón aprendido en clases previas, se utiliza el método OnInitializedAsync con protected override async Task [2:05]. Dentro de este método solo se cargan las bodegas, no los productos ni el almacenamiento. La razón es que los productos se filtrarán después, cuando el usuario seleccione una bodega específica.
csharp
protected override async Task OnInitializedAsync()
{
warehouses = await b_warehouses.GetWarehouses();
}
Para mostrar estas bodegas en la interfaz se utiliza un select HTML estándar, no un EditForm [2:30]. Esto se debe a que la selección de bodega no está directamente asociada al formulario de entrada y salida; funciona de manera independiente como filtro.
La estructura del select incluye:
- Una opción por defecto con el texto "Seleccione una bodega..." y un
value vacío [2:55].
- Un ciclo
@foreach que recorre la lista warehouses y genera dinámicamente una opción por cada bodega registrada [3:10].
html
<div class="form-group">
<select class="form-control" @onchange="OnWarehouseChanged">
<option value="">Seleccione una bodega...</option>
@foreach (var warehouse in warehouses)
{
<option value="@warehouse.WarehouseId">@warehouse.WarehouseName</option>
}
</select>
</div>
Se aplican las clases de Bootstrap form-group y form-control para darle un diseño limpio y consistente [3:30].
¿Cómo se visualiza el componente en la página principal?
Para probar el componente, se agrega en el Index la referencia correspondiente. En el archivo _Imports, se añade la ruta hacia la carpeta Components.InOuts [3:55]. Luego, dentro del Index, se coloca el tag <CreateInOutComponent /> [4:08].
Al refrescar el sitio, el select aparece con todas las bodegas registradas previamente, confirmando que la carga funciona correctamente [4:20].
¿Cómo se construye el evento de cambio de bodega?
Para reaccionar cuando el usuario selecciona una bodega diferente, se utiliza el atributo @onchange en el select [4:35]. Este evento dispara un método privado que recibe un parámetro de tipo ChangeEventArgs [4:55].
csharp
private void OnWarehouseChanged(ChangeEventArgs e)
{
string idWarehouse = e.Value.ToString();
}
El parámetro e contiene el Value del option seleccionado, que se convierte a string para obtener el ID de la bodega [5:15]. Con este identificador se podrán consultar los productos almacenados en esa bodega específica, proceso que se completará en la siguiente sesión junto con la construcción del formulario completo de entradas y salidas.
¿Has implementado filtros dinámicos con select en tus proyectos Blazor? Comparte tu experiencia y las variantes que hayas probado.
