Tutorial: Mostrar, paginar y ordenar datos con el control de servidor web ListView

Actualización: noviembre 2007

En este tutorial, trabajará con el control ListView, que permite mostrar datos de un origen de datos en un formato que define mediante plantillas. El trabajo con plantillas permite tener un control completo sobre el diseño y el aspecto de los datos del control. El control ListView admite automáticamente las operaciones de edición, inserción y eliminación, así como la funcionalidad de ordenación y paginación.

En el tutorial se muestran las siguientes tareas:

• Utilizar el control ListView para mostrar datos de una base de datos.

• Agregar funcionalidad de paginación al control ListView.

• Agregar funcionalidad de ordenación al control ListView.

Requisitos previos

Para poder completar este tutorial, necesitará:

• Visual Studio 2008 o Visual Web Developer 2008 Express.

• SQL Server Express Edition. Si tiene SQL Server instalado, puede usarlo, pero debe realizar pequeños ajustes en algunos procedimientos.

• La base de datos de AdventureWorks instalada en su equipo. Para obtener información sobre cómo descargar e instalar la base de datos de ejemplo de AdventureWorks de SQL Server, vea Installing Sample Databases for Express Editions en el sitio web de Microsoft SQL Server.

• Un nombre de usuario y una contraseña para una cuenta de SQL Server que tenga acceso a la base de datos AdventureWorks.

Crear el sitio Web

Si ya ha creado un sitio web (por ejemplo, al completar Tutorial: Crear una página Web básica en Visual Web Developer), puede utilizar ese sitio web e ir a la sección siguiente. De lo contrario, cree un sitio y una página Web nuevos siguiendo estos pasos.

Para crear un sitio Web de sistema de archivos

1. Abra Visual Studio 2008 o Visual Web Developer 2008 Express.

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

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

3. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET.

4. En el primer cuadro Ubicación, seleccione Sistema de archivos y, en el segundo, escriba el nombre de la carpeta donde desea conservar las páginas del sitio web.

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

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

6. Haga clic en Aceptar.

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

Mostrar y paginar los datos en el control ListView

Para mostrar datos en una página Web de ASP.NET, necesita lo siguiente:

• Una conexión con un origen de datos como una base de datos. En el procedimiento siguiente creará una conexión a la base de datos de AdventureWorks de SQL Server.

• Un control de origen de datos en la página, que interactúa con el origen de datos (la base de datos) para leer y escribir datos. En este tutorial, utilizará un control SqlDataSource que interactúa con la base de datos de AdventureWorks de SQL Server.

• Un control en la página para mostrar los datos. En el procedimiento siguiente, mostrará los datos en un control ListView, que recibe sus datos del control SqlDataSource.

Para mostrar y paginar los datos en el control ListView

1. Si el sitio web no tiene una carpeta App_Data, en el Explorador de soluciones, haga clic con el botón secundario en el proyecto, haga clic en Agregar carpeta ASP.NET y, a continuación, en App_Data.

2. En el Explorador de soluciones, haga clic con el botón secundario en la carpeta App_Data y después haga clic en Agregar elemento existente.

   Se mostrará el cuadro de diálogo Agregar elemento existente.

3. Escriba la ubicación del archivo de base de datos de AdventureWorks (AdventureWorks_Data.mdf).

   De forma predeterminada, el archivo .mdf se instala en la ruta de acceso C:\Archivos de programa\Microsoft SQL Server\MSSQL.1\MSSQL\Data\AdventureWorks_Data.mdf.

   Nota:
   Este procedimiento creará una copia del archivo de base de datos en el proyecto. El archivo de base de datos es grande. Si no resulta práctico realizar una copia de la base de datos, puede conectarse a ella con un método alternativo, como asociar directamente el archivo de base de datos. Sin embargo, el procedimiento para esto no se cubre en este tutorial.

4. Abra el archivo Default.aspx o cambie a él.

5. Cambie a la vista Diseño.

6. En la ficha Datos del Cuadro de herramientas, arrastre un control ListView a la página.

   

7. En el menú Tareas de ListView comunes, en la lista desplegable Elegirorigen de datos, haga clic en <Nuevo origen de datos…>.

   Aparece el Asistente para configuración de orígenes de datos.

8. Haga clic en Base de datos.

   Al hacerlo, especifica que desea obtener los datos de una base de datos que admite instrucciones SQL, lo que incluye SQL Server y otras bases de datos compatibles con OLE-DB.

9. En el cuadro Especificar un id. para el origen de datos, aparece un nombre de control de origen de datos predeterminado, SqlDataSource1. Puede dejar este nombre.

   

10. Haga clic en Aceptar.

    Se muestra el Asistente para la configuración de orígenes de datos.

11. En la lista ¿Qué conexión de datos debería utilizar la aplicación para conectarse a la base de datos?, seleccione AdventureWorks_Data.mdf .

12. Haga clic en Siguiente.

    El asistente muestra una página donde puede especificar que desea almacenar la cadena de conexión en el archivo de configuración. Si se almacena la cadena de conexión en el archivo de configuración, se tienen dos ventajas:

    • Puede resultar más seguro que almacenarla en la página.

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

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

    El asistente muestra una página en la que puede especificar los datos que desea obtener de la base de datos.

14. Seleccione la opción Especificar una instrucción SQL o un procedimiento almacenado personalizado.

    

    Nota:
    Normalmente, utilizaría la opción Especificar columnas de una tabla o vista. Sin embargo, dado que la base de datos de AdventureWorks tiene nombres de esquema, en este tutorial creará una instrucción SQL personalizada.

15. Haga clic en Siguiente.

16. En la página Definir instrucciones o procedimientos almacenados personalizados, escriba la consulta SQL siguiente, que recupera datos de contacto de la base de datos de AdventureWorks.

    SELECT  ContactID, FirstName, LastName, EmailAddress
    FROM    Person.Contact
    

    Puede hacer clic también en Generador de consultas y utilizar la ventana Generador de consultas para crear una consulta y a continuación, validarla con el botón Ejecutar consulta.

    Nota:
    El asistente le permite especificar criterios de selección (cláusulas WHERE) y otras opciones de consulta SQL. En este tutorial, creará una instrucción sencilla sin criterios de selección u ordenación.

17. Haga clic en Siguiente.

18. Haga clic en Consulta de prueba para asegurarse de que recupera los datos que desea.

19. Haga clic en Finalizar.

    El asistente crea un control SqlDataSource y lo agrega a la página. El control ListView que agregó anteriormente se enlaza al control SqlDataSource.

    Si observa las propiedades del control SqlDataSource, verá que el asistente ha creado valores para las propiedades ConnectionString y SelectCommand.

20. Haga clic con el botón secundario en el control ListView y, a continuación, haga clic en Mostrar etiqueta inteligente.

21. En el menú Tareas de ListView comunes, haga clic en Configurar ListView.

    Se muestra el cuadro de diálogo Configurar ListView.

22. Seleccione Habilitar paginación.

    Nota:
    También puede seleccionar un estilo diferente, lo que puede hacer que resulte más sencillo ver los datos. Para ello, en Seleccionar un estilo, seleccione un estilo como Multicolor.

    El asistente crea las plantillas para el control ListView, basándose en las columnas de la consulta. Puede personalizar el diseño mediante la modificación de las plantillas que contienen los elementos de diseño, los controles y las expresiones de enlace.

    

23. Haga clic en Aceptar.

    

Antes de continuar, puede probar el control ListView.

Para probar el control ListView

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

   El control ListView se muestra con las columnas ContactID, FirstName, LastNamey EmailAddress.

2. Haga clic en los botones First, Previous, Next y Last en la parte inferior de la página para paginar los datos.

3. Cuando finalice, cierre el explorador.

Agregar la función de ordenación al control ListView

Ahora agregará la función de ordenación al control ListView. Puede proporcionar esta función si agrega un botón al control ListView y configura el botón.

Para agregar la función de ordenación al control ListView

1. En el archivo Default.aspx, haga clic con el botón secundario en el control ListView y, a continuación, haga clic en Mostrar etiqueta inteligente.

2. En el menú Tareas de ListView comunes, en la lista Vista actual, seleccione una vista para modificar la plantilla de LayoutTemplate, como ItemTemplate.

   Nota:
   No hay una vista específica para editar la plantilla de LayoutTemplate. Puede modificarla en cualquier de las vistas que se muestran en la lista Vista actual, excepto en Vista en tiempo de ejecución y en EmptyDataTemplate.

3. En la ficha Estándar del Cuadro de herramientas, arrastre dos controles Button hacia la parte inferior del control, donde se encuentran los controles de paginación.

4. En la ventana Propiedades, cambie las propiedades de los botones como sigue:

   • Para el primer botón, establezca la propiedad Text en "Sort by First Name", la propiedad CommandName en "Sort" y CommandArgument en "FirstName".

   • En el segundo botón, establezca la propiedad Text en "Sort by Last Name", la propiedad CommandName en "Sort" y CommandArgument en "LastName".

   Las propiedades CommandArgument del botón se establecen en una expresión de ordenación. En los datos de la base de datos, éste es normalmente el nombre de una columna.

5. Guarde la página.

Ahora ya puede probar de nuevo la página.

Para probar la ordenación

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

2. Haga clic en los botones Sort by First Name y Sort by Last Name para ordenar los datos de maneras diferentes.

3. Haga clic repetidamente en un botón para cambiar entre el orden ascendente y descendente.

Pasos siguientes

Este tutorial le ha mostrado los pasos básicos para utilizar un control ListView que muestra, pagina y ordena registros de datos con uno de los diseños que se proporcionan para el control. Puede experimentar con características adicionales del control ListView y explorar escenarios diferentes. Por ejemplo, puede modificar, eliminar e insertar registros. Para obtener más información, consulte Tutorial: Modificar datos con el control de servidor web ListView.

Vea también

Tareas

Cómo: Proteger cadenas de conexión al utilizar controles de origen de datos

Tutorial: Acceso a datos básico en páginas Web

Conceptos

Información general sobre el control de servidor web ListView