VSM Cover Story

Create Rich Web Apps with AJAX

AJAX has caught on tremendously as a method for building dynamic and interactive Web sites. Learn what AJAX is, what its benefits are, and how you can implement the technology in your own applications.

• By Dan Wahlin
• 12/01/2007

Microsoft's ASP.NET AJAX Extensions provide a simple and productive way to AJAX-enable a Web site without writing a lot of JavaScript code. Adding AJAX functionality to a Web site allows users to experience a richer user interface that reduces or eliminates the need to reload the entire page every time users click on a button or select an item from a drop-down list. Adding AJAX functionality to a Web site also enables users to access the data they need more quickly and efficiently (see "Why Use AJAX?").

There's a simple way to add AJAX to your Web pages, and it's instructive to understand how that works, but that approach isn't robust enough for many real-world commercial development scenarios, such as the one this article discusses. The simplest way to add AJAX functionality to your site is to wrap page content in an UpdatePanel control's ContentTemplate. This approach requires only minimal effort (see Listing 1, for an example of using the UpdatePanel control and the Timer control). It's also an effective approach, but it sends ViewState back and forth between the client and server when asynchronous postback operations occur within the page. This can potentially lead to larger than expected request and response messages being exchanged. You can use tools such as Fiddler to view messages sent by UpdatePanel controls and monitor their content and size.

For many developers, the UpdatePanel is all they need to AJAX-enable their Web applications. However, other developers might need to minimize request and response messages as much as possible, suggest values to users as they type data into a textbox, or load and format data directly in the browser rather than building it on the server. In these situations, Web services provide a good alternative that you can use in concert with UpdatePanel controls on a page. Using Web services, you can pull data from the client directly, which makes the initial page load faster in the browser. In this article, I'll show you how to create Web services and consume them using ASP.NET AJAX and explain how you can use Web services with the ASP.NET AJAX Toolkit. I'll also introduce you to the real-world Amazon.com e-Commerce Service to demonstrate how the ASP.NET AJAX Extensions can enhance your overall productivity and allow you to integrate external data into your Web site with ease.

Web services have been supported in the .NET framework since its initial release in 2002. ASP.NET AJAX supports calling standard .NET Web services, but adds a slight wrinkle to the equation. Instead of sending standard Simple Object Access Protocol (SOAP) request and response messages, ASP.NET AJAX applications send JavaScript Object Notation (JSON) messages to services. JSON is a compact way to send data to and from a Web service and is supported in all major browsers (unlike XML and SOAP). Developers don't have to know JSON to utilize Web services because ASP.NET AJAX handles the serialization and de-serialization of message data into, and out of, JSON messages.

Several ASP.NET AJAX Extensions classes are used behind the scenes to allow ASP.NET AJAX applications to talk to Web services. First, an HttpModule named ScriptModule ensures that messages are routed to service methods properly using a technique referred to as Representational State Transfer (REST). Second, an HttpHandler named ScriptHandlerFactory plays a key role in handling calls made to back-end services, as well as calls made to profile and authentication services. Finally, an attribute named ScriptServiceAttribute marks a Web service as being AJAX capable. All Web services consumed by ASP.NET AJAX applications must contain the ScriptServiceAttribute reference.

Create a Web Service
Assume you want to create a Web service named MathService that exposes a Web Method named Add():

[ScriptService]
[WebService(Namespace = 
   "http://www.interfacett.com/")]
[WebServiceBinding(ConformsTo = 
   WsiProfiles.BasicProfile1_1)]
public class MathService : WebService
{
   [WebMethod]
   public int Add(int x, int y)
   {
      return x + y;
   }
}

You AJAX-enable the Web service's class by applying the ScriptSer­viceAttr­ibute class directly to it as shown. No other changes are required at the Web service level for AJAX-enabled applications to call it. Other classes such as ScriptMethodAttribute and Gener­ateTy­peAttribute can also be used in a Web service although they're not required. More information about these attributes can be found here.

Web services called by ASP.NET AJAX-enabled pages must be in the same domain as the page where the call originates from. This is due to security restrictions built into the XmlHttpRequest object used to make Web service requests. Although you can't call external Web services directly using ASP.NET AJAX, you can still make calls to external Web services by creating a local Web service that acts as the middleman. For example, assume you want to create a Web service that calls an Amazon.com service to retrieve book information (see Listing 2).

This Web service relies on a class named AmazonSearch to call the Amazon.com service through a Web service proxy object and retrieve the desired data. You can find the Web Service Description Language (WSDL) document that describes the Amazon.com Web service here, and you can sign up for a free access account here.

Amazon.com provides a free Web service called Amazon e-Commerce Service that you can use to retrieve information about books, DVDs, albums, and many other items sold on the Amazon.com Web site. By using the service, you can display Amazon.com products on your Web site and even receive a portion of sale proceeds for items purchased from your site. The service can be accessed for free once you've registered (registration is also free) and received an access key.

The Amazon.com e-Commerce Service supports the latest standards and the team supporting the service provides samples that demonstrate calling the service in multiple languages, as well as a forum for posting questions about the service.

You might wonder why I chose to use a Web service from a commercial vendor, such as Amazon, because this goes against the grain of VSM's usual approach. The reason: I wanted to show you a real-world implementation in action, as opposed to an example more theoretical than practical, and few non-commercial examples exist that have the robustness of Amazon's approach. Plus, it's free, and the terms of use are reasonable.

ASP.NET AJAX provides a simple and efficient mechanism for calling Web services that have been marked with the ScriptServiceAttribute class. You can't right-click on your Web site project in Visual Studio .NET 2005 and add a Web Reference to create a Web service proxy, but you can use ASP.NET AJAX's ScriptManager control to create a client-side proxy that handles calling the service and passing JSON messages. You accomplish this using the ScriptManager's Services property and the ServiceReference control:

<asp:ScriptManager ID="smp" runat="server">
   <Services>
      <asp:ServiceReference 
         Path="AmazonService.asmx" />
   </Services>    
   <Scripts>
      <asp:ScriptReference 
         Path="Scripts/Amazon.js" />
   </Scripts>
</asp:ScriptManager>

Defining a service reference on the ScriptManager control causes a client-side proxy class to be generated and added to the page at runtime. This proxy code looks something like this:

<script src="AmazonService.asmx/js" 
      type="text/javascript"></script>

Note that the ASMX file is called directly and that "js" is added to the end of the path. The service is marked with the ScriptService attribute, so the ASP.NET AJAX runtime generates the JavaScript proxy code needed to call the service automatically.

To call a Web service using a client-side proxy object, you reference the service's namespace, class, and method name using JavaScript. Parameter data required by the Web service's Web Method is passed to the method along with the name of the callback method. All calls to Web services are made asynchronously, and the callback method is invoked when a Web service call returns data to the browser.

When the page containing the client-side Web service proxy first loads, it calls the SearchBooks() method (see Listing 3). This method locates a div tag with an ID of divAmazon and assigns a value of "Loading Books" to its innerHTML property. It then calls the local AmazonService.asmx service by referencing the service's namespace (GolfClubShack), class (AmazonService), and Web Method name (GetBooks). The GetBooks() method accepts three parameters, including the book text to search, the data results page to grab, and the name of the callback method. In this example a callback named OnWSCallback() is defined.

Data returned from the Web service is routed automatically to the OnWSCallback() method, which processes the data (see Figure 1). The method iterates through all of the books returned and accesses different properties of each book, such as ImageUrl, Title, and Price. Note that you access each property in a strongly typed manner, much as you would when writing server-side code using C# or VB.NET. This strongly typed access to object property data is made possible by the proxy code generated by the ScriptManager.

In addition to shipping the ASP.NET AJAX Extensions, Microsoft has also released a separate download called the ASP.NET AJAX Toolkit (also available here). This toolkit contains more than 30 AJAX-enabled controls for performing a variety of tasks. One of the controls that ties in nicely to Web services is the AutoCompleteExtender control. You've probably seen such a control if you've visited the Google suggest site or have the Google search box embedded in your browser.

You can use this control to provide suggestions to end users as they type into a textbox. The control works by reading characters typed into a textbox and passing them to a Web service. The Web service performs a lookup against a data source to find data items that match with the initial characters typed and passes the matching items back to the AutoCompleteExtender control. The control then shows the matching data items directly below the textbox so that users can select them (see Figure 2).

Using the AutoCompleteExtender requires that you copy the AjaxControlToolkit.dll assembly into your Web site's bin directory. This assembly is available in the ASP.NET AJAX Toolkit. You need to reference the AjaxControlToolkit.dll assembly once the assembly is available to use. Do this in web.config or in the page where you want to use the AutoCompleteExtender control.

Add this code to the web.config file's <system.web> begin and end tags to reference the assembly in web.config and make it available for all pages on a Web site:

<pages>
   <controls>
      <add tagPrefix="toolkit" 
         namespace="AjaxControlToolkit" 
         assembly="AjaxControlToolkit" />
   </controls>
</pages>

Add this code to the top of a page to reference the assembly in a specific page:

<%@ Register
   TagPrefix="toolkit" 
   Namespace="AjaxControlToolkit" 
   Assembly="AjaxControlToolkit"
%>

After you reference the assembly, you can define the AutoCompleteEx­tender in the target page. The control boasts several key properties, including the target control ID to extend the textbox with auto-complete behavior, the minimum number of characters to accept in the target control before calling the Web service, and the name of the Web service and Web Method that will be called to look up data items. This code defines an AutoCompleteEx­tender control that extends a TextBox with an ID of txtSearch:

<toolkit:AutoCompleteExtender id="ac" runat="server"
   ServicePath="~/AutoCompleteService.asmx"
   ServiceMethod="GetSearchItems"
   TargetControlID="txtSearch"
   EnableCaching="true"
   MinimumPrefixLength="2"
/>

Once the number of characters to watch for has been reached (as defined using the AutoCompleteExtender's MinimumPrefixLength property), the Web service defined on the control is called to look for matching data items. For example, this Web service handles searching for matching data items and returning them to the AutoCompleteExtender control to display on the page (see Listing 4).

The GetSearchItems() Web Method accepts two parameters: prefixText and count. The prefixText parameter contains the characters typed by the end user, while the count parameter contains the number of matching items to return back to the AutoCompleteExtender control. Data items that start with the value supplied by the prefixText parameter are returned from the Web Method in a string array.

The ASP.NET AJAX Extensions provide several different ways to retrieve data from a back-end server using AJAX technologies. Although the UpdatePanel control will be all that's needed in many situations, integrating Web services into your Web applications can result in smaller request and response messages, which can lead to faster load times. By leveraging Web services you can also process and format data directly on the client rather than on the server. Web services can also be used to aid users as they type into textboxes by using controls such as the AutoCompleteExtender control found in the ASP.NET AJAX Toolkit.

• Get Code Download