Windows Developer Power Tools

1.3 Adding Ajax Functionality with Ajax.NET Professional

There are a number of ways to add Ajax technologies to ASP.NET. Of the three covered in this chapter, Ajax.NET Professional offers the simplest and lightest solution. Unlike Anthem.NET, which sends the entire postback through Ajax, Ajax.NET Professional lets you call individual methods. This drastically reduces the amount of data sent across the network and increases the responsiveness and performance of your applications. Atlas provides both methods of working with Ajax (sending the entire postback or just calling individual methods), but the size of the framework and the client-side XML script adds some complexity.

You should consider Ajax.NET Professional when comparing the available Ajax frameworks if you are concerned about the performance of your applications, especially from the perspective of network traffic.

Ajax.NET Professional at a Glance
Tool	Ajax.NET Professional
Version covered	6.6.22.1
Home page	http://www.ajaxpro.info
Power tools page	http://www.windevpowertools.com/tools/20
Summary	A lightweight Ajax framework that makes it easy to call server-side methods from client-side code
License type	Freeware, custom
Online resources	Author’s blog, Google mailing group
Supported Frameworks	.NET 1.1, 2.0
Related tools in this book	Atlas, Anthem.NET

Getting Started

Start by downloading the latest .zip file from the home page and extracting it to a local directory. Then, reference AjaxPro.2.dll (for ASP.NET 2.0) or AjaxPro.dll (for ASP.NET 1.1) from your web application, as described in the Appendix. Next, add a line to your web.config file to register the necessary HTTP handler:

<system.web>
    <httpHandlers>
        <add verb="POST,GET" path="ajaxpro/*.ashx"
             type="AjaxPro.AjaxHandlerFactory, AjaxPro.2" />
    </httpHandlers>
</system.web>

This enables Ajax.NET to directly handle asynchronous calls without the need to add web services or other endpoints. You’re now ready to write some Ajax.

Using Ajax.NET

First you’ll need to add a using statement for the AjaxPro namespace:

using AjaxPro;

Then, add an attribute to the method you want to expose to client-side calls:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

using AjaxPro;

public partial class AjaxNetExample : System.Web.UI.Page
{
    [AjaxMethod]
    public bool IsItemValid(string itemNum)
    {
        return true;
    }
}

IsItemValid is a simple method that takes a string and returns whether the specified item is valid. This example always returns true. This type of method makes sense for a system where the user enters an item number in a text box, and you want to validate that item asynchronously while the user continues entering other values.

Now you need to register your page with Ajax.NET so it will be exposed to the client. You do this by passing the type of your page class to the RegisterTypeForAjax( ) method:

protected void Page_Load(object sender, EventArgs e)
{
    AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxNetExample));
}

Now that the method is exposed on the server side, you need to write a little code to call it from the client side.

The following lines add a text box and a label to the page:

<asp:TextBox ID="tbItem" runat="server"></asp:TextBox>
<asp:Label ID="lValid" runat="server"></asp:Label>

The text box is where the user enters the item number, and the label is where the results of the method call are shown.

Next, add a couple of JavaScript functions to the page:

<script type="text/javascript">
function checkItemValid(itemNum)
{
    AjaxNetExample.IsItemValid(itemNum, isItemValid_callback);
}

function isItemValid_callback(res)
{
    document.getElementById('<%= lValid.ClientID %>').innerHTML = '<b>'
                            + res.value + '</b>';
}
</script>

The first function accepts an item number and then calls the server-side method. Notice that you don’t have to do anything special; you can call it just like a method on the page. The first parameter is passed to the server-side method, and the second parameter is a pointer to the callback method, which the Ajax.NET framework calls when the server-side operation has completed. In this simple callback function, the label next to the text box is set to the return value.

The last thing you need to do is set the onchange event of the text box so that it fires the method when the user changes the contents of the text box, passing along the new value:

<asp:TextBox ID="tbItem" runat="server"
             onChange="checkItemValid(this.value)"></asp:TextBox>

The server-side method will be called asynchronously, the callback method will be invoked, and finally the label will be updated, as shown in Figure 1-8.

Figure 1-8. The completed Ajax.NET call

While this example was relatively simple, it shows how easy it is to expose server-side methods to client-side calls using Ajax.NET Professional.

Getting Support

Ajax.NET Professional is supported through examples and online documentation at the tool’s home page, as well as by a Google group at http://groups.google.com/group/ajaxpro/.

The Ajax.NET Professional Starter Kit is a sample application that shows various techniques for using Ajax.NET to improve the usability of your applications. Download the kit from http://www.codeplex.com/Wiki/View.aspx?ProjectName=AjaxProStarterKit.

Ajax.NET Professional in a Nutshell

Ajax.NET Professional is the simplest, lightest Ajax solution for ASP.NET. You have to write a little more JavaScript with Ajax.NET than with other solutions, but if you are worried about network traffic and performance, it might be worth the tradeoff.