Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Make Your AJAX Apps Wiser Using Auto-Complete Functionality in Atlas : Page 2

The whole point of AJAX is to make things faster, so why not include functionality that completes your users' thoughts as they type? In Atlas you can easily implement auto-completion functionality using the AutoCompleteExtender control.




Full Text Search: The Key to Better Natural Language Queries for NoSQL in Node.js

Adding a Web Service
The next step is to add a Web service to the current project. Right-click on the Project name in Solution Explorer and select Add New Item… (see Figure 5).

Select the Web Service item and use the default name of WebService.asmx.

Author's Note: In this step you add a Web service to your current project. Do not add a Web Service project to the current solution. The AutoCompleteExtender control uses a Web service that is hosted within the current project.

Figure 6 shows that two files are added—WebService.vb and WebService.asmx (this name corresponds to the value set in the ServicePath attribute).

Figure 5. Here I'm adding a new Web service to the current project.
Figure 6. Here you can see the Web services files in the current project.

The Web service will read from a file containing a list of country names but first you need to create the file. This file will be a list of country names and it will be the basis for the Web service functionality. Compile a list of country names and put it in a text file; save the file as C:\AutoComplete\countries.txt. (The code download that comes with this article includes a pre-made text file with all country names that you can use.)

The list below shows some of the countries in the list in unsorted order:

  • Monaco
  • Macau SAR (PRC)
  • Hong Kong SAR (PRC)
  • Singapore
  • Gibraltar
  • Vatican City
  • Malta
  • Bermuda
  • Maldives
  • Bahrain
  • Bangladesh
  • ...
Double-click on the WebService.vb file and add the following web method:

<WebMethod()> _ Public Function GetCountries( _ ByVal prefixText As String, _ ByVal count As Integer) _ As String() Dim result() As String Dim countries() As String '---read the content of the text file--- Dim fileContents As String fileContents = _ My.Computer.FileSystem.ReadAllText( _ "C:\AutoComplete\countries.txt") '---load the countries into the array--- countries = fileContents.Split(vbLf) Dim listOfCountries As String = String.Empty '---find countries being with the prefixText--- For Each country As String In countries If country.StartsWith(prefixText, _ StringComparison.OrdinalIgnoreCase) Then '---add the country name to the list--- listOfCountries += country & vbLf End If Next '---convert the countries list into an array--- result = listOfCountries.Split(vbLf) '---sort the array--- Array.Sort(result) Return result End Function

The GetCountries() Web method name corresponds to the value set in the ServiceMethod attribute. In this method, you first read the list of country names into an array and then look for country names that begin with the string specified in the PrefixText parameter. The matching country names are saved into a string and eventually converted to an array and returned to the client.

In general, to tie up the AutoCompleteExtender control with a Web service, your Web method must have the following signature:

<WebMethod()> Public Function FunctionName( _ ByVal prefixText As String, _ ByVal count As Integer) _ As String()

The prefixText parameter will contain the text typed in the associated control (such as a TextBox). The count parameter indicates the maximum number of possible values to return to the client. You can name your function with any name you like, but the function name must be set accordingly in the ServiceMethod attribute in the <atlas:AutoCompleteExtender> element. The method returns a string array.

Testing the Application
Press F5 to test the application. In the TextBox control, notice that as you type each character a list of matching country names will be shown (see Figure 7).

A Word about Web Services
Earlier on, I mentioned that the Web service must be hosted within the same Atlas application and not as a separate Web service project. Why is this so? The reason is that Web services hosted within an Atlas application are able to generate Javascript proxies to be used by the client browser. To view the proxy generated, select the WebService.asmx file in Solution Explorer and then press F5. Append the "/js" string to the back of the URL and you should be able to see the Javascript proxy (see Figure 8).

Figure 7. Testing the application.
Figure 8. Viewing the Javascript proxy.

A normal Web services project (non-Atlas applications) will not support the generation of Javascript proxy. Hence, if you really need to host your Web service as a separate project, the easiest way would be to create an Atlas project and then add a Web service item to the Atlas project.

Assuming you have a separate Atlas project named AtlasWebService and it contains a Web service file named WebService.asmx, to use this web service in your current Atlas application, you would modify the ServicePath attribute as follows:

<atlas:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="GetCountries" ServicePath="http://localhost/AtlasWebService/WebService.asmx" MinimumPrefixLength="1">

One important point to note here is that, due to security constraints, the AutoCompleteExtender control requires that both the Atlas project and the Web service must be hosted on the same server (and running on the same port number). In this example, both must be hosted by IIS. Trying to run this example using the built-in Web server in Visual Studio 2005 will not work, because different projects will run on different port numbers. If you try to connect to external web services, you will get an error. On the next page I'll discuss a way of circumventing this restriction.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date