ASP.NET Ajax C# Example: AutoCompleteExtender With Progress Indicator

Posted by OmegaMan at January 15, 2009

Category: Ajax, ASP.Net

Tags: , , , ,

Waiting

This article demonstrates in a step by step fashion how to use the Ajax Control Toolkit’s AutoCompleteExtender control with an animated gif ajax-loader progress indicator while the target dropdown of the AutoCompleteExtender is waiting to be loaded.

This article relies on the fact that you, the developer, already have the toolkit loaded and that a medium level of knowledge of Asp.net, C# and Visual Studio operations are understood. This targets VS2008 SP1, .Net/Asp.net 3.5 SP1,  Ajax Control Toolkit 3.0.20820.

Steps

  1. Create the  animated GIF which will be used. Go to the site AjaxLoad.Infowhere one can create animated loading gifs and download them for free. Use firefox to view the site because one can see the types of icons in the dropdown, on the site, where IE does not. Once done save your the icon to your project.
  2. The Ajax extender will need to call a webservice to get the data. Create a webservice (.asmx oldstyle type), in this example named AjaxServices.asmx. Within that service add, or uncomment out,  the following attribute declaration to allow the service to have communication from the page to the service in a scriptable manner.
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]
    public class AjaxServices : System.Web.Services.WebService
    {
  3. Create a web method, the actual method name can be anything, but it must have the exactinput parameters and return value as shown below. Note we introduce a delay for this demonstration effect (highlighted line) you will not need to do that. Right. 🙂
    [WebMethod]
    public string[] GetUsers( string prefixText, int count )
    {
        List<string> names
       = new List<string>()
        { "Alpha", "Beta", "Gamma", "Delta", "Omega" };
    
        // Fake delay to see the update gif
        System.Threading.Thread.Sleep( 5000 );
    
        return names.ToArray();
    }
  4. On the web page where the controls will be, add the asp:ScriptManager control. Within the manager we need to let it know our web service we have created and it will be using.
    <asp:ScriptManager ID="ScriptManager1"
        runat="server"
        EnablePartialRendering="true">
    
     <Services>
       <asp:ServiceReference Path="~/AjaxServices.asmx" />
     </Services>
    
    </asp:ScriptManager>
  5. Add three more controls, an asp.net textbox  the autoCompleteExtender and the image gif. Here are the controls all added. Note how the extender references the webservice and webmethod, the textbox and calls a javascript function which we will show in step 6. Change the MinimumPrefixLength to two or three if the data list is quite huge. in your system.
    <table>
    <tr>
        <td>User:&nbsp;&nbsp;</td>
        <td><asp:TextBox ID="tbUser" runat="server"></asp:TextBox></td>
        <td>&nbsp;</td>
        <td><img id="processing" style="visibility:hidden" src="ajax-loader.gif" /></td>
        <td>&nbsp;</td>
        <td><cc1:AutoCompleteExtender
       ID="AutoCompleteExtender1"
       runat="server"
       TargetControlID="tbUser"
       ServicePath="AjaxServices.asmx"
       ServiceMethod="GetUsers"
       MinimumPrefixLength="1"
       EnableCaching="true"
       CompletionSetCount="25"
       onclientpopulating="ShowIcon"
       onclientpopulated="ShowIcon"/>
        </td>
    </tr>
    </table>
  6. The image starts off hidden. We will write a javascript method, to swap its state.  Place the code on the page after the <Head> section. The code has to know the name of the img tag. The code should look like this:
<script language ="javascript">

function ShowIcon() {

    var e = document.getElementById("processing");

    e.style.visibility =  (e.style.visibility == 'visible') ? 'hidden' : 'visible';

}

</script>

That is it! When done and the extender calls the webservice the gif gets displayed and the user knows something is happening. When the processing is done the same javascript method is called to turn it off.

Note: If no data is found, the final hook call to onclientpopulated is not done and the icon will still be displayed. Possibly you can send back text like “No data found”, but that will be populated in the textbox and has its drawbacks. That is the monkey’s paw wish caveat of using this methodology.

Share

10 Comments

  1. Olga lednichenko says

    thanks so much this really helps..

    i have a request -?

    [1] can you please explain how to get images associated with the completion list?
    [2] when the list comes up… can i access ome event handlers -? lets say i have a contact book and i have some images[thumbnails] of those contacts and i want those images -> to apear too in the list + i want to access which rowthe user selects .. etc etc to do some processing

    thanks a lot
    cheers
    olga lednichenko

    Reply
    • omegaman says

      Sorry Olga…I cannot directly address you issues. I recommend you post to the Asp.Net Forums for a response.

      Reply
  2. poker omaha game says

    It seems the animation stops playing when the content has been returned to the page and is rendering. Have you found a way around this? If there is a lot of content it can take a while to render, and so it makes the animation kind of pointless. I have read somewhere that an UpdatePanelAnimationExtender should stop this problem, but Ive followed your example and its still happening.

    Reply
    • omegaman says

      That stop playing you mentioned has to specific to the user’s browser, since its just an animated gif and not controlled by the codebehind. If this is critical, maybe a different method of showing updating has to be done. BTW your moniker named (or link) dropped your comment into the spam. I just happened to catch it when going to dispose of Spam comments.

      Reply
  3. krishnapriya says

    Sorry the above program is not working

    Reply
    • omegaman says

      Can you be more specific as to the problem you have encountered?

      Reply
  4. Taoufik says

    Hi every one,

    Thank you for this article. but I have a request:(((

    Now I can use the textbox autocomplete but my problem that i use (Key/Value) mean that i should display for exemple the country name and use the country iso code in the code behind…. so how can i do that by using ajax (TextBox or DropDownList)

    Best Regards
    Taoufik

    Reply
  5. nEsHa says

    This example deomstrates AutoComplete as DropDown, because it doesn’t filters the result on prefixText…

    I think that’s what krishnapriya wanted to say

    Reply
  6. Amit says

    this is a very nice article

    C#.net3.5 autocomplete within gridview but
    wait…
    i have a table (named- ItemInformation and fields id(PK),ItemCode , Name , Color,Price,Quantity).
    Now on .aspx page within the gridview(which is empty on form load) i have some textboxes for ItemID,ITemCode,color, Name,Price,Quantity etc.with a button to add a new row.

    Now i want to apply autocomplete on ITemCode textbox and after selecting from that autocomplete values, the other textbox fields such as(name,id ,color,price )are automatically filled regarding to that selected value.

    plz help me.

    Reply
  7. Deepesh Kapadia says

    HI, I followed your tutorial and it doesnt seem to work. The loader appears correctly but not the list of names. ANy idea that i must be missing something?

    Reply

Leave a comment

(required)
(required) (will not be published)

This site uses Akismet to reduce spam. Learn how your comment data is processed.