Tutorial: Crear páginas Web principal-detalle en Visual Studio
Actualización: noviembre 2007
En muchas páginas Web los datos se muestran de más de una manera, mostrando a menudo los datos de las tablas relacionadas. En este tutorial se muestran las distintas maneras de trabajar con datos en varios controles y de varias tablas, incluidos los que tienen una relación principal-detalle. Las tareas ilustradas en este tutorial incluyen:
Rellenar una lista desplegable con datos de la base de datos.
Crear filtros: instrucciones SQL con una cláusula WHERE (consultas parametrizadas).
Mostrar datos filtrados en función de la selección del usuario en una lista desplegable.
Mostrar detalles sobre un registro seleccionado utilizando el control DetailsView.
Seleccionar un registro de una página y mostrar un registro relacionado de otra página.
Requisitos previos
Para poder completar este tutorial, necesitará:
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.
.gif "Nota")
Nota:Si necesita información sobre cómo iniciar sesión en el equipo en 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ás tenga que actualizar la versión de MDAC instalada en el equipo. Para obtener más información, vea el artículo "Microsoft Data Access Components (MDAC) Installation" en MSDN Library.
Crear el sitio Web
Si ya ha creado un sitio Web en Visual Web Developer (por ejemplo, mediante los pasos descritos en Tutorial: Crear una página Web básica en Visual Web Developer o en Tutorial: Acceso a datos básico en páginas Web), puede utilizar ese sitio Web y pasar a la siguiente sección referente a la conexión con SQL Server. En caso contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.
Para crear un sitio Web del sistema de archivos
Abra Visual Web Developer.
En el menú Archivo, haga clic en Nuevositio Web.
Aparece el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET.
En el cuadro Ubicación, escriba el nombre de la carpeta dónde desea conservar las páginas de su sitio Web.
Por ejemplo, escriba el nombre de carpeta C:\WebSites.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Haga clic en Aceptar.
Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.
Conectar a SQL Server
Para trabajar con datos, necesita establecer una conexión a una base de datos. En este tutorial, creará una conexión, que es un proceso independiente del trabajo con páginas o controles Web.
Para crear una conexión con SQL Server
Presione CTRL+ALT+S para mostrar el Explorador de base de datos. En el Explorador de base de datos, haga clic con el botón secundario en Conexiones de datos y elija Agregar conexión.
Se muestra el cuadro de diálogo Cambiar origen de datos.
En el cuadro de diálogo Cambiar origen de datos, seleccione Microsoft SQL Server y haga clic en Aceptar.
En el cuadro de diálogo Agregar conexión, realice lo siguiente:
Especifique o seleccione el nombre del servidor SQL Server. Para un servidor ubicado en su equipo, escriba (local).
Seleccione Utilizar autenticación de SQL Server.
Escriba un nombre de usuario y una contraseña.
Seleccione Guardar mi contraseña.
Seleccione Northwind como la base de datos.
Haga clic en Probar conexión y, cuando esté seguro de que funciona, haga clic en Aceptar.
La conexión se agrega al Explorador de servidores.
Utilizar una lista desplegable como elemento principal
En esta parte del tutorial, agregará una lista desplegable a una página y la rellenará con una lista de categorías de la tabla Northwind. Cuando los usuarios seleccionen una categoría, la página mostrará los productos de esa categoría.
Para crear y rellenar una lista desplegable
Abra o cambie a la página Default.aspx. Si está trabajando con un sitio Web que ya había creado, agregue o abra una página con la que pueda trabajar en este tutorial.
Cambie a la vista Diseño.
Escriba Seleccionar productos por categoría en la página y dé al texto formato de encabezado, utilizando la lista desplegable Formato del bloque que está sobre el Cuadro de herramientas.
Desde el grupo Estándar del Cuadro de herramientas, arrastre un control DropDownList a la página.
En las Tareas de DropDownList, active la casilla Habilitar AutoPostBack.
Así se configura el control de forma que la página envíe los datos al servidor cada vez que se hace una selección en la lista, en lugar de esperar a que el usuario haga clic en un botón.
En las Tareas de DropDownList, seleccione Elegir origen de datos.
Se inicia el asistente Elegir origen de datos.
En la lista Seleccionar un origen de datos , haga clic <Nuevo origen de datos>.
Aparecerá el cuadro de diálogo Asistente para la configuración de orígenes de datos.
Seleccione Base de datos.
Así se especifica que desea obtener datos de una base de datos compatible con instrucciones SQL. (Incluye SQL Server y otras bases de datos compatibles con OLE-DB.)
En el cuadro Especificar un id. para el origen de datos, aparecerá un nombre de control de origen de datos predeterminado (SqlDataSource1). Puede dejar este nombre.
Haga clic en Aceptar.
El asistente muestra la página Configurar origen de datos - SqlDataSource1 en la que puede seleccionar una conexión de datos.
En la lista desplegable, seleccione la conexión Northwind que creó anteriormente en el tutorial.
Haga clic en Siguiente.
El asistente muestra una página donde se puede almacenar, si se desea, la cadena de conexión en el archivo de configuración.
No olvide activar 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 se puede especificar los datos que se desea recuperar de la base de datos.
De la lista Nombre de Opciones de tabla o vista, seleccione Categories.
En el cuadro Columnas, seleccione CategoryID y CategoryName.
Haga clic en Siguiente.
Haga clic en Consulta de prueba para asegurarse de que obtiene los datos que desea.
Haga clic en Finalizar.
Se muestra el Asistente para la configuración de orígenes de datos, con el nombre del control de origen de datos ha configurado.
En la lista Seleccionar un campo de datos para mostrar en la lista desplegable, seleccione CategoryName.
Nota:Si no aparece ningún elemento en la lista, haga clic en el vínculo Actualizar esquema.
Esto especifica que el valor del campo CategoryName se mostrará como texto del elemento en la lista desplegable.
En la lista Seleccionar un campo de datos para el valor de la lista desplegable, seleccione CategoryID.
Esto especifica que cuando se selecciona un elemento, el campo CategoryID se devolverá como el valor del elemento.
Haga clic en Aceptar.
Antes de continuar, pruebe la lista desplegable.
Para probar la lista desplegable
Presione CTRL+F5 para ejecutar la página.
Cuando se muestre la página, examine la lista desplegable.
Seleccione una categoría para estar seguro de que la lista realiza una devolución de datos.
Ahora puede mostrar los productos de la categoría seleccionada en la lista desplegable.
Utilizar una cuadrícula para mostrar información de detalle
A continuación, puede ampliar la página para que incluya una cuadrícula. Cuando los usuarios realicen una selección en la lista desplegable de categorías, en la cuadrícula se mostrarán los productos de dicha categoría.
Para utilizar una cuadrícula para mostrar información de detalle
Cambie a la página Default.aspx o ábrala (o la página con la que ha estado trabajando) y cambie a la vista Diseño.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control GridView a la página.
En el menú Tareas de GridView, seleccione <Nuevo origen de datos> en la lista Elegir origen de datos.
Se abrirá el Asistente para la configuración de orígenes de datos.
Seleccione Base de datos.
En el cuadro Especificar un id. para el origen de datos, aparecerá un nombre de control de origen de datos predeterminado (SqlDataSource2). Puede dejar este nombre.
Haga clic en Aceptar.
El asistente muestra una página donde puede seleccionar una conexión.
En la lista desplegable de conexiones, seleccione la conexión que creó y almacenó anteriormente en el tutorial (NorthwindConnectionString).
Haga clic en Siguiente.
El asistente muestra la página Configurar origen de datos - SqlDataSource2, en la que puede crear una instrucción SQL.
En la lista Nombre, seleccione Productos.
En el cuadro Columnas, seleccione ProductID, ProductName y CategoryID.
Haga clic en WHERE.
Aparecerá el cuadro de diálogo Agregar cláusula WHERE.
En la lista Columna, seleccione CategoryID.
En la lista Operador, seleccione =.
En la lista Origen, seleccione Control.
En Propiedades del parámetro, en la lista Id. de control, seleccione DropDownList1.
Con los últimos dos pasos se especifica que la consulta obtendrá el valor de búsqueda del Id. de categoría del control DropDownList que agregó anteriormente.
Haga clic en Agregar.
Haga clic en Aceptar para cerrar el cuadro de diálogo Agregar cláusula WHERE.
Haga clic en Siguiente.
En la Vista previa, haga clic en Consulta de prueba.
El asistente muestra un cuadro de diálogo en el que se le pide que especifique un valor que se utilizará en la cláusula WHERE.
Escriba 4 en el cuadro y haga clic en Aceptar.
Se muestran los registros de los productos de la categoría 4.
Haga clic en Finalizar para cerrar el asistente.
A continuación, puede probar la presentación de principal-detalle.
Para probar la página
Presione CTRL+F5 para ejecutar la página.
Cuando aparezca la página, se mostrarán los productos del primer elemento en la lista desplegable.
Seleccione una categoría de la lista y compruebe que los productos correspondientes aparecen en la cuadrícula.
Mostrar datos de principal-detalle en la misma página
En esta parte del tutorial, los datos de tablas relacionadas se mostrarán en una página. Los datos de la tabla principal se muestran en una cuadrícula donde los usuarios pueden seleccionar cada una de las filas. Al hacerlo, se muestran uno o varios registros de detalle en un control de desplazamiento que está en otra parte de la página. Para que sirva de ejemplo, utilizará la tabla de categorías de Northwind como tabla principal y la tabla de productos como tabla de detalles.
Para mostrar los registros principales
Agregue una nueva página al sitio Web y denomínela MasterDetails2.aspxa.
Cambie a la vista Diseño.
Escriba Página de principal-detalle en la página y dé al texto formato de encabezado.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control GridView a la página.
En el menú Tareas de GridView, en la lista Elegir origen de datos, haga clic en <Nuevo origen de datos> y, a continuación, siga estos pasos para configurar un origen para el control GridView:
Seleccione Base de datos.
Haga clic en Aceptar.
En la lista desplegable de conexiones, seleccione la conexión que creó y almacenó anteriormente en el tutorial (NorthwindConnectionString).
Haga clic en Siguiente.
En la lista Nombre, seleccione Categorías.
En el cuadro Columnas, seleccione CategoryID y CategoryName.
Haga clic en Siguiente y, a continuación, en Finalizar.
Seleccione el control GridView y, en el menú Tareas de GridView, elija Editar columnas.
Se muestra el cuadro de diálogo Campos.
En Campos disponibles, abra el nodo Campo de comando, elija Seleccionar y, a continuación, haga clic en Agregar para agregarlo a la lista Campos seleccionados.
En la lista Campos seleccionados, elija Seleccionar y, a continuación, en la cuadrícula de la propiedad CommandField, establezca su propiedad SelectText en Detalles.
Haga clic en Aceptar para cerrar el cuadro de diálogo Campos.
Se agrega a la cuadrícula una nueva columna con el hipervínculo Detalles.
Seleccione el control GridView y, en la ventana Propiedades, asegúrese de que la propiedad DataKeyNames está establecida en CategoryID.
Así se especifica que al seleccionar una fila de la cuadrícula, ASP.NET puede buscar en una ubicación conocida la clave del registro que se muestra actualmente en categorías .
La cuadrícula le permite seleccionar una sola categoría. El paso siguiente es agregar el control DetailsView que mostrará los registros de detalle, es decir, los productos asociados a la categoría seleccionada. El control DetailsView utilizará otra consulta SQL para obtener sus datos, por lo que requiere un segundo control de origen de datos.
Para configurar una consulta para mostrar los registros relacionados
Presione ENTRAR para tener espacio debajo del control SqlDataSource1 en la página MasterDetails2.aspx en la vista Detalles.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control DetailsView a la página.
Configúrelo para que utilice otro control de origen de datos, mediante los pasos siguientes:
En la lista Elegir origen de datos, seleccione <Nuevo origen de datos>.
Seleccione Base de datos.
Haga clic en Aceptar.
En la lista desplegable de conexiones, haga clic en la conexión que creó y almacenó anteriormente en el tutorial.
Haga clic en Siguiente.
En la lista Nombre de Opciones de tabla o vista, seleccione Products.
En el cuadro Columnas, seleccione ProductID, ProductName y CategoryID.
Haga clic en WHERE.
Aparecerá el cuadro de diálogo Agregar cláusula WHERE.
En la lista Columna, seleccione CategoryID.
En la lista Operador, seleccione =.
En la lista Origen, seleccione Control.
En Propiedades del parámetro, en la lista Id. de control, seleccione GridView1. La consulta para la segunda cuadrícula obtendrá su valor de parámetro de la selección realizada en la primera cuadrícula.
Haga clic en Agregar y, a continuación, haga clic en Aceptar para cerrar el cuadro de diálogo Agregar cláusula WHERE.
Haga clic en Siguiente.
En la Vista previa, haga clic en Consulta de prueba.
El asistente muestra un cuadro de diálogo en el que se le pide que especifique un valor que se utilizará en la cláusula WHERE.
Escriba 4 en el cuadro y haga clic en Aceptar.
Se muestran los registros de los productos de la categoría 4.
Haga clic en Finalizar.
En el menú Tareas de DetailsView, active Habilitar paginación.
Esto le permitirá desplazarse por cada uno de los registros de producto.
Opcionalmente, en la ventana Propiedades, abra el nodo PagerSettings y seleccione otro valor de Modo.
De manera predeterminada, se pagina por los registros haciendo clic en un número de página, pero también puede seleccionar las opciones para utilizar los vínculos anterior y siguiente.
A continuación, puede probar la combinación de la cuadrícula principal y la vista de detalles.
Para probar la página
Presione CTRL+F5 para ejecutar la página.
En la cuadrícula, seleccione una categoría.
El control DetailsView muestra un producto asociado a esa categoría.
Utilice los vínculos de paginación del control DetailsView para navegar a los otros productos de la misma categoría.
En la cuadrícula, seleccione otra categoría.
Revise los productos de esa categoría en el control DetailsView.
Mostrar datos de principal-detalle en páginas independientes
Para la parte final del tutorial, va a crear otra variante: mostrar registros principal-detalle en páginas independientes. Los registros principales se vuelven a mostrar en una cuadrícula que contiene un hipervínculo para cada registro. Cuando los usuarios hagan clic en el hipervínculo, navegarán a otra página donde pueden ver los registros de detalle en un control DetailsView que muestra el registro Products completo.
Para mostrar los registros principales
Agregue una nueva página al sitio Web y asígnele el nombre MasterCustomers.aspx.
Cambie a la vista Diseño.
Escriba Clientes en la página y dé al texto formato de encabezado.
Desde el grupo Datos del Cuadro de herramientas, arrastre un control GridView a la página.
Desde el menú Tareas de GridView del control, seleccione <Nuevo origen de datos> en la lista Elegir origen de datos y, a continuación, use el asistente para hacer lo siguiente:
Haga clic en Base de datos.
Conecte a la base de datos Northwind (conexión NorthwindConnectionString).
Recupere las columnas CustomerID, CompanyNamey City de la tabla Customers.
Opcionalmente, en el menú Tareas de GridView, active la casilla Habilitar paginación.
En el menú Tareas de GridView, elija Editar columnas.
Se muestra el cuadro de diálogo Campos.
Desactive la casilla Generar campos automáticamente .
En Campos disponibles, elija Campo de hipervínculo, haga clic en Agregar y, a continuación, establezca las propiedades siguientes:
Propiedad
Valor
Text
Detalles
DatahrefFields
CustomerID
Indica que el hipervínculo debe obtener su valor de la columna IdCliente
DatahrefFormatString
DetailsOrders.aspx?custid={0}
Crea un vínculo que está incluido en el código para navegar a la página DetailsOrders.aspx. El vínculo también pasa una variable de cadena de consulta denominada custid cuyo valor se rellenará utilizando la columna a la que se hace referencia en la propiedad DatahrefFields.
Haga clic en Aceptar para cerrar el cuadro de diálogo Campos.
A continuación, puede crear la página de detalles que acepta un valor de la página principal.
Para crear la página de detalles
Agregue una nueva página al sitio Web y asígnele el nombre DetailsOrders.aspx.
Cambie a la vista Diseño.
Escriba Pedidos en la página y dé al texto formato de encabezado.
Desde la carpeta Datos del Cuadro de herramientas, arrastre un control GridView a la página.
En el menú Tareas de GridView en el control, seleccione Tareas de GridView de la lista Elegir origen de datos
En la lista Seleccionar un tipo de origen de datos, haga clic en Base de datos y, a continuación, haga clic en Aceptar.
En la lista de conexiones, seleccione la conexión que creó y almacenó anteriormente en el tutorial (NorthwindConnectionString).
Haga clic en Siguiente.
El asistente muestra una página donde puede crear una instrucción SQL.
En la lista Nombre, seleccione Pedidos.
En el cuadro Columnas, seleccione OrderID, CustomerID y OrderDate.
Haga clic en WHERE.
En la lista Columnas, seleccione CustomerID.
En la lista Operadores, seleccione =.
En la lista Origen, seleccione QueryString.
Así se especifica que la consulta seleccionará registros en función del valor que se pasa a la página con la cadena de consulta.
En Propiedades del parámetro, en el cuadro Campo de QueryString, escriba custid.
La consulta obtendrá el valor de Id. de cliente de la cadena de consulta, que se crea al hacer clic en el vínculo Detalles de la página MasterCustomers.aspx.
Haga clic en Agregar.
Haga clic en Aceptar para cerrar el cuadro de diálogo Agregar cláusula WHERE.
Haga clic en Siguiente y, a continuación, haga clic en Finalizar para cerrar el asistente.
Desde el nodo Estándar del Cuadro de herramientas, arrastre un control Hyperlink a la página. Establezca su propiedad Text en Volver a clientes y su propiedad href en MasterCustomers.aspx.
Ahora puede probar las páginas principal-detalle relacionadas.
Para probar las páginas
Cambie a la página MasterCustomers.aspx.
Presione CTRL+F5 para ejecutar la página.
Haga clic en el vínculo Detalles de un cliente.
En el explorador se muestra la página DetailsOrders.aspx con el pedido del cliente seleccionado. Observe que la dirección URL del cuadro Dirección del explorador es:
DetailsOrder.aspx?custid=xdonde x es el identificador del cliente que seleccionó.
Haga clic en el vínculo Volver a clientes, seleccione otro cliente, y vuelva a hacer clic en el vínculo Detalles para comprobar que puede ver los pedidos de cualquier cliente.
Pasos siguientes
En este tutorial se han descrito distintas maneras de mostrar los datos de las tablas relacionadas. Todos los escenarios tienen en común lo siguiente: dependen de una consulta con parámetros y los valores de los parámetros se pueden pasar a la consulta automáticamente en tiempo de ejecución. Si lo desea, puede experimentar con otras maneras de utilizar los datos relacionados. Por ejemplo, podría:
Experimentar con parámetros que reciben sus valores de otros orígenes, como una variable Session o una cookie. Para obtener más información, vea Utilizar parámetros con controles de origen de datos.
Ampliar lo que se puede hacer con el control DetailsView de la segunda parte del tutorial. Por ejemplo, puede configurar el control para permitir a los usuarios editar los registros de detalle. Para obtener información detallada, vea Tutorial: Editar e insertar datos en páginas Web con el control de servidor Web DetailsView.