Tutorial: Mostrar y dar formato a datos con el control de servidor web DataList

Actualización: noviembre 2007

Una tarea común en el desarrollo de páginas Web consiste en mostrar datos o, de hecho, en crear informes de datos. En este tutorial trabajará con el control DataList, que le permite crear diseños de forma libre para los registros que se muestren en una página Web ASP.NET.

Durante este tutorial aprenderá a:

• Agregar un control DataList y utilizar plantillas para disponer los datos que muestra el control DataList.

• Enlazar el control DataList a un origen de datos.

• Agregar un control de datos secundario y código al control DataList para mostrar los datos en una relación de principal-detalle.

Requisitos previos

Para poder completar este tutorial, necesitará:

• Microsoft Visual Web Developer (Visual Studio).

• Obtener acceso a la base de datos Northwind de SQL Server. Para obtener información sobre cómo descargar e instalar la base de datos de ejemplo Northwind de SQL Server, vea Installing Sample Databases en el sitio Web de Microsoft SQL Server.

  Nota:
  Si necesita información sobre cómo iniciar sesión en el equipo en el que se ejecuta SQL Server, póngase en contacto con el administrador del servidor.

• Microsoft Data Access Components (MDAC) versión 2.7 o posterior.

  Si utiliza Microsoft Windows XP o Windows Server 2003, ya dispone de MDAC 2.7. Sin embargo, si utiliza Microsoft Windows 2000, quizá tenga que actualizar la versión de MDAC instalada en el equipo. Para obtener más información, vea "Microsoft Data Access Components (MDAC) Installation" en MSDN Library.

Crear el sitio Web

Cree un sitio Web y una página nuevos siguiendo estos pasos.

Para crear un sitio Web del sistema de archivos

1. Abra Visual Web Developer.

2. En el menú Archivo, haga clic en Nuevo y, a continuación, haga clic en Sitio Web. Si utiliza Visual Web Developer Express, en el menú Archivo, haga clic en NuevoSitio Web.

   Se muestra el cuadro de diálogo Nuevo sitio Web.

3. En Plantillas instaladas de Visual Studio, seleccione Sitio Web de ASP.NET.

4. En el cuadro Ubicación, seleccione Sistema de archivos y escriba el nombre de la carpeta en la que desea conservar las páginas de su sitio Web.

   Por ejemplo, escriba el nombre de carpeta C:\WebSites\FormatDataList.

5. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.

   El lenguaje de programación que elija será el lenguaje predeterminado de su sitio Web, sin embargo, también puede establecer el lenguaje de programación de cada página de forma individual.

6. Haga clic en Aceptar.

   Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.

Agregar un control DataList

Para la primera parte de este tutorial, agregará un control DataList y, a continuación, configurará su origen de datos.

Para agregar y configurar un control DataList que permita mostrar datos en una cuadrícula

1. Cambie a la vista Diseño.

2. En el Cuadro de herramientas, arrastre un control DataList desde el grupo Datos hasta la página.

3. Haga clic con el botón secundario del mouse en el control DataList y, a continuación, seleccione Mostrar etiqueta inteligente.

4. En el menú Tareas de DataList, en la lista Elegir origen de datos, haga clic en Nuevo origen de datos.

   Aparecerá el asistente Configurar origen de datos.

5. Haga clic en Base de datos.

   Especifica que desea obtener datos de una base de datos compatible con instrucciones SQL. (Esto incluye a SQL Server y a otras bases de datos compatibles con OLE DB).

6. En el cuadro Especificar un id. para el origen de datos, aparecerá un nombre de control de origen de datos predeterminado (SqlDataSource1). Puede dejar ese nombre.

7. Haga clic en Aceptar.

   El asistente Configurar origen de datos muestra una página en la que puede crear una conexión.

8. Haga clic en Nueva conexión.

   • Si aparece la página Elegir origen de datos, seleccione en la lista Origen de datos el tipo de origen de datos que va a utilizar. Para este tutorial, el tipo de origen de datos es Microsoft SQL Server. En la lista Proveedor de datos, haga clic en Proveedor de datos de .NET Framework para servidor SQL Server y después haga clic en Continuar.

   Aparecerá la página Agregar conexión.

9. En la página Agregar conexión, en el cuadro de texto Nombre de servidor, escriba el nombre del equipo en el que se ejecuta la base de datos de SQL Server.

10. Por lo que respecta a las credenciales de inicio de sesión, seleccione la opción que resulte apropiada para el acceso al equipo en el que se ejecuta la base de datos de SQL Server (ya sea seguridad integrada o id. y contraseña específicos) y, si es necesario, especifique un nombre de usuario y una contraseña.

11. Active la casilla Guardar mi contraseña.

12. Haga clic en el botón Seleccionar o escribir nombre de base de datos y escriba Northwind.

13. Haga clic en Probar conexión y, cuando esté seguro de que funciona, haga clic en Aceptar.

    El asistente Configurar origen de datos aparece con la información de conexión.

14. Haga clic en Siguiente.

    El asistente Configurar origen de datos muestra una página que le permite almacenar la cadena de conexión en el archivo de configuración. Almacenar la cadena de conexión en el archivo de configuración tiene dos ventajas:

    • Es más seguro que su almacenamiento en la página.

    • Puede reutilizar la misma cadena de conexión en varias páginas.

15. Asegúrese de que está activada la casilla Sí, guardar esta conexión como y haga clic en Siguiente. Puede dejar la cadena de conexión predeterminada.

    El asistente Configurar origen de datos muestra una página donde es posible especificar los datos que se desea obtener de la base de datos.

16. Asegúrese de que está activada la opción Especificar columnas de una tabla o vista.

17. En la lista Nombre, haga clic en Categorías.

18. En Columnas, active las casillas CategoryID y CategoryName.

    El asistente Configurar origen de datos muestra en un cuadro situado en la parte inferior de la página la instrucción SQL que está creando.

    Nota:
    El asistente Configurar origen de datos le permite especificar criterios de selección (una cláusula WHERE) y otras opciones de consulta SQL. Para esta parte del tutorial creará una instrucción simple sin ninguna opción de selección ni ordenación.

19. Haga clic en Siguiente.

20. Haga clic en Consulta de prueba para asegurarse de que obtiene los datos que desea.

21. Haga clic en Finalizar.

    El asistente Configurar origen de datos se cierra y vuelve a presentarse el control SqlDataSource. Si ve las propiedades para el control SqlDataSource, podrá observar que el asistente Configurar origen de datos ha creado valores para las propiedades ConnectionString y SelectQuery. Aunque en Propiedades de Visual Web Developer se muestre la cadena de conexión completa, en la página sólo se guarda el identificador de la cadena de conexión (en este caso, NorthwindConnectionString).

Dar formato al diseño del control DataList

En este punto, tiene un control DataList en la página con un diseño predeterminado para obtener información de la tabla Categorías. La ventaja que ofrece el control DataList es que puede crear un diseño de formato libre para los datos. En esta sección trabajará con una plantilla y la configurará con texto y controles para personalizar la presentación de los datos.

Para dar formato al diseño en el control DataList

1. Haga clic con el botón secundario del mouse en el control DataList, haga clic en Editar plantilla y, a continuación, haga clic en Plantillas de elementos.

   El control DataList cambia al modo de edición de plantillas y muestra cuadros para estas plantillas:

   • ItemTemplate, que contiene el texto y los controles que se muestran de forma predeterminada en el control DataList.

   • AlternatingItemTemplate, que es una plantilla opcional en la que puede crear un diseño que se utiliza para los registros de datos alternos. Normalmente, la propiedad AlternatingItemTemplate es similar a la propiedad ItemTemplate, pero AlternatingItemTemplate utiliza un color de fondo diferente para proporcionar un efecto de bandas.

   • SelectedItemTemplate, que define el diseño para un registro de datos que se selecciona explícitamente con el clic de un botón u otro gesto. Esta plantilla suele utilizarse para proporcionar una vista ampliada de un registro de datos o como registro principal de una relación principal-detalle. Debe escribir el código que posibilite la colocación de un registro en el modo seleccionado. (No lo hará en este tutorial. Para obtener más información, vea Cómo: Permitir que los usuarios seleccionen elementos en los controles DataList de servidor Web y Tutorial: Crear páginas Web principal-detalle en Visual Studio).

   • EditItemTemplate, que define el diseño para el modo de edición de un registro de datos. Normalmente, la propiedad EditItemTemplate incluye controles que se pueden editar, como los controles TextBox y CheckBox, en los que los usuarios tienen la posibilidad de modificar el registro de datos. Debe escribir código que permita colocar un registro en el modo de edición y controlar el almacenamiento del registro cuando termina la edición. (No lo hará en este tutorial. Para obtener información acerca de cómo escribir código que permita editar registros, vea Cómo: Permitir que los usuarios editen elementos en controles DataList de servidor Web).

   De forma predeterminada, Visual Web Developer rellena la plantilla de elementos con un control Label enlazado a datos para cada columna de datos en el origen de datos. Además, Visual Web Developer genera texto estático para cada etiqueta, como título.

2. Arrastre el controlador de cambio de tamaño situado a la derecha para ensanchar el control DataList de modo que ocupe la mayor parte de la página a lo ancho.

3. Edite la plantilla de elementos para reorganizar los controles Label y crear un nuevo título de modo que el contenido de la plantilla tenga una apariencia similar a la del siguiente ejemplo de código.

   Name: [CategoryNameLabel] (ID: [CategoryIDLabel])
   

4. Haga clic en el control CategoryNameLabel. En Propiedades, expanda el nodo Fuente y, a continuación, establezca Negrita en true.

5. En la vista Diseño, en el control DataList, haga clic con el botón secundario del mouse en la barra de título, haga clic en Editar plantilla y, a continuación, haga clic en Plantilla del separador.

   La plantilla del separador le permite especificar qué texto o qué otros elementos se muestran entre los registros de datos.

6. En el Cuadro de herramientas, arrastre desde el grupo HTML un elemento Regla horizontal a la plantilla del separador.

7. En el control DataList, haga clic con el botón secundario del mouse en la barra de título y, a continuación, haga clic en Terminar edición de plantilla.

Probar el control DataList

Ahora puede probar el diseño que ha creado.

Para probar el control DataList

• Presione CTRL+F5 para ejecutar la página.

  En la página se muestra una lista de nombres de categorías e id., con una línea entre los registros.

Mostrar información relacionada dentro del control DataList

El control DataList que está utilizando actualmente muestra registros individuales de Categoría, con el diseño personalizado que definió anteriormente. Sólo ha cambiado un poco el diseño, pero puede observar que al trabajar con la plantilla puede organizar el texto y los controles, dar formato al contenido y modificar la presentación de los registros de datos de otras maneras.

El diseño puede incluir el registro actual, así como registros relacionados. En esta parte del tutorial cambiará el diseño para que en cada fila se muestre una categoría y los productos de esa categoría. De hecho, mostrará una relación de principal-detalle dentro de cada fila del control DataList. Deberá escribir fragmento de código para posibilitar este escenario.

Para que se muestre información relacionada dentro del control DataList

1. Haga clic con el botón secundario del mouse en el control DataList, haga clic en Editar plantillas y, a continuación, haga clic en Plantillas de elementos.

2. En el Cuadro de herramientas, arrastre desde el grupo Estándar un control BulletedList hasta la plantilla de elementos y después coloque el control BulletedList bajo la información de categoría.

   El control BulletedList puede mostrar la información de manera que se presente una columna de datos por elemento con viñeta.

3. Haga clic con el botón secundario del mouse en el control BulletedList y, a continuación, seleccione Mostrar etiqueta inteligente.

4. Haga clic en Elegir origen de datos.

   Creará un segundo control de origen de datos para leer los registros relacionados.

5. En el cuadro de diálogo Elegir origen de datos, en la lista Seleccionar un origen de datos, haga clic en Nuevo origen de datos.

6. Haga clic en Base de datos.

7. En el cuadro Especificar un id. para el origen de datos, escriba bulletedListDataSource.

   Aunque normalmente se deja el nombre predeterminado del origen de datos, en este caso resultará de utilidad asignar un nombre específico predecible al origen de datos, de manera que después puede referirse a él en el código.

8. Haga clic en Aceptar.

   Aparecerá el asistente Configurar origen de datos.

9. En el cuadro ¿Qué conexión de datos debería utilizar la aplicación para conectarse a la base de datos?, haga clic en el nombre de la conexión que creó anteriormente en este tutorial y, a continuación, haga clic en Siguiente.

   El asistente Configurar origen de datos muestra una página en la que puede crear una instrucción SQL.

10. En Especificar columnas de una tabla o vista, en el cuadro Nombre, haga clic en Productos.

11. En el cuadro Columnas, seleccione el cuadro ProductName.

    El control BulletedList muestra sólo una columna.

12. Haga clic en el botón WHERE.

    Aparecerá el cuadro de diálogo Agregar cláusula WHERE.

13. En la lista Columna, haga clic en CategoryID.

14. En la lista Operador, haga clic en =.

15. En la lista Origen, haga clic en Ninguno.

    Esto indica que el valor de la columna CategoryID se proporcionará en una variable.

16. Haga clic en Agregar, en Aceptar, en Siguiente y, a continuación, en Finalizar.

    La prueba de la consulta no funcionará con la variable.

17. En la lista Seleccionar un campo de datos para mostrar en la lista con viñetas, haga clic en ProductName. Haga clic en Aceptar.

18. En el control DataList, haga clic con el botón secundario del mouse en la barra de título y, a continuación, haga clic en Terminar edición de plantilla.

Escribir código para establecer el id. de categoría

La instrucción SQL que creó para el control bulletedListDataSource tiene una apariencia similar al código siguiente:

SELECT [ProductName] FROM [Products] WHERE ([CategoryID] = @CategoryID)

En tiempo de ejecución, el control DataList muestra una lista de registros de categoría, que incluye tanto el nombre de categoría como el id. de categoría. En la sección anterior agregó un control BulletedList que mostrará todos los productos de cada categoría. Cuando se muestra cada uno de los registros de una categoría, el control DataList ejecuta una consulta para obtener los productos de esa categoría, para lo que se utiliza la consulta anterior.

Para cada registro que se muestre debe proporcionar el id. de categoría a la consulta. Para ello, puede escribir un fragmento de código que obtenga el id. de categoría del registro que se muestra actualmente y después pase el id. de categoría como parámetro para la consulta en el control bulletedListDataSource.

Para escribir código que permita establecer el id. de categoría

1. Haga clic en el control DataList y, en la barra de herramientas de Propiedades, haga clic en Eventos.

2. Haga doble clic en ItemDataBound para crear un nuevo controlador de eventos para ese evento.

3. Copie en el controlador el código que se muestra a continuación.

   If e.Item.ItemType = ListItemType.Item Or _
       e.Item.ItemType = ListItemType.AlternatingItem Then
     Dim ds As SqlDataSource
     ds = CType(e.Item.FindControl("bulletedListDataSource"), _
         SqlDataSource)
     Dim categoryID As String
     categoryID = DataBinder.Eval(e.Item.DataItem, _
         "categoryid").ToString()
     ds.SelectParameters("CategoryID").DefaultValue = _
         categoryID
   End If
   

   if (e.Item.ItemType == ListItemType.Item ||
       e.Item.ItemType == ListItemType.AlternatingItem)
   {
     SqlDataSource ds;
     ds = e.Item.FindControl("bulletedListDataSource")
         as SqlDataSource;
     ds.SelectParameters["CategoryID"].DefaultValue =
         DataBinder.Eval(e.Item.DataItem,
         "categoryid").ToString();
   }
   

   Se provoca el evento ItemDataBound para cada registro de datos que se muestra, lo que le brinda la oportunidad de leer o modificar los datos. Este código realiza lo siguiente:

   1. Comprueba que el evento se está produciendo mientras se establece un enlace con un objeto ItemTemplate o AlternatingItemTemplate (y no con un objeto SeparatorTemplate u otro tipo de plantilla).

   2. Utiliza el método FindControl para obtener una referencia a la instancia del control SqlDataSource que se crea dentro de cada plantilla de elementos.

   3. Obtiene el valor de la columna de datos CategoryID mediante la evaluación de la propiedad DataItem actual.

   4. Establece la variable CategoryID de la consulta parametrizada al establecer su propiedad DefaultValue en la colección SelectParameters.

Probar el código

Ahora puede probar su código.

Para probar el código que permite establecer el id. de categoría

• Presione CTRL+F5 para ejecutar la página.

  El control DataList muestra los registros de categoría y, en cada uno de ellos, también muestra en un lista con viñetas los productos que pertenecen a esa categoría.

Pasos siguientes

En este tutorial se ha presentado un escenario simple pero completo acerca de cómo mostrar datos y darles formato con el control de servidor Web DataList. Puede crear páginas y aplicaciones controladas por datos más avanzadas por medio de las técnicas y los controles que se muestran en el tutorial. Por ejemplo, podría:

• Escribir código para que los usuarios puedan seleccionar elementos en el control de servidor Web DataList. Para obtener más información, vea Cómo: Permitir que los usuarios seleccionen elementos en los controles DataList de servidor Web.

• Crear un registro principal para una relación principal-detalle. Para obtener más información, vea Tutorial: Crear páginas Web principal-detalle en Visual Studio.

• Obtener información sobre cómo utilizar el almacenamiento en la caché de resultados en sus aplicaciones de datos para mejorar el rendimiento. Para obtener más información, vea Tutorial: Usar el almacenamiento en la caché de resultados para mejorar el rendimiento de los sitios Web.

Vea también

Tareas

Cómo: Permitir que los usuarios seleccionen elementos en los controles DataList de servidor Web

Tutorial: Crear páginas Web principal-detalle en Visual Studio

Referencia

DataList