ASP.NET 4.0 QueryExtender, AutoCompleteExtender and UpdatePanel – mashing it up all

(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

screenshot1

screenshot

Cheers !!!

Print | posted on Thursday, August 13, 2009 2:56 AM

Comments on this post

# re: ASP.NET 4.0 QueryExtender, AutoCompleteExtender and UpdatePanel – mashing it up all

Requesting Gravatar...
Hi Harish,

Thanks for this and all other wonderful posts.

Keep up the good work!

Regards,
Jack
Left by Jack Bhanded on Aug 18, 2009 12:03 PM

# re: ASP.NET 4.0 QueryExtender, AutoCompleteExtender and UpdatePanel – mashing it up all

Requesting Gravatar...
Is there way to do all these wiring up dynamically on a code behind file? Because we are trying to build a web part, and when we code to do the query using either LINQDataSource or EntityDataSource, we are getting an exception saying that these DataSources needs to implement IQuerableDataSource.
Left by Sundararajan on Nov 19, 2009 5:10 AM

# re: ASP.NET 4.0 QueryExtender, AutoCompleteExtender and UpdatePanel – mashing it up all

Requesting Gravatar...
<p>I just wanted to tell you that I love the site(s). Makes me smile and makes my day everyday. Better than master card, I never leave home with out my daily dose.great site like Christian louboutin! every post so far looks right up my alley.</p>
Left by christianlouboutin on Dec 05, 2009 6:46 PM

# re: ASP.NET 4.0 QueryExtender, AutoCompleteExtender and UpdatePanel – mashing it up all

Requesting Gravatar...
That's useful! Thanks for sharing. christian louboutin shoes
Left by Danny on Apr 02, 2010 8:18 PM

# # re: ASP.NET 4.0 QueryExtender, AutoCompleteExtender and UpdatePanel – mashing it up all

Requesting Gravatar...
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.
Left by Kynsistudio on May 02, 2010 4:16 AM

# re: ASP.NET 4.0 QueryExtender, AutoCompleteExtender and UpdatePanel – mashing it up all

Requesting Gravatar...
Thanks a lot for a bunch of good tips. I look forward to reading more on the topic in the future. Keep up the good work! This blog is going to be great resource. Love reading it.
Left by SEO Products on May 26, 2010 5:32 AM

# re: ASP.NET 4.0 QueryExtender, AutoCompleteExtender and UpdatePanel – mashing it up all

Requesting Gravatar...
Of course, what a great site and informative posts, I will add backlink - bookmark this site? Regards, Reader.
Left by Druckvorstufe on May 27, 2010 9:24 PM

# re: ASP.NET 4.0 QueryExtender, AutoCompleteExtender and UpdatePanel – mashing it up all

Requesting Gravatar...
Really interesting article, I'm new in ASP, this might be useful in the future - bookmarked.
Left by Turnkey Websites on Sep 12, 2010 1:59 AM

# getting error ..

Requesting Gravatar...
hello .. i m getting error in
----------------------------
NorthwindDataContext nwdc = new NorthwindDataContext();
-----------------------------

as Northwind is not in my table ..
i tried to use my table's connection string name which is in webconfig file ..

but still its coming red underline at that words ..
wht should i do .. ?

please reply me at my mail

Left by Mittul Chauhan on Nov 19, 2010 1:40 PM

# re: ASP.NET 4.0 QueryExtender, AutoCompleteExtender and UpdatePanel – mashing it up all

Requesting Gravatar...
The <a href=" http://giuseppezanottioutlets.com/"target="_blank">Giuseppe Zanotti outlet are in a location to provide a female desires. <a href=" http://giuseppezanottioutlets.com/"target="_blank">Giuseppe Zanotti Shoes are in a location to possess their dream, probably the most beneficial and newest products to produce out using the right sentence.
Left by giuseppe zanotti on Dec 22, 2010 7:15 AM

# re: ASP.NET 4.0 QueryExtender, AutoCompleteExtender and UpdatePanel – mashing it up all

Requesting Gravatar...
Cool, ASP is what I'm currently testing - interesting article, I'm new in ASP, this might be useful in the future - bookmarked.
Left by schuhe online shop Tester on Jan 16, 2011 1:12 AM

# re: ASP.NET 4.0 QueryExtender, AutoCompleteExtender and UpdatePanel – mashing it up all

Requesting Gravatar...
<a href=" http://shoesoutletsmall.com/"target="_blank">shoes outlet mall wear high-heeled shoes when two-foot-long, attention should be paid to have time to move and toes, so can relieve once, prevent the same position too are squeezed. 10, peacetime nail clipping shoulds not be too malicious, prevent nails
<a href=" http://shoesoutletsmall.com/"target="_blank">shoes outlet
Left by shoes outlet mall on Jan 22, 2011 7:49 AM

# re: ASP.NET 4.0 QueryExtender, AutoCompleteExtender and UpdatePanel – mashing it up all

Requesting Gravatar...
Great to find such a creative and innovative material. I'm up to read more of you or ask for custom dissertation writing http://papersmart.net uses in its style. You make it look so simple. This is an totally good material you have here. The subject is very informative and straight to the point.
Left by Almaris on Jun 20, 2012 2:50 AM

# I'm impressed

Requesting Gravatar...
I'm impressed. I don't think I've met anyone who knows as much about this subject as you do. You're truly well informed and very intelligent. rushessay
Left by rushessay on Apr 17, 2013 10:56 PM

# re: ASP.NET 4.0 QueryExtender, AutoCompleteExtender and UpdatePanel – mashing it up all

Requesting Gravatar...
Are you looking for Cheap and best Essay Writing Service, stand out from our competition as the prime essay service provider.
More to visit:http://www.academicessaywritingservices.org/
Left by fina on Dec 24, 2015 1:38 PM

Your comment:

 (will show your gravatar)