Tutorial: Crear un control GridView anidado

  • Artículo

Actualización: noviembre 2007

El control GridView muestra filas de datos en una cuadrícula (una tabla HTML), con una fila de datos por cada fila de la cuadrícula. En este tutorial se describe cómo extender la funcionalidad del control GridView para que las filas individuales de la cuadrícula muestren los datos de una tabla de datos relacionada. En el tutorial, verá los datos relacionados en un control GridView anidado: un control GridView dentro de la fila de la cuadrícula del control GridView primario.

Un ejemplo de datos anidados sería un control GridView que muestra una lista de clientes, donde cada fila del control GridView incluye otro control GridView que muestra los pedidos de ese cliente.

En este tutorial, ambos controles GridView usan controles SqlDataSource para recuperar los datos del origen de datos.

Durante este tutorial aprenderá a hacer lo siguiente:

  • Establecer conexión con una base de datos de SQL Server en Microsoft Visual Web Developer.

  • Utilizar el control SqlDataSource para administrar el acceso y el enlace de datos.

  • Mostrar los datos devueltos de la base de datos en el control GridView.

  • Crear un TemplateField con controles anidados que mostrará el control GridView.

  • Personalizar dinámicamente la presentación de cada fila basándose en condiciones del motor en tiempo de ejecución.

  • Opcionalmente, utilizar el almacenamiento de datos en memoria caché con el control SqlDataSource para reducir las peticiones que se hacen a la base de datos.

Requisitos previos

Para poder completar este tutorial, necesitará:

  • Visual Web Developer (Visual Studio).

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

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

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

Crear el sitio Web

Si ya ha creado un sitio web en Visual Web Developer tras 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 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, haga clic en Sitio Web ASP.NET.

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

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

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

  6. Haga clic en Aceptar.

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

Agregar un origen de datos al control GridView

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 Northwind de SQL Server.

  • Un control en la página para mostrar los datos.

En el procedimiento siguiente, mostrará los datos de un control GridView. El control GridView obtendrá sus datos del control SqlDataSource.

Para agregar un origen de datos al control GridView

  1. Abra o cambie a la página Default.aspx.

  2. Cambie a la vista Diseño.

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

    Si no aparece la etiqueta inteligente Tareas de SqlDataSource, haga clic con el botón secundario en el control SqlDataSource y haga clic en Mostrar etiqueta inteligente.

  4. En el menú Tareas de SqlDataSource, haga clic en Configurar origen de datos.

    Aparecerá el asistente Configurar origen de datos.

  5. 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 el cuadro de diálogo Elegir origen de datos en lugar del cuadro de diálogo Propiedades de la conexión, en la lista Origen de datos, seleccione el tipo de origen de datos que desea utilizar. En 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, a continuación, haga clic en Continuar.

  6. En la página Agregar conexión, en el cuadro de texto Nombre de servidor, escriba el nombre del servidor de SQL en el que está instalada la base de datos Northwind.

  7. En la sección Conexión con el servidor, seleccione la opción adecuada para tener acceso a la base de datos de SQL Server en ejecución (seguridad integrada o Id. y contraseña específicos). Si lo necesita, escriba un nombre de usuario y una contraseña.

  8. Si escribe una contraseña, active la casilla Guardar mi contraseña.

  9. Haga clic en Seleccionar o escribir nombre de base de datos y escriba Northwind.

  10. Haga clic en Probar conexión y, cuando tenga la seguridad de que funciona, haga clic en Aceptar.

  11. En el asistente Configurar origen de datos, haga clic en Siguiente.

  12. Asegúrese de que está activada la casilla Sí, guardar esta conexión como.

  13. Denomine la conexión NorthwindConnectionString y, a continuación, haga clic en Siguiente.

  14. En el paso del asistente Configurar la instrucción Select, seleccione Especificar columnas de una tabla o vista.

  15. En el cuadro de lista Nombre, seleccione Customers.

  16. En el panel Columnas, seleccione las columnas CustomerID y CompanyName.

  17. Haga clic en Siguiente.

  18. Haga clic en Finalizar.

Agregar un control GridView para mostrar datos

Una vez establecido un origen de datos para recuperar los datos, debe agregar un control a la página para mostrar los datos.

En el procedimiento siguiente, mostrará los datos de un control GridView. El control GridView obtendrá los datos del control SqlDataSource agregado anteriormente.

Para agregar y configurar un control GridView que permita mostrar datos

  1. Asegúrese de que está en la vista Diseño de la página Default.aspx.

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

  3. En el menú Tareas de GridView, en el cuadro de lista Elegir origen de datos, seleccione el control SqlDataSource agregado previamente, SqlDataSource1.

  4. Active la casilla Habilitar paginación.

  5. En la ventana Propiedades, expanda la propiedad RowStyle para el control GridView y, a continuación, establezca la propiedad VerticalAlign en Top. Se alineará el texto en la fila de la cuadrícula en la parte superior de las celdas, porque la cuadrícula anidada mostrará varias líneas.

Agregar un control GridView anidado para mostrar datos relacionados

Ahora tiene que crear un origen de datos anidado y el control GridView para mostrar datos relacionados en cada fila. Para ello, haga lo siguiente:

Para agregar y configurar un control GridView anidado que permita mostrar datos

  1. Asegúrese de que está en la vista Diseño de la página Default.aspx.

  2. Haga clic con el botón secundario en el control GridView y seleccione Mostrar etiqueta inteligente.

  3. Haga clic en Editar columnas.

    Aparece el cuadro de diálogo Campos.

  4. En el panel Campos disponibles, seleccione TemplateField y, a continuación, haga clic en Agregar.

  5. En el panel Propiedades de TemplateField, establezca HeaderText en Orders.

  6. Haga clic en Aceptar.

  7. En el menú Tareas de GridView, seleccione Editar plantillas.

  8. En el panel Modo de edición de plantillas, en el cuadro de lista Mostrar, seleccione ItemTemplate.

  9. En el Cuadro de herramientas, desde el grupo Datos arrastre un control SqlDataSource a la página, al área editable de ItemTemplate.

    Si no aparece la etiqueta inteligente Tareas de SqlDataSource, haga clic con el botón secundario en el control SqlDataSource y haga clic en Mostrar etiqueta inteligente.

  10. En la etiqueta inteligente Tareas de SqlDataSource, haga clic en Configurar origen de datos.

    Aparecerá el asistente Configurar origen de datos.

  11. En el paso Elegir la conexión de datos, seleccione la conexión NorthwindConnectionString que creó anteriormente en este tutorial y, a continuación, haga clic en Siguiente.

  12. En el paso del asistente Configurar instrucción Select, seleccione Especificar columnas de una tabla o vista.

  13. En la lista Nombre, seleccione Orders.

  14. En el panel Columnas, seleccione las columnas OrderID y OrderDate.

  15. Haga clic en WHERE para agregar un parámetro a la instrucción SELECT.

  16. En la ventana Agregar cláusula WHERE, seleccione CustomerID en el cuadro de lista Columna.

  17. Seleccione Ninguna en el cuadro de lista Origen.

  18. Haga clic en Agregar.

    Se crea un parámetro Select que establecerá en el valor CustomerID para cada fila enlazada al control GridView primario.

  19. Haga clic en Aceptar.

  20. Haga clic en Siguiente.

  21. Haga clic en Finalizar.

  22. En el Cuadro de herramientas, desde el grupo Datos arrastre un control GridView al área editable de ItemTemplate.

    Si la etiqueta inteligente Tareas de SqlDataSource no aparece, haga clic con el botón secundario del mouse en el control GridView y haga clic en Mostrar etiqueta inteligente.

  23. En la etiqueta inteligente Tareas de GridView, en el cuadro de lista Elegir origen de datos, seleccione el nombre del control SqlDataSource anidado, SqlDataSource2.

  24. Haga clic con el botón secundario del mouse en el control GridView primario, GridView1, y seleccione Mostrar etiqueta inteligente.

  25. En el panel Tareas de GridView, haga clic en Terminar edición de plantilla.

    Nota:

    El control GridView anidado no se muestra en la vista Diseño.

  26. En el panel Propiedades de GridView1, haga clic en el botón Eventos.

  27. En el cuadro RowDataBound, escriba GridView1_RowDataBound y, a continuación, presione ENTRAR.

    Visual Web Developer crea un controlador de eventos para el evento RowDataBound del control GridView. El código tendrá un aspecto similar al ejemplo de código siguiente.

    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

End Sub

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{

}

  28. Agregue el código siguiente al procedimiento:

    If e.Row.RowType = DataControlRowType.DataRow Then
    Dim s As SqlDataSource = CType(e.Row.FindControl("SqlDataSource2"), SqlDataSource)
    s.SelectParameters(0).DefaultValue = e.Row.Cells(0).Text
End If

    if (e.Row.RowType == DataControlRowType.DataRow)
{
    SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
    s.SelectParameters[0].DefaultValue = e.Row.Cells[0].Text;
}

    El código recupera el valor CustomerID para la fila actual y lo establece como el valor del parámetro Select para el control SqlDataSource anidado, SqlDataSource2.

  29. Guarde los cambios en los archivos.

Probar la página

Ahora puede ejecutar la página.

Para probar la página

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

    El control GridView muestra las filas de datos en la tabla Customers de Northwind con datos de la tabla Orders de Northwind para cada cliente anidado en cada fila.

  2. Cierre el explorador.

Utilizar el almacenamiento en memoria caché con un control GridView anidado

En este punto del tutorial, ha creado una página con controles GridView anidados. Tal como está escrito, la página consulta la base de datos una vez para el control GridView primario y otra vez para cada control GridView anidado.

Para reducir la carga de la base de datos, puede modificar la consulta anidada para devolver todas las filas, almacenar en memoria caché los resultados y, a continuación, filtrar los resultados para cada control GridView anidado.

Nota:

Cuando las bases de datos son grandes, esta solución no es práctica. Si está recuperando los datos de una base de datos grande, genere un objeto de datos que recupere sólo las filas necesarias y enlácelo utilizando el control ObjectDataSource. Para obtener más información, consulte Información general sobre el control de servidor web ObjectDataSource.

Para configurar un control SqlDataSource anidado para almacenar en memoria caché los resultados de la consulta

  1. Asegúrese de que está en el modo Diseño de la página Default.aspx.

  2. Haga clic con el botón secundario en el control GridView primario, GridView1, y, a continuación, haga clic en Editar plantilla.

  3. En ItemTemplate para la columna Orders, seleccione el control SqlDataSource anidado, SqlDataSource2.

  4. En la ventana Propiedades, establezca la propiedad EnableCaching en true.

  5. Establezca la propiedad FilterExpression en CustomerID='{0}'.

  6. En la propiedad FilterParameters, haga clic en el botón de puntos suspensivos para abrir la ventana Editor de la colección de parámetros.

  7. En la ventana Editor de la colección de parámetros, haga clic en Agregar parámetro.

  8. En el cuadro Nombre, escriba CustomerID.

  9. Haga clic en Aceptar.

  10. Haga clic con el botón secundario en el control SqlDataSource anidado, SqlDataSource2, y seleccione Mostrar etiqueta inteligente.

  11. Haga clic en Configurar origen de datos.

  12. Deje la información de conexión sin modificar y haga clic en Siguiente.

  13. En el paso Configurar instrucción Select, seleccione Especificar columnas de una tabla o vista.

  14. En el cuadro de lista Nombre, seleccione Orders.

  15. En la sección Columnas, compruebe las columnas OrderID, CustomerID y OrderDate y, a continuación, haga clic en Siguiente.

  16. Haga clic en Finalizar.

  17. Cuando se le solicite actualizar los campos y las claves en el control GridView anidado, GridView2, haga clic en No.

    Las columnas mostradas por el control GridView anidado no cambiarán.

    Ha configurado el control SqlDataSource anidado, SqlDataSource2, para recuperar todos los datos de pedidos de la base de datos y almacenarlos localmente en memoria caché. Cuando el control GridView anidado se enlaza a los datos, se aplica un filtro para que sólo se muestren los pedidos relacionados con el valor CustomerID para la fila actual.

  18. Si se utiliza una página de código subyacente, haga clic con el botón secundario en un área en blanco en la página y, a continuación, haga clic en Ver código.

  19. Cambie el código para que el controlador de eventos RowDataBound se lea como sigue:

    If e.Row.RowType = DataControlRowType.DataRow Then
    Dim s As SqlDataSource = CType(e.Row.FindControl("SqlDataSource2"), SqlDataSource)
    s.FilterParameters(0).DefaultValue = e.Row.Cells(0).Text
End If

    if (e.Row.RowType == DataControlRowType.DataRow)
{
    SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
    s.FilterParameters[0].DefaultValue = e.Row.Cells[0].Text;
}

    En esta versión del código, en lugar de establecer un valor en la colección SelectParameters del control SqlDataSource, establecerá un valor en su colección FilterParameters.

  20. Guarde el archivo.

Probar la página

Ahora puede ejecutar la página.

Para probar la página

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

    El control GridView muestra las filas de datos en la tabla Customers de Northwind con datos de la tabla Orders de Northwind para cada cliente anidado en cada fila. Sin embargo, todos los datos enlazados al control GridView se solicitarán una vez, cuando la primera fila esté enlazada a datos. Los datos se almacenan en memoria caché para su uso con las filas restantes del control GridView.

  2. Cierre el explorador.

Pasos siguientes

En este tutorial se ha descrito cómo extender la funcionalidad del control GridView para mostrar los datos relacionados utilizando los controles GridView anidados en una página Web ASP.NET. También puede extender su aplicación para permitir la actualización y la eliminación de datos, o para permitir a los usuarios insertar los nuevos registros utilizando un control DetailsView o FormView. También podría utilizar otros controles distintos al control TextBox, como un control DropDownList, para cambiar un valor. Para obtener más información, vea los temas siguientes:

Vea también

Tareas

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

Tutorial: Mostrar una lista desplegable mientras se edita en el control de servidor Web GridView

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