[How Do I:] Implement Dynamic Partial-Page Updates with ASP.NET AJAX?

Please install Silverlight or click download to watch video locally.

In this video you will learn how to add dynamic partial-page updates to your ASP.NET application using Microsoft ASP.NET AJAX. In particular, you will see how to use the TimerControl to manage the frequency of the AJAX callbacks.

Presented by Joe Stagner

Duration: 12 minutes, 7 seconds

Date: 25 January 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 : 48

Leave a Comment

sushantkumarprusty : On March 06, 2008 11:34 PM said:

Hello Sir,

Thanx for this support, Realy these videos are very much helpfull for me, Thank you once again from my heart.

with Regards

sushant

shireef.adel : On March 11, 2008 5:23 AM said:

The UpdatePanel doesn,t work !

I have an ordinary ASP.Net App , then I,ve installed asp.net ajax and configured my web.config file

Note that the Ajax ControlToolKit works fine

And Also The Timer Control But My Whole page is refreshed

not only the controls inside Update Panel

JoeStagner : On March 15, 2008 12:46 PM said:

Shireef - I just downloaded the code and tested, seemd to work fine for me.

MattNolte : On March 31, 2008 11:16 AM said:

Great video, thanks!

JoeStagner : On April 01, 2008 7:10 AM said:

Thansk Matt !!!

williebegoode : On April 06, 2008 10:57 AM said:

The information you provide is accurate, and I got everything working, but the video is way too fast! It's like listening to that old FedEx ad where the guy was the world's fastest talker. Please slow it down so that the information doesn't fly past in a blur. I had to rewind about 10 times for each segment.

I have no doubt that you know this stuff, and you've nothing to prove to me. Just put it at a pace where we can follow. I don't think you'll use up an unnecessary amount of silicon.

Thanks,

Bill

sunny74 : On April 10, 2008 3:34 AM said:

Hello Sir,

Can we get a video from you wherein you demonstrate how to develop an entire application using Ajax. This will help us to an get an idea about the 'must know features' of ajax required in every application.You may also take up parts of an application like shopping cart, user registration etc to show how ajax can be used in them.

Thanks .

sunilvishwas : On April 11, 2008 3:57 PM said:

I can understand that in the following situation all the three text boxes will be update on Button1.Click

TextBox1 is outside of UpdatePanel1

TextBox2 is inside UpdatePanel1

TextBox3 outside of UpdatePanel1

Button1 is outside of UpdatePanel1

UpdatePanel1 is not wired to Button1.Click

Make the following change and run the application to notice that only TextBox2 is update.

UpdatePanel1 is wired to Button1.Click by triggers

Please bear with my dumb question: But I would like to learn in detail - What stopped other two text boxes from getting updated?

JoeStagner : On April 14, 2008 8:41 PM said:

Bill - sorry you found the pace too fact, most of the feedback I get indicates that folks prefer the crisp pace to a slower one. Feel free to meial me if you get stuck on anything that I might be able to help with.

Sunil - The ones outside the update panels are not updated because they are outside th eupdate panels.

UpdatePanel2 is not updated because Button1 is a trigger to UpdatePanel1 but not UpdatePanel2 and UpdatePanel2 has UpdateMode set to contidional=true.

Feel free to email me through my blog's contact l;ink at www.joeon.net

sushantsahoo@hotmail.com : On April 15, 2008 6:47 AM said:

hi,

really this videos are very nice and very helpful for me.

JoeStagner : On April 15, 2008 9:43 PM said:

Thanks - glad they help !!!

jim.bridgeford : On May 06, 2008 11:45 AM said:

is there a way to use the update panel on a textbox that is triggered by a Javascript onblur function?

JBSettle : On June 29, 2008 8:54 AM said:

Out of curiosity, what was the thought behind having all Partial Update panels automatically update by default when an update event occurs?    

It seems to me that the times where a developer would want an event to update a single panel would far outnumber the times a developer would want all the panels to update on the page.      

Thanks!

danasegarane : On July 23, 2008 1:14 AM said:

Hi Joe..

Thanks for the very Nice Video Tutorial Package

Waiting for more :)

cv_vikram : On August 06, 2008 1:25 PM said:

It is simple and good....

ciccio : On August 12, 2008 9:48 AM said:

Ok Joe,

thanks for all webcast and they are simple and good bla bla bla...

but

I think that you speak too faster.

Please, speak more slowly.

S.Pirashanth : On August 28, 2008 6:37 AM said:

Many thanks Joe for the excellent video series

Maneeshpal : On September 18, 2008 1:55 AM said:

Hello Joe,

I use Visual Studio 08. I am not able to drag my update panel anywhere in the design mode.the absolute positioning option is inactive. also of I change the positioning option of my label to absolute, the update panel is not recognising the label and hence the partial updating of the label is not working. Help me.

tareq_anees : On October 12, 2008 11:32 PM said:

Thanks Matt,

Very useful video, and very clear explanation. My only gripe is the video resolution. I wear glasses and believe that visual aids should stay visual......

I also have a question for you: can we use Ajax to speed up the loading of images in a datalist?

My application displays a number of images in datalist and I am looking for a way to improve performance. Can you help?

Thnks.

   

ssgame : On October 14, 2008 3:55 PM said:

Joe,

Great video, clear and easy to follow.  

I am struggling to get the partial postback to work.  No matter what I do, I get the entire page being re-rendered.  I am using VB.net 2.0.

Here is my updatepanel code:

   <tr><td>

   Select All GeneralInfo    

   Clear All GeneralInfo

   

<ContentTemplate><table>

   <tr>

       <td><asp:CheckBox ID="chkBasic" runat="server" Text="BasicInfo" /></td>

   </tr>

   <tr>

       <td><asp:CheckBox ID="chkPhysical" runat="server" Text="PhysicalAddress" /></td>

   </tr>

   <tr>

       <td><asp:CheckBox ID="chkMailing" runat="server" Text="MailingAddress" /></td>

   </tr>

   </table></ContentTemplate>

       <Triggers>

           <asp:AsyncPostBackTrigger ControlID="lnkGeneral" EventName="Click" />

           <asp:AsyncPostBackTrigger ControlID="lnkClearGeneral" EventName="Click" />

       </Triggers>

   </asp:UpdatePanel></td></tr>

I also have a scriptmanager added.

Basically, I want one linkbutton to select the checkboxes and the other to clear them.  I have the code to do that in the click events for the linkbuttons.  

I set up a label outside the updatepanel that gets updated in the page_load and that is getting updated every time I click a linkbutton, which is what is telling me that the page is getting a full postback, not to mention that the page goes away and comes back refreshed.  

Can you think of something that I am missing?

Thanks in advance for your help.

djibril_chimere_DIAW : On October 21, 2008 12:39 PM said:

Thanks!

ubuser : On October 27, 2008 1:59 PM said:

Joe,

Let me ask you,

I have list of items in a table.

How do I update UpdatePanel clicking on the item I select (either link or checkbox/radiobutton next to it)?

What should I pass as trigger to updatepanel?

Thank you,

Edward Liu : On November 11, 2008 2:57 AM said:

I have been struggling with Partial Page rendering under I come across this video. And I have converted the web site to Ajax_enabled. Everything worked fine during testing with the partial page postback.

However, after I put it on IIS, I always get full page postback with flicker. But it works fine when run on local network. I noticed that the page_load event is always triggered. Is this the cause ? And how to resolve it ? Thanks

meskovic : On November 30, 2008 7:30 PM said:

Hi Joe,

Thanks for a great tutorial. However, you forgot to cover the timer control as stated in the title of the video.

Thanks! :)

smreddy : On December 05, 2008 2:51 AM said:

Hi Joe,

Thanks for a nice tutorial.

Thanks............ :)

ealite : On January 02, 2009 2:29 PM said:

Thanks Jae,

That is exactly what I wanted to know.

Your explanation was about what happens between the client side and the server side was very useful.

Thanks

Erion

ealite : On January 02, 2009 2:29 PM said:

Joe, my apologies, I misspelled your name.

marijuana : On February 04, 2009 8:30 PM said:

let's say you have a navigation panel on the left side and you have a content on the right. I have master pages for those content pages. How can i partially update the page without refreshing whole site. there is a flash file as a header. when i navigate the website this flash file starts over which is annoying. how can i implement this update panel to the master page and make it work when you click navigation links.

Achilles_ : On February 05, 2009 10:25 AM said:

Hey Joe,

These videos are SUPER HELPFUL!

Thank you!

Yogi

TheDonSansone : On February 06, 2009 4:21 AM said:

A handy little video for sure !  many thanks

glenngraham : On February 10, 2009 11:48 AM said:

Very nice. This is simple and great way to show the affect of partial page updates. Good Job

samiran_mukherjee : On February 20, 2009 12:41 AM said:

hi joe,

I am from India. I am new in ASP.net. pls tell me what is the difference between onclick and onclientclick method against the button control.

samiran_mukherjee : On February 20, 2009 12:57 AM said:

hi joe,

I am from India. I am new in ASP.net. pls tell me what is the difference between onclick and onclientclick method against the button control.

adiikan : On March 03, 2009 11:33 PM said:

Could someone give me a hand with the following code? My problem is this - All the controls populate correctly

from the data they are bound too - as well as update, however the textbox named "txtOtherDisease" doesn't update???

Could someone give me some insight here??

runat="server">

DataKeyNames="HistoryID" DataSourceID="datasourcePatHx" DefaultMode="Edit"

Height="308px" Width="526px">


Text="AIDS" />

Text="Alcoholism" />


DataSourceID="datasourceLists"

OnSelectedIndexChanged="ddlOtherDisease_OnItemSelected"

AutoPostBack="true" EnableViewState="false" />


runat="server" Wrap="true" EnableViewState="false"

TextMode="MultiLine" Height="45px" Width="500px"

Text='<% #Bind("OtherDiseaseHx")%>' AutoPostBack="true" />

TableName="OD_PHXes" runat="server"

ContextTypeName="ODPhoenixDataContext" EnableUpdate="True"

Where="PatientID == @PatientID"> <WhereParameters>

<asp:QueryStringParameter Name="PatientID" Type="String" QueryStringField="PatID" />

</WhereParameters> </asp:LinqDataSource>

savakar123 : On March 11, 2009 2:36 PM said:

well can use multiple updatepanel with UpdatePanelAnimationExtender.

I tried but it refreshing entire page. any solution?

savakar123 : On March 11, 2009 2:37 PM said:

well can use multiple updatepanel with UpdatePanelAnimationExtender.

I tried but it refreshing entire page. any solution?

sansinfo2008 : On May 09, 2009 5:41 PM said:

Partial updates is an important concept in AJAX and this video tut is on target. thanks Joe

http://www.planetsourcecode.in

sansinfo2008 : On May 09, 2009 5:43 PM said:

good job my friend.....

http://www.planetsourcecode.in

abelanet : On May 26, 2009 1:21 PM said:

thanks - good work

tosseng : On June 16, 2009 1:49 AM said:

very good video.

Im New : On June 24, 2009 5:01 AM said:

Joe , I have a dropdnlist whose selectedindexchanged code fails to fire when I put it into an AJAX UpdatePanel. However when the dropdnlst is outside of the updatePanel it works fine and the triggger fires as intended. What am I doing wrong here ?

SamCasper : On July 03, 2009 6:07 AM said:

Nice Vids :) Thanks Joe

fusion95624 : On July 15, 2009 10:42 PM said:

Pliz Help!! I have a master page where i have created a Header Panel which has a Adrotator changing images randomly. I was able to use the script manager to enable partialrendering so that only the adrotator refreshes each time without affecting the whole page. Bu now i have a wizard in one of my content pages for which i want to enable partial rendering so that wizard is filled in and moved to next step in the wizard without affecting the whole page. at the moment when i click the next button, the whole page refreshes. I tried putting this Wizard inside a UpdatePanel and then i added a scriptmanager but since i already have a script manager in the master page for adrotator, it now gives me error that you cannot have 2 instances of the script manager. Please help....how can i solve this

TheDiddy : On July 28, 2009 6:40 PM said:

Hit the forums Fusion....

A VS2008 walk-through would be much appreciated!

fusion95624 : On July 31, 2009 3:29 AM said:

i did look all over..but cant find the solution to my prob..am i missing something here.

arpitajaswal : On August 04, 2009 7:57 PM said:

Hi Joe,

Your videos are really helpful to me.

The way you explain the things its amazing.

Thanks!

I have one problem though , that when i have downloaded AJAX 1.0 extensions the extension controls are NOT visible in Visual web developer 2008 , though i can see and use them in Visual studio 2005 , why so???

Thanks again ,

Arpita

davidhaymond : On August 11, 2009 8:35 PM said:

Thanks Mr. Stagner

great video

kvr : On October 27, 2009 11:33 AM said:

Nice Video. I liked it when you explain that entire page is posted back and the lifecycle completed but only update panel contents got updated.

Got some insight in using multiple update panels as well.

Thanks Mr Stagner

Leave a Comment

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

Microsoft Communities