Walkthrough: Filtering Table Rows in Dynamic Data

Article
05/19/2009

Introduction

This walkthrough shows how to use the Dynamic Data filter templates to create the UI that enables you to choose a column value for selecting (filtering) table rows to display. By default, Dynamic Data includes templates that let you specify filtering for Boolean column values and for foreign-key column values.

In this walkthrough you will build an application that displays filtered rows from tables contained by the AdventureWorksLT sample database, in the following ways:

Filter table rows using a foreign key. You will create the page markup to let Dynamic Data generate the UI and perform row filtering in the Products table by using the foreign-key column values from the ProductCategories table. You use this approach when you want to filter rows for a specific column type for which Dynamic Data provides a default filter template. (If you want to support filtering for a column type for which Dynamic Data does not provide a default filter template, you need to create a custom filter template.)
Filter table rows using default filter templates. You create the page markup to let Dynamic Data automatically generate the UI and perform row filtering in the Products table by using the foreign-key column values from the ProductCategories table, for the column types for which default filter templates exist. By default, Dynamic Data can create the UI for Boolean and foreign-key columns.
Test data filtering. This lets you make sure that Dynamic Data table row filtering capabilities have been integrated in the Web site.

A Visual Studio project with source code is available to accompany this topic: Download.

Prerequisites

In order to build the application and run the examples in this topic, you need the following:

A Dynamic Data Web site or a Dynamic Data Web application. You must perform this step to create the AdventureWorksLTDataContext data context and the data model classes to access the tables used in this walkthrough. This walkthrough assumes that you have created the Web site and that you are using a data context that is based on LINQ to SQL. For more information, see Walkthrough: Creating a New Dynamic Data Web Site using Scaffolding1564aef2-9103-436a-9806-c8ad7abd616a.
The AdventureWorksLT sample database. For more information, see How to: Connect to the AdventureWorksLT Database with an .MDF File.

Filtering Table Rows Using a Foreign Key

This section shows how to create a Web page that let the user filter table rows by using a foreign key. The page contains a T:System.Web.UI.WebControls.LinqDataSource control to interact with the database and a T:System.Web.UI.WebControls.GridView control to display the filtered table rows. The page uses the LINQ to SQL database model, as illustrated in the topic Walkthrough: Creating a New Dynamic Data Web Site using Scaffolding1564aef2-9103-436a-9806-c8ad7abd616a.

To filter table rows using a foreign key

1. In Solution Explorer, right-click the project name, and then select Add New Item.

2. Under Visual Studio installed templates, select Web Form.

In the Name box, enter ForeignKeyTableRowFiltering.aspx.

3. Add a T:System.Web.DynamicData.DynamicDataManager control to the page, as shown in the following example:

 <body>
    <form id="form1" runat="server">
        <asp:DynamicDataManager  ID="DynamicDataManager1" runat="server">
            
        </asp:DynamicDataManager>
    </form> 
</body>

The T:System.Web.DynamicData.DynamicDataManager control must be included on a page in order to support Dynamic Data controls. The markup for the T:System.Web.DynamicData.DynamicDataManager control must precede the markup for any controls that use Dynamic Data.

4. From the Data tab of the Toolbox, add a T:System.Web.UI.WebControls.LinqDataSource control to the page, as shown in the following example:

5. Set the T:System.Web.UI.WebControls.LinqDataSource control's P:System.Web.UI.WebControls.LinqDataSource.TableName property to the database table to access (Products), as shown in the following example:

<asp:LinqDataSource ID="LinqDataSource1" TableName="Products" runat="server"/>

6. Set the P:System.Web.UI.WebControls.LinqDataSource.ContextTypeName property to the data context class (AdventureWorksLTDataContext), as shown in the following example:

<asp:LinqDataSource ID="LinqDataSource1" runat="server"

    TableName="Products" ContextTypeName="AdventureWorksLTDataContext"/>

7. From the Data tab of the Toolbox, add a T:System.Web.UI.WebControls.GridView control to the page.

This control will display the Products table data fields. Set the P:System.Web.UI.WebControls.DataBoundControl.DataSourceID property to the ID of the T:System.Web.UI.WebControls.LinqDataSource control, as shown in the following example:

 <form id="form2" runat="server">
    <asp:GridView ID="GridView1" runat="server"
        DataSourceID="LinqDataSource1">
    </asp:GridView>
</form>

8. Set the T:System.Web.UI.WebControls.GridView control's P:System.Web.UI.WebControls.GridView.AutoGenerateColumns property to false, as shown in the following example:

 <asp:GridView ID="GridView1" runat="server"
    DataSourceID="LinqDataSource1" AutoGenerateColumns="false">
</asp:GridView>

This disables the automatic generation of columns that are based on the database table. Instead you will use a DynamicField controls to populate the T:System.Web.UI.WebControls.GridView control.

9. Optionally, set the T:System.Web.UI.WebControls.GridView control's P:System.Web.UI.WebControls.GridView.AllowPaging and P:System.Web.UI.WebControls.GridView.AllowSorting properties to true, as shown in the following example:

 <asp:GridView ID="GridView1" runat="server"
    DataSourceID="LinqDataSource1" AutoGenerateColumns="false"
    AllowPaging="true" AllowSorting="true">
</asp:GridView>

10. Add DynamicField controls to the P:System.Web.UI.WebControls.GridView.Columns property and set their P:System.Web.DynamicData.DynamicField.DataField properties to "ProductCategory", "Name", "Color", and "Size".

DynamicField controls use ASP.NET Dynamic Data to read data from the data model and to format it by using the appropriate field templates. The following example shows the markup for the Columns property and the DynamicField controls:

 <asp:GridView ID="GridView1" runat="server"
    DataSourceID="LinqDataSource1" AutoGenerateColumns="false"
    AllowPaging="true" AllowSorting="true">
    <Columns>
        <asp:DynamicField DataField="ProductCategory" />
        <asp:DynamicField DataField="Name" />
        <asp:DynamicField DataField="Color" />
        <asp:DynamicField DataField="Size" />
    </Columns>
</asp:GridView>

11. Register the T:System.Web.UI.WebControls.GridView control with the T:System.Web.DynamicData.DynamicDataManager control, as shown in the following example:

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

12. In the markup above the data-bound control, add a T:System.Web.DynamicData.DynamicFilter control to the page and set the DataField property of the to ProductCategory.

This is the name of the column to use to for table row filtering. The following example shows the markup for the T:System.Web.DynamicData.DynamicFilter control.

 <asp:DynamicFilter ID="DynamicFilter1" 
   DataField="ProductCategory" runat="server" />

Dynamic Data throws an T:System.InvalidOperationException error if the column type does not have an associated filter template.

13. In the markup above the T:System.Web.DynamicData.DynamicFilter control, add a T:System.Web.UI.WebControls.Label control, as shown in the following example:

 <asp:Label ID="Label1" runat="server" 
  Text="ProductCategory "/>

You will use this Label control to display the name of the column that is used for filtering.

14. Add a T:System.Web.UI.WebControls.QueryExtender control to the page and set the TargetControlID property to the identifiier of the data source control that you want to extend, as shown in the following example:

 <asp:QueryExtender ID="QueryExtender1" 
    TargetControlID="LinqDataSource1" runat="server">
</asp:QueryExtender>

The T:System.Web.UI.WebControls.QueryExtender control extends a data source control's capabilities by letting you configure data filtering through declarative syntax, as shown in the next steps.

15. Add a T:System.Web.DynamicData.DynamicFilterExpression object as a child of the T:System.Web.UI.WebControls.QueryExtender control. Set the ControlID property of the T:System.Web.DynamicData.DynamicFilterExpression object to the identifier of the T:System.Web.DynamicData.DynamicFilter control, as shown in the following example:

 <asp:QueryExtender ID="QueryExtender1" 
    TargetControlID="LinqDataSource1" runat="server">
    <asp:DynamicFilterExpression ControlID="DynamicFilter1" />
</asp:QueryExtender>

16. Save and close the file.

In Solution Explorer, right-click the ForeignKeyTableRowFiltering.aspx page and then select View in Browser.

The page displays the columns from the Products and the UI for filtering the products by category.

17. In the Product Category drop-down control, select a category.

Dynamic Data filters the products that are displayed, based on the category that you selected.

18. Close the ForeignKeyTableRowFiltering.aspx page.

Filtering Table Rows Using Default Filter Templates

This section shows how to create a Web page that lets the user filter table rows for the column types for which default filter templates exist. The page contains a T:System.Web.UI.WebControls.LinqDataSource control to interact with the database and a T:System.Web.UI.WebControls.GridView control to display the filtered table rows. The page uses the LINQ to SQL database model, as illustrated in the Walkthrough: Creating a New Dynamic Data Web Site using Scaffolding1564aef2-9103-436a-9806-c8ad7abd616a.

To filter table rows using default filter templates

19. As a shortcut, instead of recreating a new page, in Solution Explorer right-click the ForeignKeyTableRowFiltering.aspx file and then select Copy.

20. Right-click the project folder and then select Paste.

21. Right click the Copy of ForeignKeyTableRowFiltering.aspx page and then select Rename.

22. Rename the file DefaultTableRowFiltering.aspx.

23. Open the DefaultTableRowFiltering.aspx file.

24. Add one more DynamicField control to the P:System.Web.UI.WebControls.GridView.Columns property and set the P:System.Web.DynamicData.DynamicField.DataField property to "ProductModel".

The ProductModel and the ProductCategory columns are the two foreign keys for which Dynamic Data automatically create a UI to filter table rows. The following example shows the markup for the GridView control after you add the new DynamicField control.

 <asp:GridView ID="GridView1" runat="server"
    DataSourceID="LinqDataSource1" AutoGenerateColumns="false"
    AllowPaging="true" AllowSorting="true">
    <Columns>
        <asp:DynamicField DataField="ProductCategory" />
        <asp:DynamicField DataField="ProductModel" />
        <asp:DynamicField DataField="Name" />
        <asp:DynamicField DataField="Color" />
        <asp:DynamicField DataField="Size" />
   </Columns>
</asp:GridView>

25. In the markup before the data-bound control, replace the T:System.Web.DynamicData.DynamicFilter control and the T:System.Web.UI.WebControls.Label control with a T:System.Web.DynamicData.QueryableFilterRepeater control, as shown in the following example.

 <asp:QueryableFilterRepeater ID="FilterRepeater1" runat="server">
</asp:QueryableFilterRepeater>

26. In the ItemTemplate element of the T:System.Web.DynamicData.QueryableFilterRepeater control, add a T:System.Web.DynamicData.DynamicFilter control, as shown in the following example:

 <asp:QueryableFilterRepeater ID="FilterRepeater1" runat="server">
    <ItemTemplate>
        <asp:DynamicFilter ID="DynamicFilter" runat="server" />
    </ItemTemplate>
</asp:QueryableFilterRepeater>

The T:System.Web.DynamicData.DynamicFilter control automatically generates a T:System.Web.UI.WebControls.DropDownList control for each column type that has a related default filter template. By default, only Boolean and foreign-key columns have filter templates. The T:System.Web.UI.WebControls.DropDownList control enables the user to select the column value for filtering the table rows.

27. Add a T:System.Web.UI.WebControls.Label control before the T:System.Web.DynamicData.DynamicFilter control.

Dynamic Data uses the Label control to display a name for any column that can be used for data filtering.

The following example shows the markup for a T:System.Web.UI.WebControls.Label that displays the names of the columns to use for data filtering.

 <asp:QueryableFilterRepeater ID="FilterRepeater1" runat="server">
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server" 
            Text='<%# Eval("DisplayName") %> '/>
        <asp:DynamicFilter ID="DynamicFilter" runat="server" />
    </ItemTemplate>
</asp:QueryableFilterRepeater>

28. In the T:System.Web.UI.WebControls.QueryExtender control, set the T:System.Web.DynamicData.DynamicFilterExpression ControlID property to the ID of the T:System.Web.DynamicData.QueryableFilterRepeater control, as shown in the following example:

 <asp:QueryExtender ID="QueryExtender1" runat="server" 
    TargetControlID="LinqDataSource1">
    <asp:DynamicFilterExpression ControlID="FilterRepeater1" />
</asp:QueryExtender>

29. Save and close the file.

30. In Solution Explorer, right-click the DefaultTableRowFiltering.aspx page and then select View in Browser.

The page displays the defined Products columns and the UI for filtering the products by category and by model.

31. In the ProductCategory drop-down control, select a category.

Dynamic Data filters the products displayed based on the category you selected.

32. In the ProductModel drop-down control, select a model.

Dynamic Data filters the products displayed based on the model you selected.

33. Close the browser.

Testing Table Row Filtering

You can now test and compare the table row filtering pages that you just created. This lets you make sure that Dynamic Data filtering capabilities have been integrated in the Web site and compare the methods used. You can interact with the database and verify that the application works as expected.

To test and compare table row filtering

34. In Solution Explorer, right-click the ForeignKeyTableRowFiltering.aspx page and then select View in Browser.

The page displays the defined Products columns and the UI for filtering the products by category. Notice that this is the column that you specifically configured to create the UI for table row filtering.

35. Close the ForeignKeyTableRowFiltering.aspx page.

36. In Solution Explorer, right-click the DefaultTableRowFiltering.aspx page and then select View in Browser.

The page displays the defined Products columns and the UI for filtering the products by category and by model. Notice that Dynamic Data has automatically created a UI for category and model filtering. This shows how you can use declarative syntax to instruct Dynamic Data to generate the UI and table row filtering for all the column types for which a default filter template exists.

37. Close the browser.

Next Steps

This walkthrough has illustrated the basic principles of how to add data filtering to an ASP.NET Dynamic Data Web site. You have seen how to enable data filtering using a specific column or automatically. You might want to experiment with additional features. Suggestions for additional exploration include the following:

Learn how to enable data-key filtering. This enables the user to filter table rows based on the column value from a parent table. For more information, see How to: Filter Data Using Values from a Parent Table in Dynamic Data.
Learn how to customize a specific table layout. This is to customize the layout for a specific table that could allow for custom UI for data filtering. For more information, see Walkthrough: Customizing Table layout Using Entity Templates.
For general information, you might want to do the following:
Understand how to use the vs_ordesigner_short in a Web application to create data classes that represent a SQL Server database. For more information, see How to: Create LINQ to SQL Classes in a Web Application.
Understand LINQ-to-SQL Object-Relational mapping. For more information, see LINQ to SQL.
Understand the Object Relational Designer (O/R Designer). For more information, see Object Relational Designer (O/R Designer).

Comments

Anonymous
May 19, 2009
PingBack from http://asp-net-hosting.simplynetdev.com/walkthrough-filtering-table-rows-in-dynamic-data/
Anonymous
May 20, 2009
ASP.NET Dynamic Data documentation has been updated to contain new information and examples. Also, improvements
Anonymous
June 05, 2009
The link to the walk through to build a web site using scaffolding is broken. "Creating a New Dynamic Data Web Site using Scaffolding1564aef2-9103-436a-9806-c8ad7abd616a. " Does the samples code for this walk through require the ASP.NET Dynamic Data 4.0 Preview 4 from Codeplex?

Share via