UpdatePanels and JavaScript request events

When my journey continued in the land of UpdatePanels (read my previous post about UpdatePanels here), I was looking for a way to create a clientside success event handler. I have been working with jQuery for some years now so I’ m a bit spoiled when it goes about Ajax. Their framework makes it very easy to register success or error handlers:

   url : "/someurl",
   type: "POST",
   success: function(data) {
      // your success handling here

I was hoping to find some what the same for partial postback requests. After researching the web for a while, I took a look at the Sys.WebForms.PageRequestManager object. This singleton object holds all data relevant to async page requests and holds some useful functions for registering your functions as event handlers.

In this case, I was looking for two events, the begin and end request events. The begin request  event handler can be registered by using the add_beginRequest function and the end request handler by using the  add_endRequest function.

var requestManager = Sys.WebForms.PageRequestManager.getInstance();
requestManager.add_beginRequest(function(sender, args) {
    // begin request logic here
requestManager.add_endRequest(function(sender, args) {
    // end request logic here

The event handlers are called with two arguments: The PageRequestManager (sender in this example) and the EventArguments (args in this example). These are very important to determine which UpdatePanel or PostBack element (Button, etc) is triggering the request.

The BeginEventArguments exposes three interesting functions:

  • a get_postBackElement function for retrieving the element that caused the PostBack.
  • a get_updatePanelsToUpdate function for retrieving a list of UniqueIds of the UpdatePanels which will be updated by this request.
  • a get_request function for retrieving the event context.
   var requestManager = Sys.WebForms.PageRequestManager.getInstance();
   requestManager.add_beginRequest(function(sender, args) {
     var postBackElement = args.get_postBackElement();
     var updatePanels = args.get_updatePanelsToUpdate();
     var request = args.get_request();

The EndRequestArguments exposes five functions, two are very useful for my case.

  • a get_error function for retrieving the error. This function will return null when no error has occurred.
  • a get_response function to retrieve the response.
var requestManager = Sys.WebForms.PageRequestManager.getInstance();
requestManager.add_endRequest(function(sender, args) {
    var error = args.get_error();
    var response = args.get_response();
    if (error) {
       // handle error

The PageRequestManager contains a lot more useful functions and properties for hooking up to the webforms ajax system.
Some I like are abortPostBack, get_isInAsyncPostBackremove_beginRequest and remove_endRequest.

The following two tabs change content below.
I'm a software developer from Utrecht. Interested in DDD, continuous delivery, new technologies & frameworks.

Latest posts by Vincent Keizer (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *