Mostrar una tabla de los datos de la base de datos (C#)

Artículo
03/23/2024

En este tutorial, se muestran dos métodos para mostrar un conjunto de registros de base de datos. Muestro dos métodos para dar formato a un conjunto de registros de base de datos en una tabla HTML. En primer lugar, muestro cómo puede dar formato a los registros de la base de datos directamente dentro de una vista. A continuación, demuestro cómo puede aprovechar los parciales a la hora de dar formato a los registros de la base de datos.

El objetivo de este tutorial es explicar cómo puede mostrar una tabla HTML de datos de una base de datos en una aplicación de ASP.NET MVC. En primer lugar, aprenderá a usar las herramientas de scaffolding incluidas en Visual Studio para generar una vista que muestre un conjunto de registros de forma automática. A continuación, aprenderá a usar un parcial como plantilla al dar formato a los registros de la base de datos.

Creación de clases de modelo

Vamos a mostrar el conjunto de registros de la tabla de la base de datos Movies. La tabla de base de datos Movies contiene las siguientes columnas:

Nombre de la columna	Tipo de datos	Permitir valores NULL
Identificador	Int	False
Título	Nvarchar(200)	False
Director	NVarchar(50)	False
DateReleased	DateTime	False

Para representar la tabla Movies en nuestra aplicación de ASP.NET MVC, necesitamos crear una clase de modelo. En este tutorial, usamos Microsoft Entity Framework para crear nuestras clases de modelo.

Nota:

En este tutorial, usamos Microsoft Entity Framework. Sin embargo, es importante entender que puede usar una variedad de tecnologías diferentes para interactuar con una base de datos desde una aplicación de ASP.NET MVC, incluyendo LINQ to SQL, NHibernate o ADO.NET.

Siga estos pasos para iniciar el Asistente para Entity Data Model:

Haga clic con el botón derecho en la carpeta Models en la ventana del Explorador de soluciones y seleccione la opción de menú Agregar, Nuevo elemento.
Seleccione la categoría Datos y seleccione la plantilla Entity Data Model de ADO.NET.
Asigne al modelo de datos el nombre MoviesDBModel.edmx y haga clic en el botón Agregar.

Después de hacer clic en el botón Agregar, aparece el Asistente de Entity Data Model (vea la figura 1). Siga estos pasos para completar el asistente:

En el paso Elegir contenido del modelo, seleccione la opción Generar a partir de base de datos.
En el paso Elegir la conexión de datos, use la conexión de datos MoviesDB.mdf y el nombre MoviesDBEntities para la configuración de conexión. Haga clic en el botón Next (Siguiente).
En el paso Elegir los objetos de base de datos, expanda el nodo Tablas, seleccione la tabla Películas. Escriba el espacio de nombres Models y haga clic en el botón Finalizar.

Figura 01: Creación de clases LINQ to SQL (haga clic para ver la imagen a tamaño completo)

Después de completar el Asistente de Entity Data Model, se abre el Diseñador de Entity Data Model. El Diseñador debería mostrar la entidad Movies (vea la figura 2).

Figura 02: Diseñador de Entity Data Model (haga clic para ver la imagen a tamaño completo)

Necesitamos realizar un cambio antes de continuar. El Asistente para Entity Data genera una clase de modelo denominada Movies que representa la tabla de base de datos Películas. Dado que usaremos la clase Movies para representar una película determinada, es necesario modificar el nombre de la clase para que sea Movie en lugar de Movies (singular en lugar de plural).

Haga doble clic en el nombre de la clase en la superficie del diseñador y cambie el nombre de la clase de Movies a Movie. Después de realizar este cambio, haga clic en el botón Guardar (el icono de disquete) para generar la clase Movie.

Crear el controlador de películas

Ahora que tenemos una forma de representar los registros de nuestra base de datos, podemos crear un controlador que devuelva la colección de películas. En la ventana Explorador de soluciones de Visual Studio, haga clic con el botón derecho en la carpeta Controllers y seleccione la opción de menú Agregar, Controlador (vea la figura 3).

Figura 03: El menú Agregar controlador (haga clic para ver la imagen a tamaño completo)

Cuando aparezca el cuadro de diálogo Agregar controlador, escriba el nombre del controlador MovieController (consulte la figura 4). Haga clic en el botón Añadir para agregar el nuevo controlador.

figura 04: El cuadro de diálogo Agregar controlador (haga clic para ver la imagen de tamaño completo)

Tenemos que modificar la acción Index() expuesta por el controlador de películas para que devuelva el conjunto de registros de la base de datos. Modifique el controlador para que se parezca al de la lista 1.

Lista 1: Controllers\MovieController.cs

using System.Linq;

using System.Web.Mvc;

using MvcApplication1.Models; 

namespace MvcApplication1.Controllers

{

    public class MovieController : Controller

    {

        //

        // GET: /Movie/ 

        public ActionResult Index()

        {

            var entities = new MoviesDBEntities();

            return View(entities.MovieSet.ToList());

        } 

    }

}

En la lista 1, se usa la clase MoviesDBEntities para representar la base de datos MoviesDB. Para usar esta clase, necesita importar el espacio de nombres MvcApplication1.Models de esta manera:

using MvcApplication1.Models;

La expresión entities.MovieSet.ToList() devuelve el conjunto de todas las películas de la tabla de la base de datos Movies.

Crear la vista

La forma más sencilla de mostrar un conjunto de registros de la base de datos en una tabla HTML es aprovechar el scaffolding que proporciona Visual Studio.

Compile su aplicación seleccionando la opción de menú Compilar, Compilar solución. Debe compilar su aplicación antes de abrir el cuadro de diálogo Añadir vista o sus clases de datos no aparecerán en el cuadro de diálogo.

Haga clic con el botón derecho del ratón en la acción Index() y seleccione la opción de menú Añadir vista (consulte la figura 5).

Figura 05: Añadir una vista (haga clic para ver la imagen a tamaño completo)

En el cuadro de diálogo Agregar vista, active la casilla Crear una vista fuertemente tipada. Seleccione la clase Movie como clase de datos de vista. Seleccione List como contenido de vista (ver figura 6). Al seleccionar estas opciones, se generará una vista fuertemente tipada que muestra una lista de películas.

Figura 06: Cuadro de diálogo Agregar vista (haga clic para ver la imagen de tamaño completo)

Después de hacer clic en el botón Añadir, se genera automáticamente la vista de la lista 2. Esta vista contiene el código necesario para iterar por la colección de películas y mostrar cada una de las propiedades de una película.

Lista 2: Views\Movie\Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication1.Models.Movie>>" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

      Index

</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

    <h2>Index</h2> 

    <table>

        <tr>

            <th></th>

            <th>

                Id

            </th>

            <th>

                Title

            </th>

            <th>

                Director

            </th>

            <th>

                DateReleased

            </th>

        </tr> 

    <% foreach (var item in Model) { %>

        <tr>

            <td>

                <%= Html.ActionLink("Edit", "Edit", new { id=item.Id }) %> |

                <%= Html.ActionLink("Details", "Details", new { id=item.Id })%>

            </td>

            <td>

                <%= Html.Encode(item.Id) %>

            </td>

            <td>

                <%= Html.Encode(item.Title) %>

            </td>

            <td>

                <%= Html.Encode(item.Director) %>

            </td>

            <td>

                <%= Html.Encode(String.Format("{0:g}", item.DateReleased)) %>

            </td>

        </tr>

    <% } %> 

    </table> 

    <p>

        <%= Html.ActionLink("Create New", "Create") %>

    </p> 

</asp:Content>

Puede ejecutar la aplicación seleccionando la opción de menú Depurar, Iniciar depuración (o pulsando la tecla F5). Al ejecutar la aplicación se inicia Internet Explorer. Si navega hasta la URL /Movie verá la página de la figura 7.

Figura 07: Una tabla de películas (haga clic para ver la imagen a tamaño completo)

Si no le gusta nada el aspecto de la cuadrícula de registros de la base de datos de la figura 7, solo tiene que modificar la vista Index. Por ejemplo, puede cambiar el encabezado DateReleased por Día de lanzamiento modificando la vista Index.

Crear una plantilla con un parcial

Cuando una vista se complica demasiado, es buena idea empezar a dividirla en parciales. Usar parciales hace que sus vistas sean más fáciles de entender y mantener. Crearemos un parcial que podremos usar como plantilla para dar formato a cada uno de los registros de la base de datos de películas.

Siga estos pasos para crear el parcial:

Haga clic con el botón derecho del ratón en la carpeta Views\Movie y seleccione la opción de menú Añadir vista.
Marque la casilla de verificación etiquetada como Crear una vista parcial (.ascx).
Nombre el parcial MovieTemplate.
Active la casilla Crear una vista fuertemente tipada.
Seleccione Movie como clase de datos de vista.
Seleccione Empty como contenido de vista.
Haga clic en el botón Añadir para agregar el parcial a su proyecto.

Una vez finalizados estos pasos, modifique el parcial de MovieTemplate para que se parezca a la lista 3.

Lista 3: Views\Movie\MovieTemplate.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MvcApplication1.Models.Movie>" %> 

<tr>

    <td>

        <%= Html.Encode(Model.Id) %>

    </td>

    <td>

        <%= Html.Encode(Model.Title) %>

    </td>

    <td>

        <%= Html.Encode(Model.Director) %>

    </td>

    <td>

        <%= Html.Encode(String.Format("{0:g}", Model.DateReleased)) %>

    </td>

</tr>

El parcial de la lista 3 contiene una plantilla para una única fila de registros.

La vista Index modificada de la lista 4 usa el parcial MovieTemplate.

Lista 4: Views\Movie\Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication1.Models.Movie>>" %> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 

    <h2>Index</h2> 

    <table>

        <tr>

            <th>

                Id

            </th>

            <th>

                Title

            </th>

            <th>

                Director

            </th>

            <th>

                DateReleased

            </th>

        </tr> 

    <% foreach (var item in Model) { %>

        <% Html.RenderPartial("MovieTemplate", item); %>

    <% } %> 

    </table> 

</asp:Content>

La vista de la lista 4 contiene un bucle foreach que recorre en iteración todas las películas. Para cada película, se usa el parcial MovieTemplate para dar formato a la película. MovieTemplate se representa llamando al método auxiliar RenderPartial().

La vista Index modificada representa la misma tabla HTML de registros de la base de datos. Sin embargo, la vista se ha simplificado mucho.

El método RenderPartial() es diferente de la mayoría de los otros métodos asistentes porque no devuelve una cadena. Por lo tanto, debe llamar al método RenderPartial() usando <% Html.RenderPartial(); %> en lugar de <%= Html.RenderPartial(); %>.

Resumen

El objetivo de este tutorial era explicar cómo se puede mostrar un conjunto de registros de la base de datos en una tabla HTML. En primer lugar, aprendió a devolver un conjunto de registros de la base de datos desde una acción de controlador aprovechando Microsoft Entity Framework. Después, ha aprendido a usar scaffolding de Visual Studio para generar una vista que muestre automáticamente una colección de elementos. Por último, ha aprendido a simplificar la vista aprovechando un parcial. Ha aprendido a usar un parcial como plantilla para poder dar formato a cada registro de la base de datos.

Anterior Siguiente

Compartir a través de