The auto complete functionality is a useful aid where suggestions are displayed when you type into a textbox. You would have come across this in many sites. Looking at how to implement this in an ASP.NET application using the AJAX control toolkit, it was not a complex task, as the great video tutorial here demonstrates. But the video (and many other articles on the web) showed how to use the auto complete extender hooked up to a ASMX file. Almost all the articles described how AJAX retrieves the auto suggestion text via a web service and displays them when the user types into the text box. But my need was to get the suggested text from the code behind of the ASPX file where the textbox was displayed. I needed the AJAX control to communicate with a method in the ASPX code behind, instead of a service. Documented in the following sections is how I got it working.
In case you don’t have the AJAX control toolkit downloaded and integrated with Visual Studio, the video here shows how to obtain the toolkit, and set it up in the development environment. I used Visual Web developer 2010 express for the example given here. Opening up the IDE, create an ASP.NET web project and reference the AJAX control toolkit DLL. You can also create a new tab in the toolbox and add the controls to it by selecting the DLL (the steps to do this are in the same video link). Drag a textbox to the default.aspx page, this will be the textbox where the user will type in and get the autocomplete suggestions.
Switching to source view in default.aspx, drag a ToolkitScriptManager from the AJAX control toolkit tab in the toolbox into the source window:
You need a script manager when using the AJAX control tools. The script manager takes care of generating the code to communicate with the back end using AJAX without doing a post back of the page. ASP.NET AJAX extensions already provide a script manager, but the ToolkitScriptManager inherits from this previous component, and is better in performance due to script combining.
Next, drag the AutoCompleteExtender control onto the source window. This will be the AJAX component that specifies which control in the ASPX page gets the auto complete functionality and how:
Some properties in the AutoCompleteExtender have to specified in order for the auto complete functionality to work, and these are shown in the below screenshot:
TargetControlID is the ID of the textbox to which the AutoCompleteExtender is connected. ServicePath and ServiceMethod are the web service path and web method respectively. But as we are retrieving auto complete suggestions from our default.aspx.cs code behind, the ServicePath is left empty, and the ServiceMethod ‘GetNames’ is the name of the static method in the code behind that will return the array of strings triggered by the AJAX request.
The code behind file, default.aspx.cs will contain the method that will return the array of strings to the AJAX control in the ASPX page. The method has to be declared static, and should be decorated with the ‘WebMethod’ and ‘ScriptMethod’ attributes. WebMethod is used to specify that the method is part of a service, and ScriptMethod is used to identify a method that AJAX can invoke. The complete code in the default.aspx.cs is given below:
Some specifics to note:
- The
ServiceMethod can have any name, but it should be declared static, and it should be decorated with the WebMethod and ScriptMethod attributes. - The parameters of the method should be ‘
prefixText’ and ‘count’, of type string and int, respectively. They are case sensitive and cannot be changed to any other variable name. prefixText is the text we enter into the textbox, sent over by AJAX, and count is the number of characters typed in. They can be used in many ways, specially when retrieving string values from a database. - The method should return an array of
strings. There are workarounds to return collections and key-value pairs, but they are out of the scope of this post.
When you debug the web application, you should see the auto complete functionality that you have wired up to your textbox, when you type in some text:
I had to type a minimum of three characters before the auto complete kicked in, but this minimum number of characters can be set in the AutoCompleteExtender control, using the ‘MinimumPrefixLength’ property. This basically covers the essentials needed for passing data to the auto complete AJAX control using a method from the ASPX code behind file, instead of a Web service or WCF service.
CodeProject
