Conocer las bases de .NET core

1

Desarrollo de Aplicaciones Web con Blazor y Entity Framework

2

Evolución de las tecnologías .NET

3

Evolución y Uso de Visual Studio Code en Desarrollo .NET

4

Desarrollo Web: Cliente, Servidor y Optimización con JavaScript

5

Instalación de Visual Studio Community paso a paso

6

Instalación y Configuración de SQL Server Express 2019

Entender la estructura de Blazor

7

Desarrollo de Aplicaciones con Blazor Server y WebAssembly

8

Estructura y Configuración de Aplicaciones en Visual Studio Code

9

Creación de Formularios Dinámicos con Blade y C#

10

Creación y Uso de Componentes en Glaceau para Formularios Reutilizables

11

Creación y Gestión de Formularios HTML Básicos

12

Arquitectura y Patrones de Diseño en Desarrollo de Software

Aplicar Entity Framework

13

Arquitectura por Capas y Patrones de Diseño en Software

14

Modelado de Datos para Aplicación de Inventario

15

Modelo de Datos para Gestión de Inventarios

16

"Creación de Entidades en .NET Core para Bases de Datos"

17

Diseño y Configuración de Entidades en Bases de Datos

18

Construcción de Relaciones en Modelos de Datos con Entity Framework

19

Creación de Capas de Acceso a Datos con Entity Framework

20

Configuración y migración de bases de datos con Entity Framework

21

Precarga de Datos en Bases de Datos con Entity Framework

Integrar datos en ambientes Blazor

22

Creación de Capas de Negocio en Aplicaciones .NET

23

CRUD Básico en Bases de Datos Relacionales

24

"Creación de Formularios para Registro de Productos en Inventario"

25

"Creación de Formularios y Menús Desplegables en Páginas Web"

26

Listar y Mostrar Productos en Tabla HTML con C#

27

Filtrado Dinámico de Productos por Categoría en HTML

28

Creación y Navegación de Páginas con Listados y Formularios en Sitios Web

29

Actualización de Información de Productos en Componentes Web

30

Actualización y Gestión de Formularios en Aplicaciones Web

31

Integración de Productos en Bodegas: Formularios y Almacenamiento

32

Asociación de Productos con Bodegas en Sitios Web

33

Gestión de Entradas y Salidas en Almacenamiento de Bodegas

34

Cargar y asociar productos a bodegas en Entity Framework

35

Gestión de Inventarios: Actualización y Control de Stocks

Aplicar Diseño con Bootstrap

36

Diseño Responsivo con Vustra: Mejora la Experiencia del Usuario

37

Publicación de Sitios Web en Azure Paso a Paso

38

Arquitectura y Herramientas para Desarrollo Web

No tienes acceso a esta clase

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

Listar y Mostrar Productos en Tabla HTML con C#

26/38
Recursos

¿Cómo estructurar un sistema de productos en tu aplicación?

En la construcción de un sistema para manejar productos, cada paso es crucial para mantener organizados los datos y poder acceder a ellos eficientemente. Desde la creación hasta la visualización de los productos, cada componente de tu aplicación debe estar bien diseñado para asegurar el correcto funcionamiento del sistema. Vamos a desglosar el proceso de implementación de una lista de productos utilizando tecnologías web actuales.

¿Cómo se guardan los productos en la base de datos?

Inicialmente, cuando creamos un nuevo producto, es fundamental asegurarse de que este se guarde correctamente en la base de datos. Al agregar un producto, este se asocia a una categoría y se almacena con una cantidad inicial de cero. Este procedimiento prepara el terreno para manejar las entradas y salidas de inventario de forma más avanzada más adelante.

Una vez confirmada la correcta inserción de los datos en la base de datos, se puede proceder a los siguientes pasos, que incluyen la construcción de interfaces para listar y visualizar estos productos.

¿Cómo listar los productos en la interfaz de usuario?

Para poder ver los productos almacenados, es necesario crear un componente de lista. Se recomienda utilizar un componente plural, como "Productos", para representar múltiples elementos. Este componente es fundamental para extraer y mostrar información desde la capa de negocios del sistema.

Código básico para el componente:

import Productos from './tu_ruta_de_productos';

let productos = {};

async function inicializar() {
    productos = await Productos.obtenerLista();
}

inicializar();

¿Cómo estructurar una tabla HTML para visualizar productos?

La visualización de productos se realiza a través de una tabla HTML, que debe tener un encabezado y un cuerpo bien definidos. En el encabezado, se deben listar todos los parámetros visibles, como referencia, nombre y categoría del producto.

Ejemplo de estructura de tabla:

<table>
    <thead>
        <tr>
            <th>Referencia</th>
            <th>Nombre</th>
            <th>Categoría</th>
        </tr>
    </thead>
    <tbody>
        <!-- Aquí se utilizará un bucle para listar productos -->
    </tbody>
</table>

¿Cómo integrar el diseño en las tablas para mejorar la experiencia visual?

Para hacer la interfaz más atractiva, es útil aplicar estilos de diseño como los que ofrece Bootstrap. La clase table de Bootstrap proporciona un diseño limpio y estructurado que facilita la lectura de la información.

Aplicación de estilos con Bootstrap:

<table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th>Referencia</th>
            <th>Nombre</th>
            <th>Categoría</th>
        </tr>
    </thead>
    <tbody>
        <!-- Datos de productos listados aquí -->
    </tbody>
</table>

Al aplicar estas clases, la tabla no solo tendrá bordes definidos, sino que también cambiará de color cuando el ratón pase sobre ella, brindando una experiencia visual más agradable.

¿Qué pasos seguir para un proyecto más organizado?

A medida que avanzas, tu proyecto toma forma y se vuelve más estructurado. Ya puedes crear y listar los productos almacenados, lo que te permite tener una base sólida para agregar funcionalidades futuras, como filtros por categorías. Este enfoque te prepara para tener un sistema robusto y flexible que simplifique la administración de productos.

A medida que desarrolles más proyectos, recuerda siempre volver a evaluar el diseño y la implementación de tus componentes para asegurarte de que ofrezcan la mejor experiencia posible tanto para los desarrolladores como para los usuarios finales. ¡Sigue adelante, que el aprendizaje continuo es la clave del éxito en el desarrollo de software!

Aportes 5

Preguntas 0

Ordenar por:

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

<table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th>Referencia</th>
            <th>Nombre producto</th>
            <th>Descripción del producto.</th>
            <th>Categoria</th>
        </tr>
    </thead>
    <tbody>
        @foreach(var product in products)
        {
            <tr>
                <td>@product.ProductId</td>
                <td>@product.ProductName</td>
                <td>@product.ProductDescription</td>
                <td>@product.CategoryId</td>
            </tr>
        }
    </tbody>
</table>```

Se podrá obtener la descripción de la categoría para el listado?

Para al momento de listar los productos y mostrar el nombre de la categoria hice la siguiente función.
De esta manera tenemos una mejor apreciación de los productos, a que categoria pertenece. 😊

private string GetCategoryName(string idCategory)
    {
        if (string.IsNullOrEmpty(idCategory))
        {
            return "NONE";
        }

        return categories.Where(c => c.CategoryId == idCategory).First().CategoryName;
    }
<td>@p.ProductId</td>
                <td>@p.Name</td>
                <td>@p.Description</td>
                <td>@GetCategoryName(p.CategoryId)</td>
                <td>@p.TotalQuantity</td>
                <td><a href="/product/update/@p.ProductId">Actualizar</a></td>

Ctrl+d para duplicar el código.

😎