Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
En este tutorial implementaremos este patrón mediante gridView para enumerar los proveedores de la base de datos. Cada fila de proveedor de GridView contendrá un vínculo Ver productos que, cuando se haga clic, llevará al usuario a una página independiente que muestre esos productos para el proveedor seleccionado.
Introducción
En los dos tutoriales anteriores vimos cómo mostrar informes maestros y detalles en una sola página web mediante DropDownLists para mostrar los registros "maestros" y un control GridView o DetailsView para mostrar los "detalles". Otro patrón común que se usa para los informes de maestros y detalles es tener los registros maestros en una página web y los detalles que se muestran en otro. Un sitio web de foro, como los foros de ASP.NET, es un excelente ejemplo de este patrón en la práctica. Los foros de ASP.NET se componen de diversos foros de introducción, formularios web, controles de presentación de datos, etc. Cada foro se compone de muchos hilos y cada hilo se compone de una serie de mensajes. En la página principal de los foros de ASP.NET, se muestran los foros. Al hacer clic en un foro, se le lleva a una ShowForum.aspx página que enumera los hilos de ese foro. Del mismo modo, al hacer clic en un subproceso se le lleva a ShowPost.aspx, que muestra las publicaciones del subproceso en el que se hizo clic.
En este tutorial implementaremos este patrón mediante gridView para enumerar los proveedores de la base de datos. Cada fila de proveedor de GridView contendrá un vínculo Ver productos que, cuando se haga clic, llevará al usuario a una página independiente que muestre esos productos para el proveedor seleccionado.
Paso 1: AgregarSupplierListMaster.aspxyProductsForSupplierDetails.aspxpáginas a laFilteringcarpeta
Al definir el diseño de página en el tercer tutorial, agregamos una serie de páginas de inicio en las carpetas BasicReporting, Filtering y CustomFormatting. Sin embargo, no agregamos una página de inicio para este tutorial en ese momento, así que dedique un momento a agregar dos páginas nuevas a la Filtering carpeta: SupplierListMaster.aspx y ProductsForSupplierDetails.aspx.
SupplierListMaster.aspx mostrará los registros "maestros" (los proveedores) mientras ProductsForSupplierDetails.aspx mostrará los productos para el proveedor seleccionado.
Al crear estas dos páginas nuevas, asegúrese de asociarlas a la Site.master página maestra.
Figura 1: Agregar las SupplierListMaster.aspx páginas y ProductsForSupplierDetails.aspx a la Filtering carpeta
Además, al agregar nuevas páginas al proyecto, asegúrese de actualizar el archivo de mapa del sitio, , Web.sitemapen consecuencia. Para este tutorial, basta con agregar la SupplierListMaster.aspx página al mapa del sitio mediante el siguiente contenido XML como elemento secundario del elemento Filtering Reports <siteMapNode> :
<siteMapNode url="~/Filtering/SupplierListMaster.aspx"
title="Master/Detail Across Two Pages"
description="Master records on one page, detail records on another."
/>
Nota:
Puede ayudar a automatizar el proceso de actualización del archivo de mapa del sitio al agregar nuevas páginas de ASP.NET utilizando la herramienta gratuita Visual Studio Site Map Macro de K. Scott Allen.
Paso 2: Mostrar la lista de proveedores enSupplierListMaster.aspx
Con las páginas SupplierListMaster.aspx y ProductsForSupplierDetails.aspx creadas, nuestro siguiente paso es crear el GridView de proveedores en SupplierListMaster.aspx. Agregue una clase GridView a la página y enlazarla a un nuevo ObjectDataSource. Este ObjectDataSource debe usar el método SuppliersBLL de la clase GetSuppliers() para devolver todos los proveedores.
Figura 2: Seleccionar la clase (SuppliersBLL imagen de tamaño completo)
Figura 3: Configurar objectDataSource para usar el método (GetSuppliers() imagen de tamaño completo)
Es necesario incluir un vínculo titulado Ver productos en cada fila de GridView que, al hacer clic, dirige al usuario a ProductsForSupplierDetails.aspx pasando el valor de SupplierID de la fila seleccionada a través de la cadena de consulta. Por ejemplo, si el usuario hace clic en el enlace Ver productos para el proveedor de Tokyo Traders (que tiene un valor de SupplierID de 4), deberán ser llevados a ProductsForSupplierDetails.aspx?SupplierID=4.
Para ello, agregue un HyperLinkField a GridView, que agrega un hipervínculo a cada fila de GridView. Para empezar, haga clic en el vínculo Editar columnas desde la etiqueta inteligente de GridView. A continuación, seleccione HyperLinkField en la lista de la parte superior izquierda y haga clic en Agregar para incluir HyperLinkField en la lista de campos de GridView.
Figura 4: Agregar un HyperLinkField a GridView (haga clic para ver la imagen de tamaño completo)
HyperLinkField se puede configurar para usar los mismos valores de texto o dirección URL que el vínculo en cada fila del GridView, o puede basar estos en los datos vinculados a cada fila particular. Para especificar un valor estático en todas las filas, use las propiedades Text o NavigateUrl de HyperLinkField. Puesto que queremos que el texto del vínculo sea el mismo para todas las filas, establezca la propiedad Text de HyperLinkField a Ver productos.
Figura 5: Establecer la propiedad de Text HyperLinkField como Ver productos (haga clic aquí para ver la imagen en tamaño completo)
Para establecer los valores de texto o dirección URL que se basarán en los datos subyacentes enlazados a la fila GridView, especifique los campos de datos de los que deben extraerse los valores de texto o dirección URL en las DataTextField propiedades o DataNavigateUrlFields .
DataTextField solo se puede establecer en un único campo de datos; DataNavigateUrlFieldsSin embargo, se puede establecer en una lista delimitada por comas de campos de datos. Con frecuencia, es necesario basar el texto o la dirección URL en una combinación del valor del campo de datos de la fila actual y algún marcado estático. En este tutorial, por ejemplo, queremos que la dirección URL de los vínculos de HyperLinkField sea ProductsForSupplierDetails.aspx?SupplierID=supplierID, donde supplierID es el valor de cada fila de SupplierID GridView. Tenga en cuenta que necesitamos valores estáticos y controlados por datos aquí: la ProductsForSupplierDetails.aspx?SupplierID= parte de la dirección URL del vínculo es estática, mientras que la supplierID parte está controlada por datos, ya que su valor es el propio SupplierID valor de cada fila.
Para indicar una combinación de valores estáticos y controlados por datos, use las DataTextFormatString propiedades y DataNavigateUrlFormatString . En estas propiedades, escriba el marcado estático según sea necesario y, a continuación, use el marcador {0} donde desea que aparezca el valor del campo especificado en las DataTextField propiedades o DataNavigateUrlFields . Si la DataNavigateUrlFields propiedad tiene varios campos especificados, use {0} donde desea insertar el primer valor de campo, {1} para el segundo valor de campo, etc.
Para aplicar esto a nuestro tutorial, debemos establecer la propiedad DataNavigateUrlFields en SupplierID, ya que es el campo de datos cuyo valor necesitamos personalizar en cada fila, y la propiedad DataNavigateUrlFormatString en ProductsForSupplierDetails.aspx?SupplierID={0}.
Figura 6: Configurar HyperLinkField para incluir la dirección URL de vínculo adecuada basada en SupplierID (haga clic para ver la imagen de tamaño completo)
Después de agregar HyperLinkField, no dude en personalizar y reordenar los campos de GridView. El marcado siguiente muestra GridView después de haber realizado algunas personalizaciones menores a nivel de campo.
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="SupplierID"
DataSourceID="ObjectDataSource1" EnableViewState="False">
<Columns>
<asp:HyperLinkField DataNavigateUrlFields="SupplierID"
DataNavigateUrlFormatString=
"ProductsForSupplierDetails.aspx?SupplierID={0}"
Text="View Products" />
<asp:BoundField DataField="CompanyName"
HeaderText="Company" SortExpression="CompanyName" />
<asp:BoundField DataField="City" HeaderText="City"
SortExpression="City" />
<asp:BoundField DataField="Country" HeaderText="Country"
SortExpression="Country" />
</Columns>
</asp:GridView>
Dedique un momento a ver la SupplierListMaster.aspx página a través de un explorador. Como se muestra en la figura 7, la página muestra actualmente todos los proveedores, incluido un vínculo Ver productos. Al hacer clic en el vínculo Ver productos, se le llevará a ProductsForSupplierDetails.aspx, incluyendo el SupplierID del proveedor en la cadena de consulta.
Figura 7: Cada fila de proveedor contiene un vínculo Ver productos (haga clic para ver la imagen de tamaño completo)
Paso 3: Enumerar los productos del proveedor enProductsForSupplierDetails.aspx
En este momento, la página SupplierListMaster.aspx envía a los usuarios al ProductsForSupplierDetails.aspx, pasando el SupplierID del proveedor seleccionado en el querystring. El paso final del tutorial es mostrar los productos en un GridView en ProductsForSupplierDetails.aspx cuyo valor de SupplierID es igual al SupplierID pasado a través de la cadena de consulta. Para ello, agregue un GridView en la ProductsForSupplierDetails.aspx página usando un nuevo control ObjectDataSource llamado ProductsBySupplierDataSource que invoca el método GetProductsBySupplierID(supplierID) de la clase ProductsBLL.
Figura 8: Agregar un nuevo objetoDataSource denominado ProductsBySupplierDataSource (haga clic para ver la imagen de tamaño completo)
Figura 9: Seleccionar la clase (ProductsBLL imagen de tamaño completo)
Figura 10: Hacer que objectDataSource invoque el GetProductsBySupplierID(supplierID) método (haga clic para ver la imagen de tamaño completo)
El último paso del Asistente Configurar Orígenes de Datos nos pide que proporcionemos el origen del parámetro GetProductsBySupplierID(supplierID) del método supplierID. Para usar el valor de querystring, establezca el origen del parámetro en QueryString y escriba el nombre del valor de querystring que se va a usar en el cuadro de texto QueryStringField (SupplierID).
Figura 11: Rellenar el valor del parámetro de la supplierID con el valor de la SupplierID cadena de consulta (haga clic para ver la imagen en tamaño completo)
¡Eso es todo! En la figura 12 se muestra la ProductsForSupplierDetails.aspx página cuando se visita haciendo clic en el vínculo Tokio Traders desde SupplierListMaster.aspx.
Figura 12: Los productos suministrados por Tokyo Traders se muestran (haga clic para ver la imagen de tamaño completo)
Mostrar información del proveedor enProductsForSupplierDetails.aspx
Como se muestra en la figura 12, la ProductsForSupplierDetails.aspx página simplemente muestra los productos proporcionados por el SupplierID especificado en la cadena de consulta. Sin embargo, alguien enviado directamente a esta página no sabría que la figura 12 muestra los productos de Tokyo Traders. Para solucionar esto también podemos mostrar la información del proveedor en esta página.
Empiece agregando un FormView encima del GridView de los productos. Cree un nuevo control ObjectDataSource denominado SuppliersDataSource que invoque el método SuppliersBLL de la clase GetSupplierBySupplierID(supplierID).
Figura 13: Seleccionar la clase (SuppliersBLL la imagen de tamaño completo)
Figura 14: Hacer que objectDataSource invoque el GetSupplierBySupplierID(supplierID) método (haga clic para ver la imagen de tamaño completo)
Al igual que con ProductsBySupplierDataSource, haga que al parámetro supplierID se le asigne el valor de la cadena de consulta SupplierID.
Figura 15: Asignar el valor del supplierID parámetro desde el valor de la SupplierID cadena de consulta (Haga clic para ver la imagen en tamaño completo)
Al enlazar el FormView al ObjectDataSource en la vista Diseño, Visual Studio creará automáticamente el FormView ItemTemplate, InsertItemTemplate, y EditItemTemplate con controles Web Label y TextBox para cada uno de los campos de datos devueltos por el ObjectDataSource. Como solo queremos mostrar la información del proveedor, no dudes en quitar InsertItemTemplate y EditItemTemplate. A continuación, edite ItemTemplate para que muestre el nombre de la compañía del proveedor en un <h3> elemento y la dirección, ciudad, país o región y número de teléfono debajo del nombre de la compañía. Como alternativa, puede establecer manualmente el FormView DataSourceID y crear el ItemTemplate markup, como hicimos en el tutorial "Mostrando datos con ObjectDataSource".
Después de editar el marcado declarativo de FormView debe ser similar al siguiente:
<asp:FormView ID="FormView1" runat="server" DataKeyNames="SupplierID"
DataSourceID="suppliersDataSource" EnableViewState="False">
<ItemTemplate>
<h3><%# Eval("CompanyName") %></h3>
<p>
<asp:Label ID="AddressLabel" runat="server"
Text='<%# Bind("Address") %>'></asp:Label><br />
<asp:Label ID="CityLabel" runat="server"
Text='<%# Bind("City") %>'></asp:Label>,
<asp:Label ID="CountryLabel" runat="server"
Text='<%# Bind("Country") %>'></asp:Label><br />
Phone:
<asp:Label ID="PhoneLabel" runat="server"
Text='<%# Bind("Phone") %>'></asp:Label>
</p>
</ItemTemplate>
</asp:FormView>
En la figura 16 se muestra una captura de pantalla de la ProductsForSupplierDetails.aspx página después de incluir la información del proveedor detallada anteriormente.
Figura 16: La lista de productos incluye un resumen sobre el proveedor (haga clic para ver la imagen de tamaño completo)
Dando los toques finales a la interfaz deProductsForSupplierDetails.aspxusuario
Para mejorar la experiencia del usuario para este informe, hay un par de adiciones que debemos realizar en la ProductsForSupplierDetails.aspx página. Actualmente, la única forma en que un usuario puede volver desde la ProductsForSupplierDetails.aspx página a la lista de proveedores es hacer clic en el botón Atrás del explorador. Vamos a agregar un control HyperLink en la página ProductsForSupplierDetails.aspx que enlace a SupplierListMaster.aspx, proporcionando otra forma para que el usuario regrese a la lista maestra.
Figura 17: Agregar un control HyperLink para llevar al usuario de vuelta a SupplierListMaster.aspx (Haga clic para ver la imagen de tamaño completo)
Si el usuario hace clic en el vínculo Ver productos de un proveedor que no tiene ningún producto, ObjectDataSource ProductsBySupplierDataSource en ProductsForSupplierDetails.aspx no devolverá ningún resultado. GridView enlazado a ObjectDataSource no representará ningún marcado que produzca una región en blanco en la página del explorador del usuario. Para comunicar con más claridad al usuario que no hay productos asociados con el proveedor seleccionado, podemos establecer la propiedad de EmptyDataText GridView en el mensaje que queremos mostrar cuando surge tal situación. He establecido esta propiedad en "No hay productos proporcionados por este proveedor"
De forma predeterminada, todos los proveedores de la base de datos Northwinds proporcionan al menos un producto. Sin embargo, para este tutorial he modificado manualmente la Products tabla para que el proveedor Escargots Nouveaux ya no esté asociado a ningún producto. En la figura 18 se muestra la página de detalles de Escargots Nouveaux después de realizar este cambio.
Figura 18: Se informa a los usuarios de que el proveedor no proporciona ningún producto (haga clic para ver la imagen de tamaño completo)
Resumen
Aunque los informes maestros y detalles pueden mostrar los registros maestros y detallados en una sola página, en muchos sitios web se separan en dos páginas web. En este tutorial hemos visto cómo implementar este informe maestro/detalle teniendo los proveedores enumerados en gridView en la página web "maestra" y los productos asociados enumerados en la página "detalles". Cada fila de proveedor en la página web principal contenía un enlace a la página de detalles que transmitía el valor de la fila SupplierID. Estos vínculos específicos de fila se pueden agregar fácilmente mediante HyperLinkField de GridView.
En la página de detalles, se realizó la recuperación de esos productos para el proveedor especificado invocando el método de la clase ProductsBLLGetProductsBySupplierID(supplierID). El supplierID valor del parámetro se especificó mediante declaración mediante la cadena de consulta como origen del parámetro. También hemos visto cómo mostrar los detalles del proveedor en la página de detalles mediante un FormView.
Nuestro siguiente tutorial es el último sobre informes maestro-detalle. Veremos cómo mostrar una lista de productos en gridView donde cada fila tiene un botón Seleccionar. Al hacer clic en el botón Seleccionar se mostrarán los detalles del producto en un control DetailsView de la misma página.
¡Feliz programación!
Acerca del autor
Scott Mitchell, autor de siete libros de ASP/ASP.NET y fundador de 4GuysFromRolla.com, ha estado trabajando con tecnologías web de Microsoft desde 1998. Scott trabaja como consultor independiente, entrenador y escritor. Su último libro es Sams Teach Yourself ASP.NET 2.0 en 24 horas. Se puede contactar con él en mitchell@4GuysFromRolla.com.
Agradecimientos especiales a
Esta serie de tutoriales contó con la revisión de muchos revisores que fueron de gran ayuda. El revisor principal de este tutorial fue Hilton Giesenow. ¿Le interesa revisar mis próximos artículos de MSDN? Si es así, mándame un mensaje a mitchell@4GuysFromRolla.com.