How to update an UpdatePanel from two different ContentPlaceHolders using MasterPages

The first thing you want to do is always set your UpdatePanel’s UpdateMode to Conditional. By default UpdateMode is set to Always which is great when you’re first learning, but not efficient. Why? Because every time a postback is triggered, your update panel reloads, which 9 times out of 10, isn’t what you want.

The trick to setting up two different UpdatePanels is this. Lets say you have an UpdatePanel containing a GridView in one ContentPlaceHolder displaying a customer’s order history. You have another UpdatePanel in another ContentPlaceHolder that will display the order details when an order is selected.

The problem is you can’t declaratively set the Trigger to a control in a different ContentPlaceHolder.

What you need to do is override the OnInit() method.

Here is an example:

view plaincopy to clipboardprint?

1. protected override void OnInit(EventArgs e)  
2. {  
3.      base.OnInit(e);  
4.      AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();  
5.      trigger.ControlID = grdOrderList.UniqueID;  
6.      trigger.EventName = "SelectedIndexChanged";  
7.      updateDetails.Triggers.Add(trigger);  
8. }  

Combine this with the UpdatePanelAnimation control to give a visual cue to the user that the data has been updated and you have a simple ajaxified solution.

view plaincopy to clipboardprint?

1. <ajaxtoolkit:updatepanelanimationextender  
2.     id="upAnimation"  
3.     behaviorid="upAnim"  
4.     targetcontrolid="updateDetails"  
5.     runat="server">  
6.     <animations>  
7.         <onupdating>  
8.             <sequence>  
9.                 <color  
10.                  animationtarget="updateDetails"  
11.                  duration="1"  
12.                  startvalue="#ffffff"  
13.                  endvalue="#ffffcc"  
14.                  property="style"  
15.                  propertykey="backgroundColor">  
16.                 </color>  
17.             </sequence>  
18.         </onupdating>  
19.         <onupdated>  
20.             <sequence>  
21.                 <color  
22.                  animationtarget="updateDetails"  
23.                  duration="1"  
24.                  startvalue="#ffffcc"  
25.                  endvalue="#ffffff"  
26.                  property="style"  
27.                  propertykey="backgroundColor">  
28.                 </color>  
29.             </sequence>  
30.         </onupdated>  
31.     </animations>  
32. </ajaxtoolkit:updatepanelanimationextender>  

ref : http://msdn.microsoft.com/en-us/library/system.web.ui.asyncpostbacktrigger.aspx