(this is a repost since the initial post had a few issues that couldn’t be corrected)
I am playing with the ASP.NET 4.0 QueryExtender released as a part of the Visual Studio 2010 Beta 1. It provides endless opportunities for working with data without writing much code and when you combine it with a few Ajax features, gives a truly great user experience with very less effort.
To begin with you need the Visual Studio 2010 Beta 1 and .NET Framework 4.0 Beta 1. You can install both from http://msdn.microsoft.com/hi-in/netframework/dd819232(en-us).aspx
Also, I am using the Northwind sample database and this can be downloaded from http://www.microsoft.com/downloads/details.aspx?FamilyID=06616212-0356-46A0-8DA2-EEBC53A68034&displaylang=en
To make things more fun, I am also using AJAX Control Toolkit. You can download the same from http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=27326 You can download just the DLL from the AJAXControlToolkit-Framework3.5SP1-DllOnly.zip link in this page since in this sample, we are just going to use the control. However, if you already have the AjaxControlToolkit installed, you can simply reference the AjaxControlToolkit.dll file in the Website.
Note that, due to a security implementation in VS 2010, the AjaxControlToolkit DLL cannot be used as is in the projects in VS 2010. Check this post on using AjaxControlToolkit with VS 2010 Beta 1 http://blogs.msdn.com/webdevtools/archive/2009/05/26/using-microsoft-ajax-control-toolkit-with-visual-studio-10-beta-1.aspx
Once you are done with the installation and other steps, create a new ASP.NET Website. Note that, for the QueryExtender to work well, you need to make a small web.config update. You can find the details about this, in my previous post here This is just a Beta behaviour.
In the ASP.NET Website, first we will create a LINQ to SQL Class (Right Click Website – Add new item – LINQ TO SQL Class. Provide this the name “Northwind”. It would create a Northwind.dbml file, a class file as well as layout file. Using the server explorer link, connect to the Northwind Database. For this sample, I am using the Products table. So, select the table from Northwind database folder under “Tables” and drag and drop it into the LINQ to SQL designer view. Build the solution.
Once this is done, open the Default.aspx page and add the following code after the form tag.
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
We are adding the above since we are going to use Ajax Futures. Normally this is not required to use the QueryExtender
Then, add a LINQ Data Source and configure it to use the Products table in the Northwind DataContext created. The code should look something like below:-
<asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="NorthwindDataContext"
TableName="Products">
</asp:LinqDataSource>
Post this, I am adding a TextBox, Button and QueryExtender as follows:-
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" Text="Submit" runat="server" />
<asp:QueryExtender ID="QueryExtender1" runat="server" TargetControlID="LinqDataSource1">
<asp:SearchExpression DataFields="ProductName" SearchType="StartsWith">
<asp:ControlParameter ControlID="TextBox1" />
</asp:SearchExpression>
</asp:QueryExtender>
Note that the ControlID for QueryExtender’s ControlParameter is TextBox1 and the TargetControlID is LinqDataSource1. Update these if you gave different ID Names.
Post this, add a GridView to the page and configure it to use the LINQ DataSource created above. I am not posting the code below since it would make this post too big.
If everything works fine, you should be able to see a GridView populated with the Products Data and a TextBox and Button when you run the page.
When you type a particular Product Name, say “Anideed Syrup” and click on “Submit” Button, it would filter and show only that particular record in the GridView. Note that, you haven’t written any code for this filtering so far. All happens by virtue of the QueryExtender control. We have used SearchExpression in this case and it has stuff like StartsWith, EndsWith, contains for SearchType that can be used exhaustively for different requirements. Also, there is RangeExpression, PropertyExpression etc.,
The input for the QueryExtender can also come from various sources. In this case, it is TextBox and hence ControlParameter. You can also use QueryString, Cookie, Form, Profile, Session etc.,
For a more exhaustive sample on QueryExtender, check http://msdn.microsoft.com/en-us/library/dd537669(VS.100).aspx
Now that we have a search behaviour, we would like to go little further and make this whole stuff asynchronous so that the operation is smooth.
Add an UpdatePanel and place all the above inside the ContentTemplate of the UpdatePanel.
When you run the page now and type a search item and click on the “Submit” button, the results bind asynchronously without a postback, making it look better.
One final touch is to provide search suggestions. For this, I would be using the AutoCompleteExtender feature. If you already have the AjaxControlToolkit installed, you may want to remove it from ToolBox and do the step in paragraph 5 (security implementation in VS 2010) above and then add it to the Toolbox again.
Drag and drop the AutoCompleteExtender into the page and set its TargetControlID to TextBox1.
Now, the AutoCompleteExtender requires a Web Method to retrieve the values asynchronously. We will use PageMethods for this so that we avoid creating a separate webservice. For this purpose, we will use the same DataContext created by the LINQ DataSource Control above.
Swtich to the code behind of the Default.aspx page i.e. Default.aspx.cs file and add the following using statements
using System.Web.Services;
using System.Configuration;
Post that, the method for retrieving product name is as below:-
[WebMethod]
public static IQueryable GetProductNames(string prefixText)
{
NorthwindDataContext nwdc = new NorthwindDataContext();
var productList = from Product in nwdc.Products
where Product.ProductName.StartsWith(prefixText)
select Product.ProductName;
return productList;
}
With this, we are getting a list of Products whose names start with the prefixText. The prefixText is the one used in the AutoCompleteExtender and length can be set using MinimumPrefixLength from 1 to 2,3 etc., This is basically the number of characters you need to type before the suggestions need to show up. Then configure the ServiceMethod for the AutoCompleteExtender to GetProductNames (the method above). The updated AutoCompleteExtender code should look like
<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
MinimumPrefixLength="1" TargetControlID="TextBox1" ServiceMethod="GetProductNames">
</cc1:AutoCompleteExtender>
Once you have all of these, run the page and when you start typing the ProductName in the TextBox, it should start showing suggestions. Select one of them and click on the “Submit” Button and you should get the result bound to GridView, all happening without a postback.
You can improve the layout with better CSS for the AutoCompleteExtender, better layout for GridView, Button etc., to further improve the experience. I have posted a few sample screen shots below and also attached the source code for the above sample with this. Note that there are far too many steps involved in setting up the website rather than the actual code work, so if something doesn’t work, make sure you have checked all the initial steps mentioned by me in the beginning. Hope you find this sample useful.
Download the sample from http://cid-069f94a102eff49a.skydrive.live.com/browse.aspx/QueryExtenderSample
Cheers !!!