[How Do I:] Use JavaScript to Refresh an ASP.NET AJAX UpdatePanel?

Please install Silverlight or click download to watch video locally.

In this video we learn two different ways of using JavaScript logic to refresh the content of an ASP.NET AJAX UpdatePanel control. The first way is to add a Button-type server control to the UpdatePanel and use JavaScript to trigger an asynchronous postback and 'pretend' that the postback was caused by the server control inside the UpdatePanel. The second way does not require any Button-type server control to be added to the UpdatePanel, but still allows us to use JavaScript logic to refresh the content of the UpdatePanel. (The second technique was suggested by Dave Ward and you can read more on his weblog entry, " Easily refresh an UpdatePanel, using JavaScript ".)

Presented by Joe Stagner

Duration: 10 minutes, 5 seconds

Date: 25 July 2007

Watch    Video   |   Download    Video   |   VB Code    C# Code

Video downloads: WMV  |  Zune  |  iPod  |  PSP  |  MPEG-4  |  3GP

Audio downloads: AAC  |  WMA  |  MPEG-4  |  MPEG-3  |  MPEG-2

Comments : 19

Leave a Comment

jntiwari9 : On April 02, 2008 12:28 AM said:

This is a good tutorials for the beginners. I am so gratefule to you.

J.N.Tiwari

JoeStagner : On April 03, 2008 6:21 PM said:

Thanks - Glad it helped !

jeppe_r : On May 07, 2008 5:15 PM said:

Hmm, does this work in a asp.net 3.5?

I have tried it, when I write it, it doesnt work, it do "standard" postback all the time..

Have tried yours code, but stil standard postback, with the javascript..

You dont have any good reason, that I cant make it?

- otherwise good movies :)

Best regards Jeppe

shocker-z : On May 14, 2008 11:28 AM said:

Thanks for the tutorial.

jeppe_r you sure your using a standard HTML button? and not an ASP button? as a standard HTML button cant cause a standard postback as far as i'm aware.

Regards

Liam

Wardgp : On June 11, 2008 6:21 PM said:

I built this one using VS2008 and I can get all the asp and HTML buttons to work correctly, but when I substitute UpdatePanel1 for Button1 in the javascript nothing happens.  Anybody get this to work using the asp.net 3.5?  Think jeppe_r might have something.

saketh : On August 04, 2008 11:52 AM said:

Joe,

It works great when there is one updatepanel. But I have two update panels in my page and this method seems to refresh both of them. I tried both the methods you suggested and both of them give me the same results.

Any suggestions?

Regards,

Saketh

jerkham : On August 06, 2008 4:51 PM said:

Great video, this is exactly what I was looking for.  Haven't tried it out yet, but hopefully I have better results than some of these other guys leaving comments.

cv_vikram : On August 07, 2008 11:26 AM said:

Good tutorial...thanks

RoninB : On October 21, 2008 3:47 PM said:

I have a delima with a panel being used with ModalPopupExtender, and within that panel... there are labels that i would like to show visible true or false base on the button click event that is also tied both ModalPopupExtender and UpdatePanel and ConfirmButtonExtender, though the panel have the behavior of ModalPopupExtender and ConfirmButtonExtender, it does not update. i had put the Page_Load event the logic to set the properties. Please help, would i need to include a ToolkitScriptManager or somethingelse?

Thanks in advance.

hashad : On October 21, 2008 6:07 PM said:

i like this tutorial...thanks

chad101 : On December 02, 2008 12:30 PM said:

I got this example to work with .net 3.5 but it does not work if you have a master page? Is there something you need to do different with a master page?

sd123 : On March 19, 2009 11:52 PM said:

great tutorial...helped me a lot. Thanks!

jvlamy : On May 13, 2009 4:03 AM said:

Same as chad101. the Dave Ward's UpdatePanel Method doesn't work with a Master Page. _doPostBack('UpdatePanel1', ''); fires a full PostBack with a master page and a partial postback without.

Someone know why ?

jvlamy : On May 13, 2009 4:07 AM said:

OK. this works with or without Master Page:

prm._doPostBack('<%= UpdatePanel1.ClientID %>', '');

shilpa.gururao : On May 21, 2009 10:39 AM said:

Good job. Thanks for sharing.

jimboyoo : On June 03, 2009 7:35 PM said:

prm._doPostBack gives me errors.

Dave Ward encourages the use of __doPostBack() instead. It works great for me. See here:

http://encosia.com/2007/07/13/easily-refresh-an-updatepanel-using-javascript/

ImDaFrEaK : On August 02, 2009 7:43 PM said:

No offense b/c this guy is obviously a lot more knowledgable than me but I do know a great deal about programming but I now nothing about this control. This tutorial was far too long and drug out with very little information on the basic crap i need to make this work for me. I just want to know where to get the properties ect for the animations and all. I want a basic hello world example then build on it. He started with all the high end and went backwards and never reached simple. Im still kinda lost with the control and can't use it.

bubunburhanudin : On August 13, 2009 9:06 AM said:

ok

lleveille : On September 11, 2009 4:05 PM said:

No matter what I do I get a standard postback

prm._doPostBack('<%= UpdatePanel1.ClientID %>', '');

didn't work for me at all.

Leave a Comment

You must be logged in to leave a comment. Click here to log in.

Microsoft Communities