I recently had some trouble with the .NET AJAX Toolkit AutoComplete Extender which did not seem to be working despite copying all of the code directly from the documentation. I discovered two missing pieces that were not obvious (to me at least).
The first is that I was trying to use a ServiceMethod without a ServicePath – according to the documentation this should allow using a method within the same aspx page as the callback method. I would imagine that this could work however getting the aspx page to act as a web service wasn’t critical for my purposes and so I didn’t try very hard to get it working. Instead I wrote a separate web service class for the callback as is shown in the documentation.
The second issue had to do with the .NET attributes that must be included. The documentation provides the following example for the method (note the “WebMethod” and “ScriptMethod” attributes):
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
Public string[] GetCompletionList(string prefixText, int count) { ... }
What is less obvious, however, is that the web service class is required to have an attribute as well. A “ScriptService” attribute is require like so:
[WebService(Namespace = "http://www.verysimple.com/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.Web.Script.Services.ScriptService] public class AutoComplete : System.Web.Services.WebService
I found this useful bit of info in the development forums but it would have saved me about four hours of suffering if it was just included on the example page. Simply adding this attribute solved all of my problems and the autocomplete extender worked perfectly
[UPDATE - bear in mind this post was written in 2007 before we had all of the excellent browser debugging tools that are now available. Fiddler was a lifesaver! Most browsers have this feature built-in these days. And now on with the original article...]
In the process of solving this error, I used a handy utility by the name of Fiddler which allows you to spy on all of the HTTP traffic. I had initially suspected that the autocomplete javascript was simply not making the AJAX post because I couldn’t detect any activity using a javascript debugger and no javascript exceptions were being thrown. Using Fiddler, I saw the post was in fact being made. This is extremely useful for AJAX applications because you can see the raw output of the web service as it is being requested – which in my case contained some run-time errors. The autocomplete control seem to just quietly choke when the webservice fails.
One thing to note about Fiddler is that, though it works with any browser, only IE works right out of the box without some manual configuration. I put my other browser away for a bit and used IE. Another useful tip is that Fiddler didn’t seem to intercept traffic when using “localhost” as the hostname. When I used my local IP address, however, (for example 192.168.1.25) it worked perfectly.
Please feel free to post any comments. In particular I would be interested to know if you are able to use the aspx page as the ServiceMethod without creating a separate web service.
Methods that are exposed to JavaScript from pages are called PageMethods. By default, this isn’t enabled. You have to enable it from the ScriptManager:
Also, the ServicePath for the AutoCompleteExtender should point to the ulr of the page:
I tried to post the sample code, but i think the blog does not accpet XML ???
insert EnablepageMethods=”true” inside script manager.
Thanks Nishanth – I’m going to try that out. I like the idea of having a single webform, and the methods that it requires via AJAX are also contained within that same class. For little things like populating a combo box or something it seems like a nice option for keeping things organized.
–Use the below code in Default.aspx
–Use the below code in Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static string[] GetCities(string prefixText)
{
try
{
DataSet ds = new DataSet();
DataTable dt = new DataTable();
dt.Columns.Add(“Col1″, typeof(string));
DataRow dr;
dr = dt.NewRow();
dr[0] = “iTEM1″;
dt.Rows.Add(dr);
DataRow dr1;
dr1 = dt.NewRow();
dr1[0] = “iTEM2″;
dt.Rows.Add(dr1);
DataRow dr2;
dr2 = dt.NewRow();
dr2[0] = “iTEM3″;
dt.Rows.Add(dr2);
DataRow dr3;
dr3 = dt.NewRow();
dr3[0] = “SubiTEM1″;
dt.Rows.Add(dr3);
DataRow dr4;
dr4 = dt.NewRow();
dr4[0] = “SubiTEM1″;
dt.Rows.Add(dr4);
DataRow dr5;
dr5 = dt.NewRow();
dr5[0] = “Sanda1″;
dt.Rows.Add(dr5);
DataRow dr6;
dr6 = dt.NewRow();
dr6[0] = “Sanda2″;
dt.Rows.Add(dr6);
ds.Tables.Add(dt);
List cityList = new List();
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
if (ds.Tables[0].Rows[i][0].ToString().ToLower().StartsWith(prefixText))
{
cityList.Add(ds.Tables[0].Rows[i][0].ToString());
}
}
return cityList.ToArray();
}
catch (Exception ex)
{
string ss = ex.Message;
int r = 6;
return null;
}
}
protected void Page_Load(object sender, EventArgs e)
{
}
}
This is a basic exercise for learning AJAX auto complete extender
Very useful!! saved me couple of hours of debuging
I want to use pagemethod but unable to do so. ScriptManager does not have property as EnablePageMethod. Please help , how can i call a page method in servicepath of DynamicPopulateEstender.
Good afternoon!! I read your article – good tips – I was not able to eliminate the webservice – I followe all the steps listed – any ideas?? Please let me know – Thanks!!
Thanks! I spent the whole day yesterday trying to figure this out =D
Thanks you saved my time. By adding
[System.Web.Script.Services.ScriptService]
this property it worked
Why am i unable to access
System.Web.Script.Services.ScriptService
am i missing a reference??
Gottcha!!!
I added a reference to System.Web.Extensions
Now i could access
System.Web.Script.Services.ScriptService
Tnx, saved me a lot of work
Thank you thank you thank you!
I have seen an article. That explains this. Below is the url of the article. http://www.cool-tips.net/autocompleteextender.aspx Plz go thru it. Hope it will help.
Also MAKE SURE to delete the “static” keyword, when moving a Script Method embedded in ASPX file, to a web service.
Thank you, this was eating me…
Hi,
Thanks, it worked and saved a lot of time.Thanks a lot.I was missing the attribute [System.Web.Script.Services.ScriptService]in my webservice class.
Thank you very much, this saved me a lot of work
Thanks. Solved my problem instantly!
Folks,
An important information. I did all the stuffs which were told above but still could not see my Auto Complete Text Box working.
Spent a lot of time and found the problem. The issue was the parameter names in the method should be prefixText and count. For e.g., GetCompletionList(string prefixText, int count). The method name can be any one. But it does not work if you give a different parameter name say, “prefixTag”.
Is it not ridiculous?
Thanks. Nice Post. Its useful for me.
You are a saviour!!
HI When u are using Ajax toolkit.First thing u have reference the Ajax dll. Then reference the assembly part inside the page then. Inside web.con fig for Ajax toolkit we have to add these information. http://littletalk.wordpress.com/2008/12/07/webconfig-for-using-ajax-tool-kit/ Thanks
I love you!
My problem was the second issue!
Thank you so much.. I spent about 6 hours banging my head against the desk trying to get this working. I am developing in VB.NET which made it even more difficult to make sure everything was correct and I overlooked the ScriptService. Thanks again!
Hi Guys,
Does anyone got the idea.. about how to invoke the WebService method used for AutoCompleteExtender from JavaScript…
The requirement is to get the suggest List not only by typing in the search text but also after hitting the Enter.
Any help is greatly appreciated..
Not sure why the toolkit is so poorly documented, but you saved my day today. Thanks.
Its not work in VS 2008
help needed.
Thanks for the hint that the issue is the parameter list – I didn’t think renaming the parameters would be an issue.
Everything was working fine for mine then I changed it from an Includes folder to a Services folder which automatically changed the namespace from .Includes to .Services
Be sure to check that your namespace is included in whichever script is calling your webmethod.
Look guys, here is the solution
The string array return web method should satisfy the following conditions
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[] GetCompletionList(string prefixText, int count) { …}
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.
wish that will solve your problem.
Kind Regards,
Haitham Owais
@Sharmin Jose
i was really got frustrated with this autoCompleteextender, ur suggestion “prefixText” WORKED perfectly. i had all lowercase “prefixtext” STILL I WONDER what this case senitive thng has to do with it … GOD knows ..thanks a lot
Great tips and information – I don’t know how many dents I have in my head because I was banging my head against the wall trying to make this work – And to Sharmin Jose – THANK YOU for the tip about changing the parameter name – I had modified mine also and couldn’t understand why it was not working – now I know. Saved my butt!
Best Regards
Thanks a Lot……….. i am new to this ajax and i wasnt getting the autocomplete to get fired…
This really helped me… now my autocomplete is working….
every thing above mentioned but it did not work for me. When i downloaded from asp.net site it works but i manually done another one same to the site example except i used my own database to retrieve values from a table. it’s not giving error. i am using firefox 3.6
My c# code in webservice
public string[] GetList(string prefixText, int count)
{
string[] ListValues;
string str = ConfigurationSettings.AppSettings["ConStr"].ToString();
SqlConnection cn = new SqlConnection(str);
SqlDataAdapter da = new SqlDataAdapter(” SELECT top 10 MembershipName FROM Member WHERE MembershipNAME LIKE ‘” + prefixText.ToUpper() + “%’”, cn);
DataTable ds = new DataTable();
da.Fill(ds);
ListValues = new string[ds.Rows.Count];
int i = 0;
foreach (DataRow dr in ds.Rows)
{
ListValues[i] = dr[0].ToString();
i++;
}
return ListValues;
}
but its not working
public string[] GetList(string prefixText, int count)
{
string[] ListValues;
string str = ConfigurationSettings.AppSettings["ConStr"].ToString();
SqlConnection cn = new SqlConnection(str);
SqlDataAdapter da = new SqlDataAdapter(” SELECT top 10 MembershipName FROM Member WHERE MembershipNAME LIKE ‘” + prefixText.ToUpper() + “%’”, cn);
DataTable ds = new DataTable();
da.Fill(ds);
ListValues = new string[ds.Rows.Count];
int i = 0;
foreach (DataRow dr in ds.Rows)
{
ListValues[i] = dr[0].ToString();
i++;
}
return ListValues;
}
You have Code [VB]
Refer Post by Sharmin Jose December 22, 2008 at 4:53 pm
It helped me to get rid of my issue,
I was not able to debug the web method as I had renamed parameters used in its signature
Thanks Sharmin
Thank you ….
Thanks a lot!!! It saved a lot of time!!
THANK YOU VERY MUCH
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…….
http://mindstick.com/Articles/a7e242ef-fd21-4d4a-8cc6-ccbf4972be65/?Ajax%20Toolkit%20AutoCompleteExtender%20Control%20in%20Asp.Net
Thanks
Best article to the problem which seems to occur very often.
I’ve tried creating a seperate asmx file , taking into account your hints, didn’t work.
In the end I’ve ended with leaving the handler in the aspx page **AND** replacing the ScriptManager with the one provided by the toolbox, which instantly made it work.
The reason why I changed the control is, I’ve tried to debug the thing with Fidler but now HTTP requests were being sent to the server while pressing keys.