Martijn Veken


Just having
some fun with .NET

Performing async postback from javascript

UpdatePanels are a great way to update portions of a webpage. They only have one "problem": they need a control to fire the async postback. When you are performing a postback from javascript using the following code:

__doPostBack( 'EventName''EventArgs' );

the execution will always be synchronous. You can work around this by using a hidden control and fire one of its events, but this is not always the most flexible solution. I debugged the framework javascript a little and found another way to do it, completely in javascript. It's done by adding the eventtargetname into two arrays of the PageRequestManager. I have created a javascript function that handles this for me:

function doPostBackAsync( eventName, eventArgs )
{
    var prm = Sys.WebForms.PageRequestManager.getInstance();

    if( !Array.contains( prm._asyncPostBackControlIDs, eventName) )
    {
        prm._asyncPostBackControlIDs.push(eventName);
    }
 
    if( !Array.contains( prm._asyncPostBackControlClientIDs, eventName) )
    {
        prm._asyncPostBackControlClientIDs.push(eventName);
    }
 
    __doPostBack( eventName, eventArgs );
}

You can call it just like the original __doPostBack function. 

kick it on DotNetKicks.com

Comments

Casey said:

I think you meant to use 'eventName' as your first parameter in the function signature.  Otherwise, 'eventName' is not recognized ... only 'eventTargetName'

# January 31, 2008 6:07 PM

Martijn Veken said:

You're absolutely right. Fixed it.

Thanx!

# February 1, 2008 10:41 AM

Cosmin said:

I was looking for something like this. Thanks.

# May 6, 2008 11:19 AM

durilai said:

Fantastic post, worked perfect!

Thanks

# July 29, 2008 9:42 PM

Raj said:

Thanks.. that was perfect

# August 25, 2008 10:28 AM

Clar8605 said:

Perfect!

# September 26, 2008 6:06 PM

coriscow said:

Hi Martinjn!!

I tried your solution, and it almost works for me. I have an UpdatePanel with a custom control inside of it (ID=romulo : IPostBackEventHandler) and a button (ID=CallBackHome) outside. My intention is to do an async postback when CallBackHome is clicked. This postback has to be received by romulo. However, it crashes in the following function from the Microsoft Ajax lib, more specifically at 'if (e) throw e;'. If I skip that line it works perfectly. Any clue you could give me?? Thanks in advance!

<code>

Sys.WebForms.BeginRequestEventArgs = function Sys$WebForms$BeginRequestEventArgs(request, postBackElement) {

   /// <param name="request" type="Sys.Net.WebRequest"></param>

   /// <param name="postBackElement" domElement="true"></param>

   var e = Function._validateParams(arguments, [

       {name: "request", type: Sys.Net.WebRequest},

       {name: "postBackElement", domElement: true}

   ]);

   if (e) throw e;

   Sys.WebForms.BeginRequestEventArgs.initializeBase(this);

   this._request = request;

   this._postBackElement = postBackElement;

}

</code>

# January 9, 2009 12:42 PM

Martijn Veken said:

Hi Coriscow,

I'm not exactly sure what you're doing but the exception occurs because te parameters that are passed to the function do not match the conditions. But you probably figured that out yourself :-)

It think you can easily solve this at the serverside aswel. If you mark CallBackHome as a trigger for the updatepanel you can call your custom control in CallBackHome's eventhandler.

# January 15, 2009 8:19 PM

Achutha Krishnan said:

Excellent solution. My scenario was clicking on the Label should open a Modal Pop-Up after performing few operations in Code-Behind. The page was really should the post back even though it was in UpdatePanel. Your blog gave me the Answer!!!

function OpenModal(btnHDNCI)

       {

           var btnHDN = document.getElementById(btnHDNCI);

           doPostBackAsync(btnHDNCI,'OnClick');

                           //            __doPostBack("'"+btnHDNCI+"'",'OnClick');  //--- This actually did full postback

       }

       function doPostBackAsync( eventName, eventArgs )

       {

           var prm = Sys.WebForms.PageRequestManager.getInstance();

           if( !Array.contains( prm._asyncPostBackControlIDs, eventName) )

           {

               prm._asyncPostBackControlIDs.push(eventName);

           }

           if( !Array.contains( prm._asyncPostBackControlClientIDs, eventName) )

           {

               prm._asyncPostBackControlClientIDs.push(eventName);

           }

           __doPostBack( eventName, eventArgs );

       }

# February 12, 2009 2:02 PM

Around and About .NET World said:

Richiamando la funzione Javascript __doPostBack da una pagina ASP .NET, è possibile eseguire il PostBack

# May 11, 2009 12:47 AM

Maurizio Tammacco's blog said:

Mediante JavaScript è possibile eseguire programmaticamente un post della pagina mediante il richiamo

# May 18, 2009 2:53 PM

Jon said:

Sweet!

# May 27, 2009 8:25 PM

Avi said:

Great solution; One thing though - If the UpdatePanel's UpdateMode is set to Conditional, a server side call to myUpdatePanel.Update(); is needed, or else the partial page postback won't be visible on the client side.

# June 24, 2009 11:36 PM

Eder Nucci said:

Explendid! It solved my problem on first run. Thank you ALOT!

# February 3, 2010 7:33 PM

Aldscar said:

Thanks!

# February 19, 2010 11:12 AM

Caryna said:

Thank you, you saved me a lot of time!

Just one comment - this only works if the eventName is the clientId of the control, not the Id... Also, I did prm._doPostBack instead - otherwise it was still doing a full postback.

Cheers!

# March 15, 2010 7:43 PM

cole said:

I have tried using the above within user control which I embeded into SharePoint site via webpart.

I get following error

prm._asyncPostBackControlIDs is null or not an object

what am I doing wrong

# April 12, 2010 3:39 PM

Farru said:

Great Work.

Thanks

# April 22, 2010 4:08 PM

Rich said:

Excellent. Exactly what I wanted.

Just one thing I had to change. I had to call it using setTimeout instead of a direct call. Not exactly sure why. Maybe something to do with the way in which I was using it. Anyway, just called it like this and it worked perfectly.

setTimeout('doPostBackAsync(\'' + gblHdnRef.Id + '\',\'\')', 0);

# August 26, 2010 10:48 AM

Amer.Kh said:

You guys are awesome! I've been searching and trying methods to get proper async postback working for more than an hour.

Thanks to Martijn Veken's main post and Avi's comment it's now working the way it should.

I usually avoid making "thank you" comments when I don't have anything constructive to add, but I have to make exceptions every now and then when I'm faced with such awesomeness.

# November 11, 2010 1:28 PM

Chris said:

Brilliant, just what i was looking for

# December 13, 2010 12:39 PM

Munish said:

Thanx Buddy

# January 5, 2011 12:22 PM

Warren said:

After crawling on my hands and knees though search after search I finally stumbled on this holy grail.

Google put great info like this at the top of your searches.

Thanks.

# September 26, 2011 12:55 AM

Durga said:

Excellent solution.

# March 8, 2012 5:47 PM

athar said:

SCRIPT5009: 'Sys' is undefined

# September 3, 2012 12:09 PM

Anshul said:

Thanx Bro.. Awesome work..  Helped me in the first go..

# March 28, 2013 6:42 AM
Leave a Comment

(required) 

(required) 

(optional)

(required) 


Please add 6 and 2 and type the answer here: