Ajax – Trigger an update of the UpdatePanel by a control that is in different ContentPlaceHolder


I have a page with two ContentPlaceHolders. One has a DropDown and another UpdatePanel with content.

How can I trigger update to the UpdatePanel by the DropDown's selectedItemChanged event when they are in different ContentPlaceholders?

The following would not work since UpdatePanel1 doesn't know about DropDown1:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"  ChildrenAsTriggers="true">
        Some content that needs to be updated here...
        <asp:AsyncPostBackTrigger ControlID="DropDown1" EventName="SelectedIndexChanged" />

One way is to make an ajax page method that would be called by javascript on the page when DropDown's item is selected. Then in code behind, inside that page method, call UpdatePanel1.Update().

Is there an easier alternative?

Best Solution

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

The control that the AsyncPostBackTrigger references must be in the same naming container as the update panel for which it is a trigger. Triggers that are based on controls in other naming containers are not supported.

The workaround is to use the UniqueID of the control that the trigger is referencing. Unfortunately the UniqueID isn't qualified until the control has been added to its parent (and its parent has been added to its parent, all the way up the control tree).

In your code behind, try:

UpdatePanel1.Triggers.Add(new AsyncPostBackTrigger()
    ControlID = DropDown1.UniqueID,
    EventName = "SelectedIndexChanged", // this may be optional
Related Question