Implementing AJAX in ASP.NET

Getting Started

How it works - Overview

AJAX relies on a broker to dispatch and process requests to and from the server. For this task, the .NET wrapper relies on the client-side XmlHttpRequest object. The XmlHttpRequest object is well supported by most browsers, making it the solution of choice. Since the goal of the wrapper is to hide the implementation of XmlHttpRequest, we'll forgo any detailed discussion about it.

The wrapper itself works by marking .NET functions as AJAX methods. Once marked, AJAX creates corresponding JavaScript functions which can be called client-side (liky any JavaScript functions) and that serve as proxies, using XmlHttpRequest. These proxies map back to the server-side function.

Complicated? It isn't. Let's look at a simplified example. Given the .NET function:

VB.NET

Public Function Add(firstNumber As Integer, secondNumber As Integer) As Integer
  Return firstNumber + secondNumber
End Sub

C#

ublic int Add(int firstNumber, int secondNumber)
{
  return firstNumber + secondNumber;
}

The AJAX .NET wrapper will automatically create a JavaScript function called "Add" which takes two parameters. When this function is called using JavaScript (on the client), the request will be passed to the server and the return value back to the client.

Initial Setup

We'll first go through the steps of "installing" the .dll for use in your project. If you know how to add a reference to a .dll file, skip this section.

First, if you don’t already have it, download the latest version of AJAX. Unzip the downloaded file and place the ajax.dll within a ref folder of your project. In Visual Studio.NET, right click the "References" node in the Solution Explorer and select Add Reference. In the newly opened dialog, click Browse and navigate to the ref/ajax.dll file. Click Open followed by Ok. You are now ready to start programming with the AJAX .NET wrapper.

If you’re having difficulty setting up the reference, check out 'Adding and Removing References' on MSDN.

Setting up the HttpHandler

The first step necessary to make everything work is to set up the wrapper's HttpHandler in the web.config. Without going into detailed explanation of what and how HttpHandlers work, it's sufficient to know that that they are used to process ASP.NET requests. For example, all requests for *.aspx pages are handled by the System.Web.UI.PageHandlerFactory class. Similarly we'll make all requests to ajax/*.ashx handled by the Ajax.PageHandlerFactory:

<configuration>
  <system.web>
    <httpHandlers>
      <add verb="POST,GET" path="ajax/*.ashx"
          type="Ajax.PageHandlerFactory, Ajax" />
    </httpHandlers> 
    ...
  <system.web>
</configuration>

The above code basically tells ASP.NET that any requests made that match the specified path (ajax/*.ashx) are to be handled by Ajax.PageHandlerFactory, instead of the default handler factory. You don’t need to create an ajax subdirectory, this is a mythical directory simply used so that other HttpHandlers can use the .ashx extension with their own made-up subdirectories.

You might also like...

Comments

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Engineers are all basically high-functioning autistics who have no idea how normal people do stuff.” - Cory Doctorow