MOSTRAR, PAGINAR Y ORDENAR DATOS CON EL CONTROL DE SERVIDOR WEB LISTVIEW

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 controlSqlDataSource 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 controlSqlDataSource.

Para mostrar y paginar los datos del 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.
   En el Explorador de soluciones, haga clic con el botón secundario en el proyecto y, a continuación, haga clic en Agregar nuevo elemento.
4. Se abrirá el cuadro de diálogo Agregar nuevo elemento.
5. En Plantillas instaladas, seleccione Visual Basic o Visual C# y, a continuación, seleccione Web Forms.
6. Escriba Sample.aspx como nombre de la nueva página web y haga clic en Agregar.
7. Cambie a la vista Diseño.
8. En la pestaña Datos del Cuadro de herramientas, arrastre un control ListView a la página.
   
9. 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.
10. 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.
11. 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.
    
12. Haga clic en Aceptar.
    Se muestra el Asistente para la configuración de orígenes de datos.
13. 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 .
14. 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.
15. 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.
16. Seleccione la opción Especificar una instrucción SQL o un procedimiento almacenado personalizado.
    
17. Haga clic en Siguiente.
18. 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ónEjecutar consulta.
19. Haga clic en Siguiente.
20. Haga clic en Consulta de prueba para asegurarse de que recupera los datos que desea.
21. 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.
22. Haga clic con el botón secundario en el control ListView y, a continuación, haga clic en Mostrar etiqueta inteligente.
23. En el menú Tareas de ListView comunes, haga clic en Configurar ListView.
    Se muestra el cuadro de diálogo Configurar ListView.
24. Seleccione Habilitar paginación.
    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.
    
25. 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 y cambie a la vista Código fuente.
2. De la pestaña Estándar del Cuadro de herramientas, arrastre dos controles Button y colóquelos después del elemento de table que está en el elementoLayoutTemplate.
3. 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.
4. Guarde la página.