Event Handling using ASP.NET Ajax

AJAX was primary designed and developed with the intent of providing a fast and responsive user interface. According to Enrich Peterson, "AJAX-enabled pages provide a slick, responsive user experience, making web-based applications function more like desktop-based ones". Event Handling is a great feature in the Microsoft Ajax Library. This article looks at how we can use Microsoft Ajax Library to raise and handle events in our applications. It discusses in a lucid language, how events can be raised, subscribed and handled using this library. It also throws light on some of the best practices when using event handling in Ajax - enabled web applications.

Exposing Events using the Microsoft Ajax Library

You can use the Microsoft Ajax Library to create and expose events easily. You can have multiple handlers subscribed to a particular event. Such events are known as multicast events. To expose an event using the Microsoft Ajax Library, follow these steps:

Note that the Microsoft Ajax Library specifies certain naming conventions as far as these event handlers are concerned. As an example, the name of the event handler to add an event would typically be add_eventName. Note that the runtime internally calls a method called _raiseEvent to raise the event. Similarly, the name of the method for removing an event handler should be remove_eventName. Here, eventName is the name of the event to be handled. Typical examples are add_init and remove_init methods.

The EventHandlerList Class

Note that the Microsoft Ajax Library provides a class called Sys.EventHandlerList to manage multiple event handlers. This class contains two methods namely, addHandler and removeHandler to add and remove event handlers respectively from the list of event handlers. You can use this class as shown in the code snippet below:

The Sys.EventHandlerList class contains the following members:

• addHandler() - to attach a handler to a specified event in an instance of EventHandlerList
• getHandler() - to return a method that can be used to invoke the handlers for a particular event
• removeHandler() - to remove a previously attached handler for a particular event from the EventHandlerList instance

The addHandler() method accepts three parameters. These are the DOM element, the name of the event and the name of the event handler. Here is an example:

The myButtonClickEventHandler in the above code snippet is the name of the event handler attached to the click event of the Button control called btnClick. Here is how you can implement the myButtonClickEventHandler method:

To remove this event handler you can simply write the following code:

Similarly, here is how you can attach and detach an event handler to the init event.

An Alternative Approach

Note that the $addHandler() is a static, shortcut function, an alternative to the Sys.UI.DomEvent.addHandler method. You can use it to attach a client side event handler to any DOM element on your web page. Here is the complete syntax of the $addhandler() function:

Here element represents any DOM element in your web page, the eventName is the name of the event for which you want an event handler attached. And, eventHandler (the last parameter) is the name of the event handler function for the event.

As an example, you can use the $addHandler() function as shown in the code snippet below:

Similarily, you can use the $removeHandler to remove an event handler. Here is the syntax:

The Application and PageRequestManager Classes

The Application and PageRequestManager classes in the Microsoft Ajax Library are responsible for raising events. The Sys.Application object represents the Application object.

The Sys.WebForms.PageRequestManager class contains the following events:

• initializeRequest - This is called during the initialization stage of an asynchronous postback operation
• beginRequest - This is called just before the processing of an asynchronous postback operation starts
• pageLoading - This event is called after a response to an asynchronous postback is received from the server, but before any content on the web page has been updated
• pageLoaded - This is called after all content on the page is refreshed as the result of either a synchronous or an asynchronous postback operation
• endRequest - This is called after an asynchronous postback operation is complete

The following code snippet illustrates how you can use the Sys.WebForms.PageRequestManager event handlers in your application.

The Sys.Application class provides the following life cycle events:

init – This is the initialization event typically used to initialize client components, controls, etc.

load – The load event is called next and is typically used to allocate resources, and start the client side code in your application

unload – The unload event is called last - it is typically to release resources used by your application

Note that the Application.load and Application.unload events are automatically wired up in the constructor of the Sys._Application class. The constructor of the Sys._Application class contains the following two lines of code to add the load and unload event handlers to the event handling chain.

Note that you need not bind any event handler to the load and unload events explicitly - you can simply write methods that use the reserved naming conventions. Here is an example of how the pageLoad event handler should be defined in your web page:

Similarly, the pageUnload event handler should look like as shown below:

Here is the complete markup code that illustrates how you can use the Application events using Microsoft Ajax Library:

When you execute the above code, the messages, ("Inside the pageLoad event handler." and "Inside the pageUnload event handler.") would be displayed in two alert boxes.

Summary

The Microsoft Ajax Library provides a powerful event handling model for dealing with events in your applications. In this article, we have had a look at the event handling model of the Microsoft Ajax Library with code examples wherever applicable. Happy reading!

About the Author

is a Microsoft MVP in ASP.NET. He has over 12 years of industry experience in IT with more than 6 years in Microsoft .NET and its related technologies, about which he has authored many articles. He has also written several books on the subject.

Find a programming school near you