Conocer las bases de .NET core

1

Desarrollo de Aplicaciones Web con Blazor y .NET

2

Evolución de .NET en el desarrollo de software

3

Guía Práctica de Visual Studio para Desarrolladores .NET

4

Optimización del Rendimiento en Aplicaciones Web con JavaScript

5

Instalación de Visual Studio Community paso a paso

6

Instalación de SQL Server Express en Windows paso a paso

Entender la estructura de Blazor

7

Programación Web Dinámica con Blazor Server y WebAssembly

8

Arquitectura de Aplicaciones ASP.NET Core con Blazor

9

Programación de Formularios Dinámicos con Lenguaje C#

10

Creación de Componentes Reutilizables en .NET

11

Formularios HTML: Construcción y Uso de Inputs en Desarrollo Web

12

Patrones de Diseño: Usando Singleton en Proyectos Reales

Aplicar Entity Framework

13

Patrones y Arquitectura de Software por Capas

14

Modelado de Datos para Aplicaciones de Inventario

15

Modelado de Datos y Relaciones en Base de Datos

16

Creación de Entidades en C# para Entity Framework

17

Fundamentos de Creación de Tablas y Entidades en Bases de Datos

18

Gestión de Base de Datos con Entity Framework

19

Relaciones entre Tablas en Entity Framework Core

20

Conexión a SQL Server con Entity Framework paso a paso

21

Precarga de Datos en Bases de Datos con Entity Framework

Integrar datos en ambientes Blazor

22

Capa de Negocios: Diseño de Clases para CRUD en .NET Core

23

CRUD con Entity Framework en C#

24

Formulario para Registrar Productos con Asociación a Categorías

25

Formulario Reactivo con CSS y Menú Desplegable en HTML

26

Filtrado de Productos por Categorías en HTML y CSS

27

Filtrado dinámico de productos por categoría en HTML y Blazor

28

Gestión de Productos con Componentes y Navegación en SPAs

29

Actualización de Productos con Entity Framework

30

Programación en C#: Crear y Modificar Formularios Web

31

Asociación de productos a bodegas con código en C#

32

Asociación de Productos a Almacenes: Validación y Mensajes

33

Clase de Manejo de Entradas y Salidas en Almacenes

34

Cargar y gestionar productos por bodega con Entity Framework

35

Configuración y Uso de Bootstrap para Proyectos Web

Aplicar Diseño con Bootstrap

36

Publicación de Sitios Web en Azure con Visual Studio

37

Publicación de Sitios Web en Azure: Guía Paso a Paso

38

Creación de Aplicaciones Web con Entity Framework

No tienes acceso a esta clase

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

Filtrado dinámico de productos por categoría en HTML y Blazor

27/38
Recursos

¿Cómo crear un filtro dinámico de productos por categoría?

La creación de filtros dinámicos para productos por categoría es esencial para desarrollar aplicaciones web interactivas y amigables con el usuario. En este proceso, aprenderemos a hacer una lista de categorías e implementar un menú desplegable que nos permitirá visualizar los productos asociados a cada una.

¿Cómo inicializar la lista de categorías?

Para comenzar, necesitamos crear e inicializar nuestra lista de categorías. Esta lista funcionará como el filtro que permitirá al sistema identificar qué productos mostrar según la categoría seleccionada.

List<Category> categories = new List<Category>();

¿Qué componentes HTML se necesitan?

En la interfaz de usuario, colocaremos un menú desplegable en la parte superior de la página. Este menú mostrará las categorías disponibles, permitiéndonos seleccionar la que necesitamos.

<select id="categoryDropdown">
  <!-- Options will be added dynamically here -->
</select>

Para mejorar la apariencia, podemos usar clases de estilo como form-control.

¿Cómo manejar eventos de cambio?

Implementaremos un evento de cambio para cada vez que el usuario seleccione una categoría distinta de la lista desplegable. Este evento ayudará a actualizar la visualización de los productos en la página.

private void OnCategoryChange(EventArgs e)
{
    // Lógica para manejar el cambio de categoría
    string categoryID = e.Argument.ToString();
    // Filtrar los productos según la categoría seleccionada
}

¿Cómo se realiza el filtrado de productos?

Utilizaremos una lista temporal para filtrar los productos sin hacer constantes llamadas a la base de datos. Esta lista almacenará temporalmente los productos filtrados por la categoría seleccionada.

List<Product> tempProducts = products.Where(p => p.CategoryId == selectedCategoryId).ToList();

Esta práctica es más eficiente y evita cargas constantemente desde la base de datos.

¿Qué ajustes adicionales se pueden hacer para mejorar el sistema?

  • Añadir una opción predeterminada que invite al usuario a seleccionar una categoría.

  • Manejar errores comunes, como olvidarse el .ToList() en las sentencias de filtrado, asegurando que se trabaje con listas correctamente tipeadas.

  • Monitorear los cambios en la selección de categorías mediante mensajes que reflejen el cambio actual, para facilitar el desarrollo y la depuración.

Finalmente, al probar el sistema, podemos verificar que la filtración de productos se realice adecuadamente, mostrando en la interfaz solo aquellos productos pertenecientes a la categoría seleccionada. Con estos pasos, habrás creado un filtro dinámico y eficiente para tus productos. ¡Sigue adelante y continúa mejorando tus habilidades en desarrollo web!

Aportes 9

Preguntas 3

Ordenar por:

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

Me queda una duda, por ejemplo, si tuviéramos una base de datos con 10 mil productos o más, ¿qué sería mejor?

  • Traer toda la información de los productos de la BDD en la primera carga y luego filtrarla como la hicimos ahora para no conectarnos más a la base de datos

  • Que al inicio nmo traiga información y hagamos un méotodo con un filtro que sólo nos traiga de la BDD la información filtrada de los productos, y cada que se cambie de categoría ir de nuevo a la BDD por la nueva información

Un aporte en el manejo de la excepción y uso de Linq:

private void CategoryChanged(ChangeEventArgs ev)
    {
        try
        {
            cantidad = 1;
            Guid id = Guid.Parse(ev.Value.ToString());

            productsFilter = (from product in products
                              where product.CategoryId == id
                              select product).OrderBy(p => p.ProductName)
                                            .ToList();
        }
        catch (Exception)
        {
            productsFilter = products;
        }
    }

Fui un poco mas y agregue esto espero igual les sirva

private void CategoryChanged(ChangeEventArgs e)
    {
        if (e.Value.ToString() == "")
        {
            tmpProducts = Products;
        } else
        {
            tmpProducts = Products.Where(c => c.CategoryId == e.Value.ToString()).ToList();
        }
    }
Tarda mucho el reload(). Debe ser complicado hacer un debug de la aplicación.

Muy bien

El option value del select admite enteros o solo strings?

Creo que también pudo haber quedado de la siguiente forma:

ListProductsComponent.razor
private void CategoryChanged(ChangeEventArgs e)
    {
        products = B_Product.ProductList(e.Value.ToString());
    }


B_Category.cs
        public static List<CategoryEntity> CategoryList(String CategoryId)
        {
            using (var db = new InventaryContext())
            {
	
		if(!String.IsNullOrEmpty(CategoryId))
			 return db.Categories.Where(m=>m.CategoryId == CategoryId).ToList();

                return db.Categories.ToList();
            }
        }

Como realizo el @onchange si la variable la tengo como entero (el CategoryId)

Ayuda en Error al implementar el InputSelect si el @idFactura es int32 me da error, según foros dicen que se debe sobre escribir el InputSelect. podría crear una clara para explicar la solución, lo mismo me paso con el tipo InputDate

            <InputSelect @bind-Value="@idFacultad" class="form-control">
                <option value=""> Seleccione un Facultad ....</option>
                @foreach (var item in listaFacultades)
                {
                    <option value="@item.IdFacultad"> @item.NombreFacultad</option>
                }
            </InputSelect>```