Data Search Made Simple in ASP.NET 4.0

Filtering data displayed in ASP.NET DataGrids has become much easier using the QueryExtender control in ASP.NET 4.0. This has eased the task of developing web apps

Thursday, September 03, 2009

Print

Comment

Email

Digg

Del.icio.us

Reddit

Twitter

ASP.NET has been evolving with each new version–along with a number of out-of-band releases such as the Ajax Control Toolkit, ASP.NET MVC and Dynamic Data. ASP.NET 4.0 will see a consolidation of all of these technologies under a common umbrella along with new enhancements to each of them. However, the core ASP.NET stack too gets some new features. The one that we'll delve into this month is a new control called QueryExtender.

How it helps
One of the most common tasks that developers do on Web pages is connect to data and display them on the page. They also give ways for the user to filter it based on different criteria. Normally this is done by writing a dynamic SQL query that changes depending on the filter parameters being sent. For each new parameter, the developer has to create a new set of steps to parse and add the filter to the SQL query.

The QueryExtender control does away with all this repetitive and cumbersome coding. Instead by simply dropping a control and configuring it, you can get all the power of dynamic filtering for your data. This article shows you how you can do this.

Creating a filter page
To work with the new ASP.NET 4.0 you need to install Visual Studio 2010 Beta 1. This also installs the .NET 4.0 Beta 1. Once installed, fire up VS 2010 and create a new ASP.NET web site. Connect to your database using LINQ or Entity Framework and add tables you wish to query to your project. Once that is done, open up Web.config and add the following line to it in the <pages><controls> section:

<add tagPrefix="asp" namespace="System.Web.UI.WebControls.Expressions" assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

Note: This needs to be done only for the current beta. For later versions, it will be done automatically.

Now you are ready to start using the QueryExtender control. First off, create a normal ASPX page that uses the LinqDataSource or the EntityDataSource control to connect to your respective data model. Attach a GridView to display results and test it out without filters.

The table on food products shows a simple data grid with unfiltered data displayed using ASP.NET.

Once this is done, add a control for the user to select what data to filter. For instance, add a TextBox so that the user can input a part of, say, a name to search for. Now drop into Design view and add the following code below the data source control:
<asp:QueryExtender ID="q1" runat="server" TargetControlID="LinqDataSource1">
<asp:SearchExpression DataFields="ProductName " SearchType="Contains">
<asp:ControlParameter ControlID="TextBox1" />
</asp:SearchExpression>
</asp:QueryExtender>

When we filter data using the SearchExpression extender, the data is filtered by the text entered. Here we're filtering with the letters 'ch.'

This is a simple example of the QueryExtender that uses the SearchExpression control parameter. This filters the data coming from the LinqDataSource1 by querying the ProductName field to see if it Contains the keywords entered in the TextBox1 control. Note that the DataFields parameter allows you to specify multiple database fields–even ones not in the current table but joined to it. You can also specify whether the data should be contained anywhere, starts with or end with it. When you view the page, you can enter some characters into the textbox and submit the page. The QueryExtender will fill the GridView with the filtered results.

The RangeExpression filter lets you provide a minimum and maximum value for a field range to be filtered.

The PropertyExpression allows filtering based on properties of an element such as the checked property of a checkbox field.

These are not the only types of search you can do. You can have a RangeExpression that accepts a minimum and maximum to search for in a field, a PropertyExpression which allows you look for a particular property value of a field, a CustomExpression that lets you write code to do specific custom filtering and an OrderByExpression to sort the results. Take a look at the following QueryExtender snippet to see examples of each.

<asp:QueryExtender ID="q1" runat="server" TargetControlID="LinqDataSource1">
<asp:SearchExpression DataFields="ProductName " SearchType="Contains">
<asp:ControlParameter ControlID="TextBox1" />
</asp:SearchExpression>
<asp:OrderByExpression DataField="ProductName" Direction="Ascending" />
<asp:RangeExpression DataField="UnitPrice" MaxType="Inclusive" MinType="Inclusive">
<asp:ControlParameter ControlID="TextBoxFrom" />
<asp:ControlParameter ControlID="TextBoxTo" />
</asp:RangeExpression>
<asp:PropertyExpression>
<asp:ControlParameter ControlID="Disc" Name="Discontinued" />
</asp:PropertyExpression>
</asp:QueryExtender>

You can use these in combinations to create extremely rich advanced search pages without requiring to write tons of lines of code to parse and dynamically generate the SQL needed to return the results you want.

Page(s)   1