ASP.NET AJAX – Working with AutoCompleteExtender in the AJAX Toolkit

CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Introduction

Learning ASP.NET AJAX seems inevitable for most .NET developers, since it truly improves the user experience and also helps improve the performance of the web pages like partial page refreshes, calling services from the client side and so on.

In addition to the basic controls like UpdatePanel which are added to Microsoft Visual Studio by default, Microsoft also has released AJAXToolkit which is an out-of-the-box component. The AJAXControlKit has the extender AJAX controls which can be used as extenders for the existing ASP.NET controls in order to inject the ajaxified behavior on to them.

In this article we will be looking at an extender for the text box control called AutoCompleteExtender. You can download the latest releases of the AjaxToolKit from here.

AutoCompleteExtender control

The AutoCompleteExtender control is an extender for the ASP.NET TextBox control. This enables the list of items to be displayed in the sliding panel which slides down the bottom of the textbox based on the entered text in the textbox. It comes in handy when you want the users to know the items already exist in your application which they can choose or allow them to enter a new item which is not present in the list.
The autocomplete extender control requires a webservice to expose a method to return the items based on the entered text. This service will be called by the extender control in the AJAX way.

Let us create a demo application and implement the autocomplete extender functionality.

Demo Application

Let us use ASP.NET 4.0 and Microsoft Visual Studio 2010 for developing the demo application. As a first step create a simple Website and name it as AjaxControlKitDemoWebsite.

Create a Webservice

The autocomplete extender requires a webservice which exposes a method returning a type string array and accepts prefix text, count or prefix text, count, contextkey as parameters.

Create a folder called Services under the website and add a webservice file with .asmx file, name it as DataService.asmx. Go to the server side code behind of the DataService.asmx file and add the below code.

[System.Web.Script.Services.ScriptService]

public class DataService : System.Web.Services.WebService {

    public static IList<string> _cityList;

    public DataService () {
    }
    [WebMethod]

    public string[] GetCities(string prefixText, int count) {
        //Gets the city list

        IList<string> cityList = GetCityData();
        //using linq to select the cities based on the prefix text

        var result = from city in cityList.AsEnumerable()

                     where city.ToUpper().StartsWith(prefixText.ToUpper())

                     select city;

        //return the result as a string[] by taking only the top n

        return result.Take(count).ToArray<string>();

    }
    private IList<string> GetCityData()

    {

        if (_cityList == null)

        {

            CreateCityList();

        }
        return _cityList;

    }
    private static void CreateCityList()

    {

        _cityList = new List<string>();

        _cityList.Add(“Boston”);

        _cityList.Add(“NewYork”);

        _cityList.Add(“California”);

        _cityList.Add(“New Jersey”);

        _cityList.Add(“Denver”);

        _cityList.Add(“Detroit”);

        _cityList.Add(“Idaho”);

        _cityList.Add(“Ohio”);

        _cityList.Add(“Los Angeles”);

        _cityList.Add(“Las Vegas”);

        _cityList.Add(“Philadelphia”);

        _cityList.Add(“Phoenix”);

        _cityList.Add(“San Antonio”);

        _cityList.Add(“San Diego”);

        _cityList.Add(“Dallas”);

        _cityList.Add(“San Jose”);

        _cityList.Add(“San Francisco”);

        _cityList.Add(“Columbus”);

        _cityList.Add(“Seattle”);

        _cityList.Add(“Washington”);

        _cityList.Add(“Oklahoma City”);

        _cityList.Add(“New Orleans”);

        _cityList.Add(“Honolulu”);

        _cityList.Add(“Virginia Beach”);

    }    

}

In the above code if you see there will be an attribute [System.Web.Script.Services.ScriptService] which will help the AJAX from the client side to invoke the web service. For the demo purpose I have created the method GetCities. Here is a small description:

• Return Type – string[]


• Parameters
  
  
  
  • prefixText – Text entered by the user in the textbox
  
  
  • maximum number of items returned
  
  
  
  
  

The parameter values will be passed by the extender control AJAX scripts while invoking the web service. You can also have another parameter of type string to which the context key specified in the extender control.