• Download MultiplePartialPageRequest_src - 22.61 KB

Introduction

When a page makes multiple asynchronous post backs at the same time, the post back made most recently takes precedence.

Please refer the demo.

There are 3 buttons in an update panel which when clicked will update their respective labels with server date time stamps. If you click on button 1 and then immediately click on button 2, before button 1 OnClick event has been completed. You would lose button 1 OnClick event and button 2 OnClick event will take precedence. You can enqueue these request using JavaScript included in this demo application. Note that this is not a perfect solution; it may not work in all scenarios. This is just a proof of concept; you can extend the code base as per your needs.

Background

Partial page update is handled by PageRequestManager class. Every page has a single instance available. PageRequestManager exposes various events that can be used to achieve enqueing of multiple requests.

Refer following MSDN Article for more details: http://msdn.microsoft.com/en-us/library/bb311028.aspx

Using the code

In the JavaScript we can get instance of PageRequestManager using following code snippet

       
var prm = Sys.WebForms.PageRequestManager.getInstance(); //GET CURRENT INSTANCE OF PAGE REQUEST MANAGER 

Then we define a define custom handlers that need to be executed when a new request is initialized and when it the processing is complete.

prm.add_initializeRequest(InitRequest); //HANLDER THAT NEEDS TO BE EXECUTED WHEN PARTIAL PAGE UPDATE IS INVOKED
prm.add_endRequest(OnCompleteRequest); //HANLDER THAT NEEDS TO BE EXECUTED WHEN PARTIAL PAGE UPDATE RESPONSE IS RETURNED FROM SERVER

We define an Array object that will hold client ids of pending requests.

//ARRAY COLLECTION OF ALL PENDING REQUEST CLIENT IDS
 var pendingRequest = new Array()

When a request is generated IntializeRequest handler method is called. In our custom handler we have following snippet of code which gets the client id of the current request and checks if there is a previous pending request. If a previous request is pending it will cancels the current request and adds the client id to the array.

  var clientId = args.get_postBackElement().id;
    //CHECK IF A POSTBACK IS PENDING
    if (prm.get_isInAsyncPostBack()) {
            args.set_cancel(true); //CANCEL THIS REQUEST
            pendingRequest.push(clientId); //ENQUE THIS REQUEST CLIENT ID
    }

Once existing request is completed endrequest handler gets executed and we have following piece of code to check for pending request.

  //CHECK FOR PENDING REQUEST
         if (pendingRequest.length != 0) {
                //GET THE LAST PENDING CLIENT ID 
                var pendingClientId = pendingRequest.shift();
                TriggerPendingCleintId(pendingClientId);
         }
            
        //IMPLEMENTATION OF THIS FUNCTION MAY NOT WORK FOR ALL SCENARIOS.
        //THIS IS JUST A PROOF OF CONCEPT.
        function TriggerPendingCleintId(clientId) {
            var client = document.getElementById(clientId);
            if (client.type=='submit') {
                client.click();
            }
            else if (client.outerHTML != undefined)
            {
               var data = client.outerHTML;
               var js = data.substring(data.indexOf('javascript:__doPostBack'), data.indexOf(')') + 1) + ";";
               eval(js);
            }
            else {
                WriteLog('ERROR: Could not trigger postback for client id:' + clientId);
            }
        }

To test this out in the demo application check the Enable event enqueue request check box and click on all 3 buttons. You will see following output.

As you can see request for button 2 and button 3 is enqueued and executed in the order they were executed.

Points of Interest

PageRequestManager exposes lot of events that we can use to enhance our client side capability.

History

22 November 2010 : Initial Version.