ASP.NET: Adding a simple Ajax Web Service with AutoCompleteExtender in Visual Studio 2008 Express

I'd been really struggling to get any kind of Ajax functionality in my ASP.NET project. The first problem was that I couldn't be sure if I had enabled the Ajax extensions in my project, so to verify it I decided to try to create a new 'ASP.NET Ajax Enabled Web Site' template in Visual Studio.

But I couldn't see that option, and wondered if I had the wrong version of the .NET framework installed. No - that was fine, I had 3.5. So it must be something else. Until I discovered that Visual Studio 2008 Express automatically adds the Ajax extensions to any new ASP.NET project you create in it. So that's good.

But when I went to add an AutoCompleteExtender to my ASPX page, I couldn't see the control in my Toolbox. This was odd. But EVENTUALLY I discovered that I was missing the AjaxControlToolkit.dll from my project's Bin folder. This comes as part of the Ajax Control Toolkit, which you can download from CodePlex:



So I downloaded the Binary package (to avoid all the extra crap that comes with it) and dropped the AjaxControlToolkit.dll into the Bin folder of my Project. Then I right-clicked on the Toolbox in VS2008 and selected Choose Items. Selecting the DLL file now meant that after a couple of seconds of chewing it over, the Ajax controls I needed appeared in the Toolbox.

Now I had to see if I could get an extremely simple Ajax control set up on my page, just to see if it was working. So I dragged a new texbox onto my page, gave it a name and then dragged a ScriptManager control onto the page. Next, I had to add an AutoCompleteExtender control which would target the text box I chose, and Ajax enable it.

<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" MinimumPrefixLength="1" ServiceMethod="HelloWorld" ServicePath="WebService.asmx" TargetControlID="TextBoxAjax"> </cc1:AutoCompleteExtender>

So now I have an Ajax enabled control on my page, and finally I needed to set up a web service to feed it something. So I created a new web service called WebService.asmx and added the following code to it:

Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.ComponentModel

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<System.Web.Services.WebService(Namespace:="http://tempuri.org/")> _
<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ToolboxItem(False)> _
Public Class WebService
Inherits System.Web.Services.WebService

<WebMethod()> _
Public Function HelloWorld(ByVal testStr As String) As String()
Dim returnString(2) As String

returnString(0) = "one"
returnString(1) = "two"
returnString(2) = "three"

Return returnString
End Function

End Class

It creates a WebService.asmx.vb file too, which actually contains the code above. So all the HelloWorld function does is return a string array to the Ajax textbox.

I built and started the app, and voila - when I type something into the box, the values 'One','Two','Three' appear below. It's not smart at all at this point, since the web service just returns those values no matter what is typed into the text box. But it's square one, and it's a good place to start.


Next step, add some proper code to the Web Service which returns the correct autocomplete values based on what's typed.