Introducción a las ASP.NET Web Pages: visualización de datos

por Tom FitzMacken

Este tutorial muestra cómo crear una base de datos en WebMatrix y cómo mostrar los datos de la base de datos en una página cuando se utiliza ASP.NET Web Pages (Razor). Asume que ha completado la serie a través de Introducción a la programación de ASP.NET Web Pages .

Temas que se abordarán:

• Cómo utilizar las herramientas WebMatrix para crear una base de datos y tablas de base de datos.
• Cómo utilizar las herramientas WebMatrix para agregar datos a una base de datos.
• Cómo mostrar datos de la base de datos en una página.
• Cómo ejecutar comandos SQL en ASP.NET Web Pages.
• Cómo personalizar el asistente WebGrid para cambiar la visualización de los datos y agregar paginación y ordenación.

Características/tecnologías tratadas:

• Herramientas de base de datos WebMatrix.
• Asistente WebGrid.

Lo que creará

En el tutorial anterior se presentaron las ASP.NET Web Pages (archivos .cshtml), los conceptos básicos de la sintaxis de Razor y los asistentes. En este tutorial, comenzará a crear la aplicación web real que utilizará durante el resto de la serie. Se trata de una sencilla aplicación de cine que le permite ver, agregar, cambiar y eliminar información sobre películas.

Cuando haya terminado con este tutorial, podrá ver una lista de películas parecida a esta página:

Pero para empezar, hay que crear una base de datos.

Una muy breve introducción a las bases de datos

Este tutorial solo ofrece una breve introducción a las bases de datos. Si tiene experiencia con bases de datos, puede saltarse esta breve sección.

Una base de datos contiene una o varias tablas que contienen información: por ejemplo, tablas para clientes, pedidos y proveedores, o para alumnos, profesores, clases y calificaciones. Estructuralmente, una tabla de base de datos es como una hoja de cálculo. Imagine una libreta de direcciones típica. Para cada entrada de la libreta de direcciones (es decir, para cada persona) tiene varios datos, como el nombre, los apellidos, la dirección, la dirección de correo electrónico y el número de teléfono.

(las filas se denominan a veces registros y las columnas campos).

En la mayoría de las tablas de bases de datos, la tabla debe tener una columna que contenga un valor único, como un número de cliente, un número de cuenta, etc. Este valor se conoce como clave principal de la tabla y se utiliza para identificar cada fila de la tabla. En el ejemplo, la columna Id. es la clave principal de la libreta de direcciones mostrada en el ejemplo anterior.

Gran parte del trabajo que se realiza en las aplicaciones web consiste en leer información de la base de datos y mostrarla en una página. También es frecuente que recopile información de los usuarios y la agregue a una base de datos, o que modifique registros que ya están en la base de datos. (cubriremos todas estas operaciones en el trayecto de este conjunto de tutoriales).

El trabajo con bases de datos puede ser enormemente complejo y requerir conocimientos especializados. Para este conjunto de tutoriales, sin embargo, solo debe entender conceptos básicos, que se irán explicando a medida que avances.

Crear una base de datos

WebMatrix incluye herramientas que facilitan la creación de una base de datos y la creación de tablas en ella. (la estructura de una base de datos se denomina esquema de la base de datos). Para este tutorial, creará una base de datos con una sola tabla: películas.

Abra WebMatrix si aún no lo ha hecho, y abra el sitio WebPagesMovies que creó en el tutorial anterior.

En el panel izquierdo, haga clic en el área de trabajo Base de datos.

La cinta de opciones cambia para mostrar las tareas relacionadas con la base de datos. En la cinta de opciones, haga clic en Nueva base de datos.

WebMatrix crea una base de datos SQL Server CE (un archivo .sdf) que tiene el mismo nombre que su sitio - WebPagesMovies.sdf. (no lo hará aquí, pero puede cambiar el nombre del archivo por el que desee, siempre que tenga la extensión .sdf).

Creación de una tabla

En la cinta de opciones, haga clic en Nueva tabla. WebMatrix abre el diseñador de tablas en una nueva pestaña. (si la opción Nueva tabla no está disponible, asegúrese de que la nueva base de datos está seleccionada en la vista en árbol de la izquierda).

En el cuadro de texto de la parte superior (donde la marca de agua dice "Introduzca el nombre de la tabla"), escriba "Películas".

El panel situado bajo el nombre de la tabla es donde se definen las columnas individuales. Para la tabla Películas de este tutorial, solo creará unas pocas columnas: Id., Título, Género yAño.

En el cuadro Nombre, escriba "Id". Al introducir un valor aquí se activan todos los controles de la nueva columna.

Vaya a la lista Tipo de datos y seleccione int. Este valor especifica que la columna Id. contendrá datos enteros (números).

Nota:

No vamos a llamarlo más aquí (demasiado), pero puede utilizar los gestos estándar del teclado de Windows para navegar por esta cuadrícula. Por ejemplo, puede tabular entre campos, puede empezar a escribir para seleccionar un elemento de una lista, etc.

Salte la casilla Valor por defecto (es decir, déjela en blanco). Vaya a la casilla Es clave principal y selecciónela. Esta opción indica a la base de datos que la columna Id. contendrá los datos que identifican las filas individuales. (es decir, cada fila tendrá un valor único en la columna Id. que podrá utilizar para encontrar esa fila).

Elija la opción Es identidad. Esta opción indica a la base de datos que debe generar automáticamente el siguiente número secuencial para cada nueva fila. (la opción Es identidad solo funciona si también ha seleccionado la opción Es clave principal).

Haga clic en la siguiente fila de la cuadrícula o pulse Tabulador dos veces para terminar la fila actual. Cualquiera de los dos gestos guarda la fila actual e inicia la siguiente. Observe que la columna Valor por defecto ahora dice Nulo. (nulo es el valor por defecto para el valor por defecto, por así decirlo).

Cuando haya terminado de definir la nueva columna Id., el diseñador tendrá el aspecto de esta ilustración:

Para crear la siguiente columna, haga clic en la casilla de la columna Nombre. Introduzca "Título" para la columna y seleccione nvarchar para el valor de Tipo de datos. La parte "var" de nvarchar indica a la base de datos que los datos de esta columna serán una cadena cuyo tamaño puede variar de un registro a otro. (el prefijo "n" representa "nacional", lo que indica que el campo puede contener datos de caracteres para cualquier alfabeto o sistema de escritura, es decir, el campo contiene datos Unicode).

Si selecciona nvarchar, aparece otro cuadro en el que puede introducir la longitud máxima del campo. Introduzca 50, suponiendo que ningún título de película con el que vaya a trabajar en este tutorial tendrá más de 50 caracteres.

Omita el Valor predeterminado y desactive la opción Permitir nulos. No desea que la base de datos permita la entrada de películas que no tengan título.

Cuando termine y pase a la siguiente fila, el diseñador tendrá el aspecto de esta ilustración:

Repita estos pasos para crear una columna llamada "Género", excepto para la longitud, fíjela en solo 30.

Cree otra columna denominada "Año". Para el tipo de datos, elija nchar (no nvarchar) y establezca la longitud en 4. Para el año, vas a utilizar un número de 4 dígitos como "1995" o "2010", por lo que no necesitas una columna de tamaño variable.

Este es el aspecto del diseño final:

Pulse Ctrl+S o haga clic en el botón Guardar de la barra de herramientas de acceso rápido. Cierre el diseñador de bases de datos cerrando la pestaña.

Agregar algunos datos de ejemplo

Más adelante en esta serie de tutoriales creará una página en la que podrá introducir nuevas películas en un formulario. Por ahora, sin embargo, puede agregar algunos datos de ejemplo que luego puede mostrar en una página.

En el área de trabajo Base de datos de WebMatrix, observe que hay un árbol que muestra el archivo .sdf que creó anteriormente. Abra el nodo de su nuevo archivo .sdf y luego, abra el nodo Tablas.

Haga clic con el botón derecho en el nodo Películas y seleccione Datos. WebMatrix abre una cuadrícula en la que puede introducir datos para la tabla Películas:

Haga clic en la columna Título y escriba "Cuando Harry conoció a Sally". Vaya a la columna Género (puede utilizar el tabulador) y escriba "Comedia romántica". Vaya a la columna Año y escriba "1989":

Pulse Intro y WebMatrix guardará la nueva película. Observe que la columna Id. ha sido rellenada.

Escriba otra película (por ejemplo, "Lo que el viento se llevó", "Drama", "1939"). La columna Id. se rellena de nuevo:

Escriba una tercera película (por ejemplo, "Cazafantasmas", "Comedia"). Como experimento, deje en blanco la columna Año y pulse Intro. Dado que ha deseleccionado la opción Permitir nulos, la base de datos muestra un error:

Haga clic en Aceptar para volver atrás y corregir la entrada (el año de "Cazafantasmas" es 1984), y luego pulse Intro.

Rellene varias películas hasta que tenga 8 más o menos. (escribir 8 facilita el trabajo posterior con la paginación. Pero si son demasiados, escriba solo unos pocos por ahora). Los datos reales no importan.

Si ha introducido todas las películas sin errores, los valores de Id. son secuenciales. Si ha intentado guardar un registro de película incompleto, es posible que los números de identificación no sean secuenciales. Si es así, está bien. Los números no tienen ningún significado inherente, y lo único importante es que sean únicos en la tabla Películas.

Cierre la pestaña que contiene el diseñador de la base de datos.

Ahora puede pasar a mostrar estos datos en una página web.

Visualización de datos en una página mediante el WebGrid Helper

Para mostrar datos en una página, va a utilizar el asistente WebGrid. Este asistente produce una visualización en una cuadrícula o tabla (filas y columnas). Como puede ver, podrá refinar la cuadrícula con formato y otras características.

Para ejecutar la cuadrícula, deberá escribir algunas líneas de código. Estas pocas líneas servirán como una especie de patrón para casi todos los accesos a datos que realices en este tutorial.

Nota:

En realidad tiene muchas opciones para mostrar datos en una página; el asistente WebGrid es solo una. Lo hemos elegido para este tutorial porque es la forma más sencilla de mostrar datos y porque es razonablemente flexible. En el siguiente conjunto de tutoriales, verá cómo utilizar una forma más "manual" de trabajar con los datos en la página, que le da un control más directo sobre cómo mostrar los datos.

En el panel izquierdo de WebMatrix, haga clic en el área de trabajo Archivos.

La nueva base de datos creada se encuentra en la carpeta App_Data. Si la carpeta no existía ya, WebMatrix la creará para su nueva base de datos. (es posible que la carpeta ya existiera si hubiera instalado asistentes previamente).

En la vista en árbol, seleccione la raíz del sitio web. Debe seleccionar la raíz del sitio web; de lo contrario, el nuevo archivo podría agregarse a la carpeta App_Data.

En la cinta de opciones, haga clic en Nuevo. En el cuadro Elegir un tipo de archivo, elija CSHTML.

En el cuadro Nombre, asigne a la nueva página el nombre "Movies.cshtml":

Haga clic en el botón Aceptar . WebMatrix abre un nuevo archivo con algunos elementos de esqueleto. Primero escribirás algo de código para obtener los datos de la base de datos. Primero escribirá algún código para obtener los datos de la base de datos.

Escribir el código de consulta de datos

En la parte superior de la página, entre los caracteres @{ e }, introduzca el siguiente código. (asegúrese de escribir este código entre las llaves de apertura y cierre).

var db = Database.Open("WebPagesMovies");
var selectedData = db.Query("SELECT * FROM Movies");
var grid = new WebGrid(source: selectedData);

La primera línea abre la base de datos que creó anteriormente, que es siempre el primer paso antes de hacer algo con la base de datos. Indique al método Database.Open el nombre de la base de datos que desea abrir. Tenga en cuenta que no incluye .sdf en el nombre. El métodoOpen asume que está buscando un archivo .sdf (es decir, WebPagesMovies.sdf) y que el archivo .sdf se encuentra en la carpeta App_Data. (anteriormente señalamos que la carpeta App_Data está reservada; este escenario es uno de los lugares en los que ASP.NET hace suposiciones sobre ese nombre).

Cuando se abre la base de datos, se pone una referencia a ella en la variable llamada db. (que podría llamarse cualquier de cualquier forma). La variable db es cómo acabará interactuando con la base de datos.

La segunda línea obtiene los datos de la base de datos utilizando el método Query. Observe cómo funciona este código: la variable db tiene una referencia a la base de datos abierta, y usted invoca el método Query utilizando la variable db (db.Query).

La consulta en sí es una sentencia SQL Select. (para obtener más información sobre SQL, consulte la explicación más adelante). En la instrucción, Movies identifica la tabla a consultar. El carácter * especifica que la consulta debe devolver todas las columnas de la tabla. (también puede enumerar las columnas individualmente, separadas por comas).

Los resultados de la consulta, si los hay, se devuelven y se ponen a disposición en la variable selectedData. De nuevo, la variable puede llamarse de cualquier forma.

Por último, la tercera línea indica a ASP.NET que desea utilizar una instancia del asistente WebGrid. Se crea (una instancia) para el objeto asistente utilizando la palabra clave new y se le pasan los resultados de la consulta a través de la variable selectedData. El nuevo objeto WebGrid, junto con los resultados de la consulta a la base de datos, se ponen a disposición en la variable grid. Necesitará ese resultado en un momento para mostrar realmente los datos en la página.

En esta etapa, la base de datos ha sido abierta, ha obtenido los datos que desea, y ha preparado el asistente WebGrid con esos datos. Lo siguiente es crear el marcado en la página.

Sugerencia

Lenguaje de consulta más estructurado (SQL)

SQL es un lenguaje que se utiliza en la mayoría de las bases de datos relacionales para administrar los datos de una base de datos. Incluye comandos que permiten recuperar datos y actualizarlos, y que permiten crear, modificar y administrar datos en tablas de bases de datos. SQL es diferente de un lenguaje de programación (como C#). Con SQL, le dice a la base de datos lo que quiere, y es trabajo de la base de datos averiguar cómo obtener los datos o realizar la tarea. Estos son unos ejemplos de algunos comandos SQL y lo que hacen:

Select * From Movies

SELECT ID, Name, Price FROM Product WHERE Price > 10.00 ORDER BY Name

La primera instrucción obtiene Select todas las columnas (especificadas por *) de la tabla Películas.

La segunda instrucción Select obtiene las columnas Id., Nombre y Precio de los registros de la tabla Producto cuyo valor de la columna Precio es superior a 10. El comando devuelve los resultados en orden alfabético según los valores de la columna Nombre. Si ningún registro coincide con los criterios de precio, el comando devuelve un conjunto vacío.

INSERT INTO Product (Name, Description, Price) VALUES ('Croissant', 'A flaky delight', 1.99)

Este comando inserta un nuevo registro en la tabla Producto, estableciendo la columna Nombre en "Croissant", la columna Descripción en "Una delicia hojaldrada" y el precio en 1,99.

Observe que cuando especifica un valor no numérico, el valor va entre comillas simples (no dobles, como en C#). Estas comillas se utilizan alrededor de texto o valores de fecha, pero no alrededor de números.

DELETE FROM Product WHERE ExpirationDate < '01/01/2008'

Este comando elimina los registros de la tabla Productos cuya columna de fecha de caducidad sea anterior al 1 de enero de 2008. (el comando asume que la tabla Producto tiene dicha columna, por supuesto). La fecha se introduce aquí en formato DD/MM/AAAA, pero debe introducirse en el formato que se utilice en su localidad.

Los comandos Insert y Delete no devuelven conjuntos de resultados. En su lugar, devuelven un número que indica cuántos registros se han visto afectados por la orden.

Para algunas de estas operaciones (como insertar y eliminar registros), el proceso que solicita la operación debe tener los permisos adecuados en la base de datos. Gracias a esto, las bases de datos de producción suele ser necesario indicar un nombre de usuario y una contraseña al conectarse a la base de datos.

Hay docenas de comandos SQL, pero todos siguen un patrón como los comandos que ve aquí. Puede utilizar comandos SQL para crear tablas de bases de datos, contar el número de registros de una tabla, calcular precios y realizar muchas más operaciones.

Agregar marcas para mostrar los datos

Dentro del elemento <head>, establezca el contenido del elemento <title> a "Películas":

<head>
    <meta charset="utf-8" />
    <title>Movies</title>
</head>

Dentro del elemento <body> de la página, agregue lo siguiente:

<h1>Movies</h1>
<div>
    @grid.GetHtml()
</div>

Eso es. La variable grid es el valor que se ha creado cuando creó el objeto WebGrid en código anteriormente.

En la vista en árbol de WebMatrix, haga clic con el botón derecho en la página y seleccione Iniciar en el navegador. Verá algo parecido a esta página:

Haga clic en un vínculo de encabezado de columna para ordenar por esa columna. La posibilidad de ordenar haciendo clic en un encabezado es una función integrada en el ayudante WebGrid.

El método GetHtml, como su nombre indica, genera marcas que muestran los datos. De forma predeterminada, el GetHtml método genera un elemento HTML <table>. (si lo desea, puede verificar el renderizado consultando la fuente de la página en el navegador).

Modificar el aspecto de la cuadrícula

Usar el asistente WebGrid como acaba de hacer es fácil, pero la pantalla resultante es sencilla. El asistente WebGrid tiene todo tipo de opciones que le permiten controlar cómo se muestran los datos. Hay demasiados para explorar en este tutorial, pero esta sección le dará una idea de algunas de esas opciones. Algunas opciones adicionales se tratarán en tutoriales posteriores de esta serie.

Especificación de columnas individuales para mostrar

Para empezar, puede especificar que desea mostrar solo determinadas columnas. De forma predeterminada, como ha visto, la cuadrícula muestra las cuatro columnas de la tabla Películas.

En el archivo Movies.cshtml sustituya la marca @grid.GetHtml() que acaba de agregar por la siguiente:

@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

Para indicar al asistente qué columnas debe mostrar, se incluye un parámetro columns para el método GetHtml y se le pasa una colección de columnas. En la colección, se especifica cada columna a incluir. Se especifica una columna individual a mostrar incluyendo un objeto grid.Column, y se pasa el nombre de la columna de datos que se desea. (estas columnas deben estar incluidas en los resultados de la consulta SQL; el asistente WebGrid no puede mostrar columnas que no hayan sido devueltas por la consulta).

Ejecute de nuevo la página Movies.cshtml en el navegador, y esta vez obtendrá una visualización como la siguiente (observe que no se muestra ninguna columna Id.):

Cambiar el aspecto de la cuadrícula

Hay más opciones para mostrar columnas, algunas de las cuales se explorarán en tutoriales posteriores de este conjunto. Por ahora, esta sección le presentará las formas en que puede aplicar estilo a la cuadrícula en su conjunto.

Dentro de la sección <head> de la página, justo antes de la etiqueta </head> de cierre, agregue el siguiente elemento <style>:

<style type="text/css">
  .grid { margin: 4px; border-collapse: collapse; width: 600px; }
  .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
  .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
  .alt { background-color: #E8E8E8; color: #000; }
</style>

Este marcado CSS define clases denominadas grid, head, y así sucesivamente. También puede poner estas definiciones de estilo en un archivo .css separado y vincularlo a la página. (de hecho, lo hará más adelante en este conjunto de tutoriales). Pero para facilitar las cosas en este tutorial, están dentro de la misma página que muestra los datos.

Ahora puede hacer que el asistente WebGrid utilice estas clases de estilo. El asistente tiene una serie de propiedades (por ejemplo, tableStyle) para este propósito - se les asigna un nombre de clase de estilo CSS, y ese nombre de clase se renderiza como parte del marcado que es renderizado por el asistente.

Cambie el marcado grid.GetHtml para que ahora se vea como este código:

@grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

Lo nuevo aquí es que ha agregado tableStyle, headerStyle, y alternatingRowStyle parámetros al método GetHtml. Estos parámetros se han establecido con los nombres de los estilos CSS que ha agregado hace un momento.

Ejecute la página, y esta vez verá una cuadrícula con un aspecto mucho menos liso que antes:

Para ver lo que ha generado el método GetHtml, puede consultar el código fuente de la página en el navegador. No entraremos en detalles aquí, pero lo importante es que al especificar parámetros como tableStyle, hacía que la cuadrícula generara etiquetas HTML como las siguientes:

<table class="grid">

A la etiqueta <table> se le ha agregado un atributo class que hace referencia a una de las reglas CSS que agregó anteriormente. Este código muestra el patrón básico: los distintos parámetros del método GetHtml permiten hacer referencia a clases CSS que el método genera junto con el marcado. Lo que haga con las clases CSS es cosa suya.

Agregar paginación

Como última tarea de este tutorial, agregará paginación a la cuadrícula. Ahora no hay problema para mostrar todas sus películas a la vez. Pero si agregara cientos de películas, la visualización de la página se alargaría.

En el código de la página, cambie la línea que crea el objeto WebGrid por el siguiente código:

var grid = new WebGrid(source: selectedData, rowsPerPage: 3);

La única diferencia con respecto a antes es que ha agregado un parámetro rowsPerPage que está ajustado a 3.

Ejecute la página. La cuadrícula muestra 3 filas a la vez, además de vínculos de navegación que le permiten hojear las películas de su base de datos:

Próximamente

En el siguiente tutorial, aprenderá a utilizar Razor y código C# para obtener la entrada del usuario en un formulario. Agregará un cuadro de búsqueda a la página Películas para que pueda encontrar películas por título o género.

Lista completa de la página Películas

@{
    var db = Database.Open("WebPagesMovies");
    var selectedData = db.Query("SELECT * FROM Movies");
    var grid = new WebGrid(source: selectedData, rowsPerPage: 3);
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Movies</title>
        <style type="text/css">
          .grid { margin: 4px; border-collapse: collapse; width: 600px; }
          .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
          .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
          .alt { background-color: #E8E8E8; color: #000; }
        </style>
    </head>
    <body>
        <h1>Movies</h1>
        <div>
            @grid.GetHtml(
                tableStyle: "grid",
                headerStyle: "head",
                alternatingRowStyle: "alt",
                columns: grid.Columns(
                    grid.Column("Title"),
                    grid.Column("Genre"),
                    grid.Column("Year")
                )
            )
        </div>
    </body>
</html>

Recursos adicionales

• Introducción a la programación web ASP.NET utilizando la sintaxis Razor

AnteriorSiguiente