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