TUTORIAL Filtrar filas en tablas que tienen una relacin Primario-Secundario

Requisitos previos

Visual Studio 2010 o Visual Web Developer 2010 Express. Un sitio web de datos dinmicos. Para obtener ms informacin, vea Tutorial: Crear un nuevo sitio web de datos dinmicos con la tcnica scaffolding. En el sitio web de datos dinmicos, un objeto de contexto del modelo de datos denominado AdventureWorksLTDataContext. Este tutorial supone que est trabajando con un contexto de datos que tiene ese nombre. Si usa un contexto del modelo de datos con un nombre diferente, debe usar un nombre diferente en algunos de los pasos de este tutorial.

Mostrar la tabla primaria

En esta seccin establecer la tabla primaria para seleccionar una clave externa. La pgina que cree incluye un control LinqDataSource para tener acceso a la base de datos que contiene la tabla primaria. Tambin incluye un control GridView para mostrar la tabla primaria y permitir al usuario seleccionar un valor de clave externa. Para mostrar la tabla primaria 1. 2. En el Explorador de soluciones, haga clic con el botn secundario del mouse en el nombre del proyecto y, a continuacin, haga clic en Agregar nuevo elemento. En Plantillas instaladas, seleccione Visual Basic o Visual C# y, a continuacin, en el recuadro derecho, seleccione Web Forms. En el cuadro Nombre, escriba ParentChild.aspx. 3. 4. Cambie a la vista Diseo. Agregue a la pgina un control DynamicDataManager desde la pestaa Datos del Cuadro de herramientas. El control DynamicDataManager debe estar incluido en un pgina para que los controles de datos admitan datos dinmicos. El marcado del control DynamicDataManager debe preceder al marcado de cualquier otro control que use datos dinmicos. Agregar los controles enlazados a datos en pasos posteriores. 5. 6. 7. Agregue a la pgina un control LinqDataSource desde la pestaa Datos del Cuadro de herramientas. En el men Tareas de ObjectDataSource, haga clic en Configurar origen de datos. Se muestra el cuadro de dilogo Elegir un objeto de contexto. En la lista Elija el objeto de contexto, seleccione AdventureWorksLTDataContext. Nota

Si el contexto del modelo de datos con el que est trabajando tiene un nombre diferente, use ese nombre en este paso y en el cdigo subsiguiente que hace referencia al contexto de datos. 8. Haga clic en Siguiente. Se muestra el cuadro de dilogo Configurar seleccin de datos.

9.

En la lista Tabla, seleccione la tabla ProductCategories. Se seleccionan todas las columnas de la tabla ProductCategories.

10. En el cuadro Seleccionar, active la casilla que tiene el asterisco (*). 11. Haga clic en Finalizar para cerrar el cuadro de dilogo Configurar seleccin de datos. 12. Arrastre un control GridView desde el grupo Datos del Cuadro de herramientas hasta la pgina. Este control se usa para mostrar la tabla primaria ProductCategories. 13. En el men Tareas de GridView, en la lista Elegir origen de datos, seleccione LinqDataSource1. ste es el identificador del control de origen de datos que cre en los pasos anteriores. Este paso permite el acceso a la tabla primaria ProductCategories. 14. Seleccione las opciones para habilitar la paginacin y la seleccin. 15. Cambie a la vista Cdigo fuente. 16. En el elemento Columns, elimine todos los controles BoundField. 17. Encima del control GridView, inserte el siguiente marcado: 18. <h2>Parent Table: ProductCategories</h2> Presenta una leyenda que identifica la informacin que se est mostrando. 19. Establezca la propiedad AutoGenerateColumns en true. 20. Establezca la propiedad SelectedIndex en un nmero. (El nmero exacto que use no es importante, excepto que tiene que ser menor o igual que el nmero de elementos que se muestran en la cuadrcula). En el ejemplo siguiente se muestra cmo se establecen las propiedades del control GridView. <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="True" SelectedIndex="4" DataSourceID="LinqDataSource1"> <Columns> <asp:CommandField ShowSelectButton="True" /> </Columns> </asp:GridView> 21. Cambie a la vista Diseo. 22. En el men Tareas de DynamicDataManager, haga clic en Registrar controles. Se muestra el Editor de la coleccin DataControlReference. 23. En el recuadro Miembros, haga clic en Agregar. Se muestra una entrada DataControl en el cuadro Miembros. 24. En el recuadro Propiedades de DataControl, en la lista ControlID, seleccione GridView1. 25. Haga clic en Aceptar. 26. Guarde el archivo ParentChild.aspx. 27. Haga clic con el botn secundario del mouse en la pgina y seleccione Ver en el explorador. Se muestra la tabla ProductCategories.

Establecer la tabla secundaria para mostrar las filas filtradas

En esta seccin, establecer la tabla secundaria para mostrar las filas filtradas. El valor incluye un control LinqDataSource para tener acceso a la base de datos que contiene la tabla secundaria. Tambin incluye un control GridView para mostrar las filas filtradas de la tabla secundaria. Para establecer la tabla secundaria para mostrar las filas filtradas 1. 2. 3. 4. 5. 6. 7. 8. 9. En el archivo ParentChild.aspx, cambie a la Vista de diseo. Agregue a la pgina un control LinqDataSource desde la pestaa Datos del Cuadro de herramientas. En la lista Tareas de LinqDataSource, seleccione Configurar origen de datos. Se muestra el cuadro de dilogo Elegir un objeto de contexto. En la lista Elija el objeto de contexto, seleccione el objeto de contexto AdventureWorksLTDataContext. Haga clic en Siguiente. Se muestra el cuadro de dilogo Configurar seleccin de datos. En la lista Tabla, seleccione la tabla Products. En el cuadro Seleccionar, active la casilla que tiene el asterisco (*). Se seleccionan todas las columnas de la tabla Products. Haga clic en Finalizar. Arrastre un control GridView desde el grupo Datos del Cuadro de herramientas hasta la pgina. Este control se usa para mostrar la tabla Products. 10. En el men Tareas de GridView, en la lista Elegir origen de datos, seleccione LinqDataSource2. ste es el identificador del control de origen de datos que cre anteriormente. Este paso permite el acceso a la tabla secundaria Products. 11. Seleccione las opciones para habilitar la paginacin y la seleccin. 12. Cambie a la vista Cdigo fuente. 13. En el elemento Columns, elimine todos los controles BoundField. 14. Encima del control GridView, inserte el siguiente marcado: <h2>Child Table: Products</h2> Presenta una leyenda que identifica la informacin que se est mostrando. 15. Establezca la propiedad AutoGenerateColumns en true. 16. Establezca la propiedad SelectedIndex en un nmero. (El nmero exacto que use no es importante, excepto que tiene que ser menor o igual que el nmero de elementos que se muestran en la cuadrcula). En el ejemplo siguiente se muestra cmo establecer las propiedades relacionadas. <asp:GridView ID="GridView2" runat="server"

DataSourceID="LinqDataSource2" AutoGenerateColumns="True" PageSize="5"> </asp:GridView> 17. Cambie a la vista Diseo. 18. En la lista Tareas de DynamicDataManager, haga clic en Registrar controles.

Se muestra el Editor de la coleccin DataControlReference. 19. En el recuadro Miembros, haga clic en el botn Agregar. Se muestra una entrada DataControl en el cuadro Miembros. 20. En el recuadro Propiedades de DataControl, en la lista ControlID, seleccione GridView2. 21. Haga clic en Aceptar. 22. Guarde el archivo ParentChild.aspx. 23. Haga clic con el botn secundario del mouse en la pgina y seleccione Ver en el explorador. Se muestra la tabla Products. Configurar el filtrado para las filas de la tabla secundaria

En esta ltima seccin, configurar el filtrado para las filas de la tabla secundaria. El control QueryExtender se configura para habilitar el filtrado de las filas de la tabla secundaria en funcin de la clave externa seleccionada por el usuario en la tabla primaria. Para configurar el filtrado de las filas de la tabla secundaria 1. 2. 3. Cambie a la vista Cdigo fuente. Agregue un control QueryExtender a la pgina ParentChild.aspx. Establezca la propiedad TargetControlID del control QueryExtender en el identificador del control de origen de datos que est asociado a la tabla secundaria cuyas filas desea filtrar. En el ejemplo siguiente se muestra el marcado para un control QueryExtender que especifica el control de origen de datos LinqDataSource2 asociado a la tabla secundaria. <asp:QueryExtender ID="QueryExtenderID" TargetControlID="LinqDataSource2" runat="server" > </asp:QueryExtender> 4. Agregue un objeto ControlFilterExpression como elemento secundario del control QueryExtender. En el ejemplo siguiente se muestra el marcado para agregar un objeto ControlFilterExpression al control. <asp:QueryExtender ID="QueryExtenderID"

TargetControlID="LinqDataSource2" runat="server"> <asp:ControlFilterExpression /> </asp:QueryExtender> 5. 6. Establezca la propiedad ControlID del objeto ControlFilterExpression en el identificador del control enlazado a datos asociado a la tabla primaria. Establezca la propiedad Column del objeto ControlFilterExpression en la columna de la tabla primaria que se usa para filtrar. Esta columna representa una clave externa en la tabla secundaria. En el ejemplo siguiente se muestra el marcado para un objeto ControlFilterExpression que apunta a un control enlazado a datos y a una clave externa asociados a la tabla primaria. <asp:QueryExtender ID="QueryExtenderID"

TargetControlID="LinqDataSource2" runat="server"> <asp:ControlFilterExpression ControlID="GridView1" Column="ProductCategory" /> </asp:QueryExtender>

7. 8. 9. Ejemplo

Guarde el archivo ParentChild.aspx. En el Explorador de soluciones, haga clic con el botn secundario en la pgina ParentChild.aspx y, a continuacin, seleccione Ver en el explorador. En la tabla primaria ProductCategories, seleccione una categora. Los datos dinmicos filtran las filas de la tabla Products en funcin de la categora que seleccion.

En el ejemplo siguiente se muestra la pgina completa ilustrada en este tutorial. C# VB

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server">

<asp:DynamicDataManager ID="DynamicDataManager1" runat="server"> <DataControls> <asp:DataControlReference ControlID="GridView1" /> <asp:DataControlReference ControlID="GridView2" /> </DataControls> </asp:DynamicDataManager>

<asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="AdventureWorksLTDataContext" EntityTypeName="" TableName="ProductCategories"> </asp:LinqDataSource>

<h2>Parent Table: ProductCategories</h2> <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="True" DataKeyNames="ProductCategoryID" PageSize="5" SelectedIndex="5" DataSourceID="LinqDataSource1"> <Columns> <asp:CommandField ShowSelectButton="True" /> </Columns>

</asp:GridView>

<asp:LinqDataSource ID="LinqDataSource2" runat="server" ContextTypeName="AdventureWorksLTDataContext" EntityTypeName="" TableName="Products"> </asp:LinqDataSource>

<h2>Child Table: Products</h2>

<asp:GridView ID="GridView2" runat="server" AllowPaging="True" AutoGenerateColumns="True" DataKeyNames="ProductID" PageSize="5" DataSourceID="LinqDataSource2"> <Columns> <asp:CommandField ShowSelectButton="True" />

</Columns> </asp:GridView>

<asp:QueryExtender ID="QueryExtenderID" TargetControlID="LinqDataSource2" runat="server"> <asp:ControlFilterExpression ControlID="Gridview1" Column="ProductCategory" /> </asp:QueryExtender>

</form> </body> </html>