Click here to Skip to main content
11,479,951 members (57,051 online)
Click here to Skip to main content

Enable Multiple Asynchronous Postbacks at the Same Time

, 23 Nov 2010 CPOL 16.6K 295 22
Rate this:
Please Sign up or sign in to vote.
This article explains how you can use PageRequestManager class to enqueue multiple requests.

Introduction

When a page makes multiple asynchronous postbacks at the same time, the postback made most recently takes precedence.

Please refer to the demo.

MultiplePartialPageRequest1.jpg

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 requests 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 to this MSDN article for more details.

Using the Code

In the JavaScript, we can get an instance of PageRequestManager using the 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 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 the 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 cancel the current request and add 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 the existing request is completed, endrequest handler gets executed and we have the 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 the following output:

MultiplePartialPageRequest2.jpg

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 a lot of events that we can use to enhance our client side capability.

History

  • 22 November 2010: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Vinay Lakhanpal
Software Developer (Senior)
United States United States
No Biography provided

Comments and Discussions

 
GeneralMy vote of 4 Pin
sjelen29-Nov-10 7:49
membersjelen29-Nov-10 7:49 
GeneralRe: My vote of 4 Pin
Vinay Lakhanpal29-Nov-10 8:48
memberVinay Lakhanpal29-Nov-10 8:48 
GeneralRe: My vote of 4 Pin
Ali Al Omairi(Abu AlHassan)17-May-11 1:33
memberAli Al Omairi(Abu AlHassan)17-May-11 1:33 
GeneralRe: My vote of 4 Pin
Ali Al Omairi(Abu AlHassan)28-May-11 20:51
memberAli Al Omairi(Abu AlHassan)28-May-11 20:51 
GeneralGood finding Pin
froodien23-Nov-10 4:46
memberfroodien23-Nov-10 4:46 
GeneralRe: Good finding Pin
Vinay Lakhanpal23-Nov-10 5:17
memberVinay Lakhanpal23-Nov-10 5:17 
GeneralMy vote of 3 Pin
Dileep7723-Nov-10 0:22
memberDileep7723-Nov-10 0:22 
GeneralRe: My vote of 3 Pin
Vinay Lakhanpal23-Nov-10 4:46
memberVinay Lakhanpal23-Nov-10 4:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150520.1 | Last Updated 23 Nov 2010
Article Copyright 2010 by Vinay Lakhanpal
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid