Tutorial: Ordenación simple del control de servidor Web GridView

Actualización: noviembre 2007

Puede utilizar la funcionalidad de ordenación integrada del control ASP.NET GridView para agregar ordenación por una columna única a sus datos sin escribir código.

Durante este tutorial aprenderá a:

• Habilitar la funcionalidad de ordenación integrada del control GridView.

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.

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

• 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, es posible que 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 y la página Web

Cree un sitio Web nuevo 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.

   Aparece el cuadro de diálogo Nuevo sitio Web.

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

4. En el cuadro Ubicación, seleccione Sistema de archivos y escriba el nombre de la carpeta donde desee guardar las páginas del sitio Web.

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

5. En la lista Lenguaje, haga clic en Visual Basic o en Visual C#.

6. Haga clic en Aceptar.

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

Mostrar datos en el control GridView

En esta sección, agregará un control GridView a la página y lo configurará para presentar datos de la tabla Customers de la base de datos Northwind.

Para mostrar datos en el control GridView

1. Abra o cambie al archivo Default.aspx.

2. Cambie a la vista Diseño.

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

4. En el menú Tareas de GridView, en la lista desplegable Elegirorigen de datos, haga clic en <Nuevo origen de datos>.

   Aparecerá el Asistente para la configuración de orígenes de datos.

5. Haga clic en Base de datos.

   Esto especifica que desea recibir 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.

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.

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

8. Haga clic en Nueva conexión.

   Aparecerá el cuadro de diálogo Agregar conexión.

   • Si la lista Origen de datos no muestra Microsoft SQL Server (SqlClient), haga clic en Cambiar y en el cuadro de diálogo Cambiar origen de datos, seleccione Microsoft SQL Server.

   • Si aparece la página Elegir origen de datos, en la lista Origen de datos seleccione 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.

9. En el cuadro Nombre del servidor, escriba el nombre del equipo que ejecuta SQL Server.

10. En la sección Conexión con el servidor, seleccione la opción que sea apropiada para su configuración de SQL Server (autenticación de Windows o un identificador y contraseña específicos).

11. Si se requiere, escriba un nombre de usuario y contraseña.

12. En el cuadro Seleccionar o escribir nombre de base de datos, seleccione Northwind.

13. Haga clic en el botón Probar conexión para comprobar que la conexión existe. Cuando esté seguro de que la conexión ha tenido éxito, haga clic en Aceptar.

    Volverá al Asistente para la configuración de orígenes de datos - SqlDataSource1, donde la información de conexión aparece rellenada.

14. Haga clic en Siguiente.

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

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

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

15. Compruebe 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 donde puede especificar los datos que desea recuperar de la base de datos.

16. En Especificar columnas de una tabla o vista, en la lista desplegable Nombre, seleccione Customers.

17. En Columnas, active las casillas CustomerID, CompanyName y City.

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

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

18. Haga clic en Siguiente.

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

20. Haga clic en Finalizar.

    El asistente crea un control SqlDataSource y lo agrega a la página. El control GridView 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 SelectQuery.

21. Haga clic con el botón secundario del mouse en el control GridView, haga clic en Mostrar etiqueta inteligente, y, a continuación, en el menú Tareas de GridView, haga clic en Habilitar ordenación.

    Los encabezados de columna del control GridView se cambian por vínculos.

Ya puede probar la página.

Para probar la página

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

   El control GridView se muestra con las columnas CustomerID, CompanyName y City.

2. Haga clic en un encabezado de columna para ordenar el contenido de esa columna.

3. Haga clic de nuevo en una columna para cambiar entre orden ascendente y descendente.

Pasos siguientes

Considere también la posibilidad de habilitar la ordenación de varias columnas para un control GridView. Para obtener más información, vea Ordenar los datos de un control GridView de servidor Web.

Vea también

Conceptos

Ordenar los datos de un control GridView de servidor Web

Referencia

Información general sobre GridView (Control de servidor Web)