Friday, August 03, 2007

Using the AjaxControlToolKit AutoCompleteExtender

Well, it's just as in the AjaxControlToolKit page for the AutoCompleteExtender control. But here is a quick dirty list of the steps:

Option A: (the static page method option)

  1. Add a TextBox to your page
  2. Add the AutoCompleteExtender
  3. Set the ScriptManager property EnablePageMethods to true
  4. Add a static method to the page, one that gets a string and an integer as parameters and returns a string array
  5. Decorate it with [WebMethod(true/false)]. If you set the WebMethod parameter to true, it will have access to the Session
  6. Make sure to return the list of strings depending on the string parameter (which represents what was typed in the TextBox)
  7. Warning! If the method is faulty, you will get no error message, the autocomplete will simply not work.
  8. Warning! Having a different method signature will also cause this to not work.
  9. Set the properties for the AutoCompleteExtender: TargetControlID with the ID of the TextBox, MinimumPrefixLength with the count of typed characters from which to attempt autocomplete, ServiceMethod with the name of the static page method and CompletionInterval with the miliseconds before it attempts autocomplete.

Option B: (the web service option)

  1. Add a TextBox to your page
  2. Add the AutoCompleteExtender
  3. Add a webservice to your web site
  4. The webservice must have [ScriptService] decorating it's class in the codebehind
  5. Add a NOT static method to the webservice, one that gets a string and an integer as parameters and returns a string array
  6. Decorate it with [WebMethod(true/false)] and [ScriptMethod]. If you set the WebMethod parameter to true, it will have access to the Session
  7. Make sure to return the list of strings depending on the string parameter (which represents what was typed in the TextBox)
  8. Warning! If the method is faulty, you will get no error message, the autocomplete will simply not work.
  9. Warning! Having a different method signature will also cause this to not work.
  10. Set the properties for the AutoCompleteExtender: TargetControlID with the ID of the TextBox, MinimumPrefixLength with the count of typed characters from which to attempt autocomplete, ServiceMethod with the name of the WebMethod in the webservice, CompletionInterval with the miliseconds before it attempts autocomplete and ServicePath to the path of the asmx path.


Now it should work.

Code:

//=== AutoComplete.cs - the web service ===
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class AutoComplete : WebService
{

[WebMethod(true)]
[ScriptMethod]
public string[] GetList(string prefixText, int count)
{
string[] arr=new string[] {'list','of','words'};
return arr;
}
}

//=== Web page codebehind
[WebMethod(true)]
[ScriptMethod]
public static string[] GetList(string prefixText, int count)
{
string[] arr=new string[] {'list','of','words'};
return arr;
}


=== Web page ===

<asp:TextBox ID="textboxWithAutoComplete" runat="server">
<cc1:AutoCompleteExtender ID="autoCompleteExtender1" runat="server" TargetControlID="textboxWithAutoComplete"
MinimumPrefixLength="0"
ServiceMethod="GetList"
CompletionInterval="0"
ServicePath="AutoComplete.asmx"
>
</cc1:AutoCompleteExtender>

WARNING! The parameters of the web method must be named prefixText and count or the AutoCompleteExtender will NOT WORK!

A small paragraph that most people miss on the AjaxControlToolKit sample page says: Note that you can replace "GetCompletionList" with a name of your choice, but the return type and parameter name and type must exactly match, including case.

3 comments:

Anonymous said...

very good, you just missed "static" int your example code for web page method

Siderite said...

Thank you. I have remedied the issue.

Pravesh Singh said...

This is best one article so far I have read online. I would like to appreciate you for making it very simple and easy. I have found another nice post related to this post over the internet which also explained very well. For more details you may check it by visiting this url.......

Ajax Toolkit AutoCompleteExtender Control in Asp.Net

Thanks