How to: Filter Data in a Web Page Using Declarative Syntax

Article
10/15/2009

[This documentation is for preview only, and is subject to change in later releases. Blank topics are included as placeholders.]

You can use the QueryExtender control to create filters for data that is retrieved from a data source, without having to create explicit queries in the data source. You can use the QueryExtender control in the markup of a Web page to filter data using only declarative syntax. You use one or more of the following expression types in the QueryExtender control to filter data:

These expression types and additional filter expressions are supported in ASP.NET Dynamic Data applications. For more information, see QueryExtender Web Server Control Overview.

To filter data in a Web page using declarative syntax

Using Visual Studio or Visual Web Developer create a Web site or Web application.
Add or connect to a database.
Create a data model for the Web site or Web application.

Note

The QueryExtender control supports the LINQ to SQL and Entity Framework data sources.
Add a data source control to the Web page and configure the data source to work with the database table you want to use.

The following example shows the markup for a LinqDataSource control that is configured to work with the Products table in the AdventureWorks database, using a data context named AdventureWorksDataContext.
```
<asp:LinqDataSource ID="LinqDataSource1"  
    ContextTypeName="AdventureWorksDataContext"  
    TableName="Products" runat="server"> 
</asp:LinqDataSource>
```
Add a QueryExtender control to the page and connect it to the data source by setting the TargetControlID property to the ID of the data source control.

The following example shows the markup for a query extender control that is bound to the LinqDataSource1 data source control.
```
<asp:QueryExtender runat="server" 
     TargetControlID="LinqDataSource1">
</asp:QueryExtender>
```
Add a filter to the QueryExtender control.

The following example the shows a SearchExpression element (filter) that has been added to the query extender control. The element defines a filters for the Name column. The name to search for will be provided at run time.
```
<asp:QueryExtender runat="server" TargetControlID="LinqDataSource1">
    <asp:SearchExpression SearchType="Contains" DataFields="Name" >
    </asp:SearchExpression>
</asp:QueryExtender>
```
Add an ASP.NET control that will provide the value for the query parameter, and connect this control to the filter that will use parameter by setting the ControlID property of the ControlParameter control.

The following example shows the markup for a search expression that uses the SearchTextBox TextBox control to accept user input as a parameter.
```
Search: <asp:TextBox ID="SearchTextBox" runat="server" />

<asp:QueryExtender runat="server" TargetControlID="LinqDataSource1">
    <asp:SearchExpression SearchType="Contains" DataFields="Name" >
       <asp:ControlParameter ControlID="SearchTextBox" />
</asp:SearchExpression>
</asp:QueryExtender>
```
Add a data control that will display the filtered data on the page and connect the control to the data source. For example, you can add a GridView control to display the filtered data that will be returned from the data source.

The following example shows the markup for a GridView control that will display the data that is returned by the data source control. The GridView control gets its data from the LinqDataSource1 control, which is the control that uses the filter that you have defined.
```
<asp:GridView ID="GridView1" runat="server"  
     DataSourceID="LinqDataSource1" AllowPaging="True">
</asp:GridView>
```

Example

The following example shows the complete markup that is described in this topic. It uses the SearchExpression to search the Name column of the AdventureWorks sample database. The filter searches for product names that start with the string that is entered in the SearchTextBox control.

<body>
    <form id="form1" runat="server">
    Search:<asp:TextBox ID="SearchTextBox" runat="server" />
    <p>
    <asp:Button ID="Button1" runat="server" Text="Search" />
    </p>
    <asp:LinqDataSource ID="LinqDataSource1"  
        ContextTypeName="FilterDemo.AdventureWorksDataContext"  
        TableName="Products" runat="server"> 
    </asp:LinqDataSource>
    <asp:QueryExtender runat="server"   
            TargetControlID="LinqDataSource1">
    <asp:SearchExpression SearchType="StartsWith" DataFields="Name" >
    <asp:ControlParameter ControlID="SearchTextBox" />
    </asp:SearchExpression>
</asp:QueryExtender>
    <asp:GridView ID="GridView1" runat="server"  
          DataSourceID="LinqDataSource1" AllowPaging="True">
     </asp:GridView>
</form>
</body>

Compiling the Code

In order to compile the code in example, you will need the following:

Visual Studio 2010 or Visual Web Developer 2010 Express.
SQL Server Express. If you have SQL Server installed, you can use that, but you must make small adjustments to some of the procedures.
The AdventureWorks sample database. You must add the database file to the Web site and connect to the .mdf file. For information about how to connect to the database in Visual Studio, see How to: Connect to the AdventureWorksLT Database using an .MDF File. You can also download the AdventureWorks sample database and connect to it in Visual Studio. For information about how to install AdventureWorks and create a connection to it in Visual Studio, see How to: Set up an AdventureWorksLT Sample Database for ASP.NET Development.

How to: Filter Data in a Web Page Using Declarative Syntax

To filter data in a Web page using declarative syntax

Example

Compiling the Code

See Also

Tasks

Reference

Concepts

Additional resources