Filtrado de maestros y detalles con un control DropDownList y un GridView (C#)

por Scott Mitchell

Descargar PDF

En este tutorial veremos cómo mostrar los registros maestros en un control DropDownList y los detalles del elemento de lista seleccionado en un GridView.

Introducción

Un tipo común de informe es el informe maestro y de detalles, el cual comienza mostrando algún conjunto de registros "maestros". Después, el usuario puede explorar en profundidad uno de los registros maestros, viendo así los "detalles" del registro maestro. Los informes maestros y de detalles son una opción ideal para visualizar relaciones uno a varios, como un informe que muestra todas las categorías, luego permite que un usuario seleccione una categoría determinada y muestra sus productos asociados. Además, los informes maestros y de detalles son útiles para mostrar información detallada de tablas especialmente "anchas" (con muchas columnas). Por ejemplo, el nivel "maestro" de un informe maestro y de detalles podría mostrar solo el nombre del producto y el precio unitario de los productos de la base de datos, y al profundizar en un producto determinado, mostraría los campos de producto adicionales (categoría, proveedor, cantidad por unidad, etc.).

Hay muchas maneras de implementar un informe maestro y de detalles. En este y en los tres tutoriales siguientes veremos una variedad de informes maestros y de detalles. En este tutorial veremos cómo mostrar los registros maestros en un control DropDownList y los detalles del elemento de lista seleccionado en un GridView. En concreto, el informe maestro y de detalles de este tutorial enumerará la información sobre categorías y productos.

Paso 1: Representación de las categorías en un control DropDownList

Nuestro informe maestro y de detalles enumerará las categorías de un control DropDownList, y los productos del elemento de lista seleccionado se mostrarán más abajo en la página de un control GridView. La primera tarea que tenemos por delante es hacer que las categorías se muestren en el control DropDownList. Abra la página FilterByDropDownList.aspx en la carpeta Filtering, arrastre un control DropDownList desde el cuadro de herramientas al diseñador de la página y establezca su propiedad ID en Categories. Después, haga clic en el vínculo Elegir origen de datos de la etiqueta inteligente de DropDownList. Se mostrará el Asistente para la configuración de orígenes de datos.

Figura 1: Especificación del origen de datos del control DropDownList (haga clic para ver la imagen a tamaño completo)

Elija agregar un nuevo elemento ObjectDataSource denominado CategoriesDataSource que invoque el método GetCategories() la clase CategoriesBLL.

Figura 2: Adición de un nuevo elemento ObjectDataSource denominado CategoriesDataSource (haga clic para ver la imagen a tamaño completo)

Figura 3: Elección del uso de la clase CategoriesBLL (haga clic para ver la imagen a tamaño completo)

Figura 4: Configuración de ObjectDataSource para usar el método GetCategories() (haga clic para ver la imagen a tamaño completo)

Después de configurar ObjectDataSource, todavía es necesario especificar qué campo de origen de datos se debe mostrar en el control DropDownList y cuál se debe asociar como el valor del elemento de lista. Establezca CategoryName como el campo para mostrar y CategoryID como el valor para cada elemento de lista.

Figura 5: Representación en DropDownList del campo CategoryName y uso de CategoryID como valor (haga clic para ver la imagen a tamaño completo)

En este punto, tenemos un control DropDownList que se rellena con los registros de la tabla Categories (todo ello en unos seis segundos). En la figura 6 se muestra nuestro progreso hasta ahora cuando se ve en un explorador.

Figura 6: Una lista desplegable enumera las categorías actuales (haga clic para ver la imagen a tamaño completo)

Paso 2: Adición del GridView de productos

El último paso de nuestro informe maestro y de detalles es enumerar los productos asociados a la categoría seleccionada. Para ello, agregue un control GridView a la página y cree un objeto ObjectDataSource denominado productsDataSource. Haga que el control productsDataSource obtenga sus datos a partir del método GetProductsByCategoryID(categoryID) de la clase ProductsBLL.

Figura 7: Selección del método GetProductsByCategoryID(categoryID) (haga clic para ver la imagen a tamaño completo)

Después de elegir este método, el asistente de ObjectDataSource nos pide el valor del parámetro categoryID del método. Para usar el valor del elemento seleccionado del DropDownList categories, establezca el origen del parámetro en Control y ControlID en Categories.

Figura 8: Establecimiento del parámetro categoryID en el valor del DropDownList Categories (haga clic para ver la imagen a tamaño completo)

Dedique un momento a comprobar nuestro progreso en un explorador. Al visitar por primera vez la página, se muestran los productos que pertenecen a la categoría seleccionada (Beverages) (tal y como se muestra en la figura 9), pero cambiar el control DropDownList no actualiza los datos. Esto se debe a que es necesario aplicar un postback para que GridView se actualice. Para ello, tenemos dos opciones (ninguna de las cuales requiere escribir código):

• Establecer la propiedad AutoPostBack del DropDownList categories en True. (Para ello, active la opción Habilitar AutoPostBack en la etiqueta inteligente del control DropDownList). Esto desencadenará un postback cada vez que el usuario cambie el elemento seleccionado del control DropDownList. Por lo tanto, cuando el usuario selecciona una nueva categoría en el control DropDownList, se producirá un postback y el control GridView se actualizará con los productos de la categoría recién seleccionada. (Este es el enfoque que he usado en este tutorial).
• Agregar un control web Button junto al control DropDownList. Establezca su propiedad Text en Refresh o algo similar. Con este enfoque, el usuario tendrá que seleccionar una nueva categoría y hacer clic en el botón. Al hacer clic en el botón, se producirá un postback y se actualizará el control GridView para enumerar esos productos de la categoría seleccionada.

Las figuras 9 y 10 ilustran el informe maestro y de detalles en acción.

Figura 9: Cuando se visita la página por primera vez, se muestra la categoría de productos Beverages (haga clic para ver la imagen a tamaño completo)

Figura 10: La selección de una nueva categoría (Produce) produce automáticamente un postback que actualiza el control GridView (haga clic para ver la imagen a tamaño completo)

Adición de un elemento de lista "-- Choose a Category --"

Cuando se visita por primera vez la página FilterByDropDownList.aspx, el primer elemento de lista del DropDownList de categorías (Beverages) se selecciona de forma predeterminada, mostrando los productos de bebidas en GridView. En lugar de mostrar los productos de la primera categoría, es posible que queramos tener seleccionado un elemento DropDownList que diga algo como "-- Choose a Category --".

Para agregar un nuevo elemento de lista al control DropDownList, vaya al ventana Propiedades y haga clic en los puntos suspensivos de la propiedad Items. Agregue un nuevo elemento de lista con Text establecido en "-- Choose a Category --" y Value establecido en -1.

Figura 11: Adición de un elemento de lista -- Choose a Category -- (haga clic para ver la imagen a tamaño completo)

Como alternativa, puede agregar el elemento de lista agregando el marcado siguiente al control DropDownList:

<asp:DropDownList ID="categories" runat="server"
    AutoPostBack="True" DataSourceID="categoriesDataSource"
    DataTextField="CategoryName" DataValueField="CategoryID"
    EnableViewState="False">
    <asp:ListItem Value="-1">
       -- Choose a Category --
    </asp:ListItem>
</asp:DropDownList>

Además, es necesario establecer el objeto AppendDataBoundItems del control DropDownList en True porque cuando las categorías están enlazadas al DropDownList desde ObjectDataSource, sobrescribirán los elementos de lista agregados manualmente si AppendDataBoundItems no es True.

Figura 12: Establecimiento de la propiedad AppendDataBoundItems en True

Después de estos cambios, cuando se visita por primera vez la página, la opción "-- Choose a Category --" está seleccionada y no se muestra ningún producto.

Figura 13: No se muestran productos en la página inicial (haga clic para ver la imagen a tamaño completo)

La razón por la que no se muestra ningún producto cuando se selecciona el elemento de lista "-- Choose a Category--" es porque su valor es -1 y no hay productos en la base de datos con una propiedad CategoryID que sea -1. Si este es el comportamiento que busca, ¡ya ha terminado! Sin embargo, si quiere mostrar todas las categorías cuando se selecciona el elemento de lista "-- Choose a Category --", vuelva a la clase ProductsBLL y personalice el método GetProductsByCategoryID(categoryID) para que invoque al método GetProducts() si el parámetro categoryID pasado es menor que cero:

public Northwind.ProductsDataTable GetProductsByCategoryID(int categoryID)
{
    if (categoryID < 0)
        return GetProducts();
    else
        return Adapter.GetProductsByCategoryID(categoryID);
}

La técnica que se usa aquí es similar al enfoque que usamos para mostrar todos los proveedores en el tutorial Parámetros declarativos, aunque en este ejemplo se usa un valor -1 para indicar que todos los registros deben recuperarse en lugar de null. Esto se debe a que el parámetro categoryID del método GetProductsByCategoryID(categoryID) espera que se pase un valor entero, mientras que en el tutorial Parámetros declarativos pasamos un parámetro de entrada de cadena.

En la figura 14 se muestra una captura de pantalla de la página FilterByDropDownList.aspx cuando la opción "-- Choose a Category --" está seleccionada. Aquí, todos los productos se muestran de forma predeterminada y el usuario puede restringir lo que se muestra eligiendo una categoría específica.

Figura 14: Se muestran todos los productos de forma predeterminada (haga clic para ver la imagen a tamaño completo)

Resumen

Al mostrar datos relacionados jerárquicamente, a menudo ayuda a presentar los datos mediante informes maestros y de detalles, en los que el usuario puede empezar a examinar los datos desde la parte superior de la jerarquía y explorar en profundidad los detalles. En este tutorial hemos examinado la creación de un sencillo informe maestro y de detalles en el que se muestran los productos de una categoría seleccionada. Esto se ha logrado mediante el uso de un control DropDownList para la lista de categorías y un control GridView para los productos que pertenecen a la categoría seleccionada.

En el siguiente tutorial, llevaremos la interfaz de DropDownList un paso más allá mediante el uso de dos controles DropDownList.

¡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 in 24 Hours. Puede ponerse en contacto con él en mitchell@4GuysFromRolla.com. o a través de su blog, que se puede encontrar en http://ScottOnWriting.NET.

Siguiente