How do I get a button that is inside an asp:UpdatePanel to update the whole page?

Question

I have a button inside an update panel that I would like to update the whole page. I have set ChildrenAsTriggers="false" and UpdateMode="Conditional".

I have some sample code here that demonstrates my problem.

<asp:UpdatePanel ID="myFirstPanel" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
   <ContentTemplate>
      <asp:Button runat="server" ID="myFirstButton" Text="My First Button" onclick="myFirstButton_Click" />
      <asp:Button runat="server" ID="mySecondButton" Text="My Second Button" onclick="mySecondButton_Click" />
   </ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanel ID="mySecondPanel" runat="server">
   <ContentTemplate>
       <asp:Label runat="server" ID="myFirstLabel" Text="My First Label"></asp:Label>
    </ContentTemplate>
    <Triggers>
       <asp:AsyncPostBackTrigger ControlID="myFirstButton" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>
<asp:Label runat="server" ID="mySecondLabel" Text="My Second Label"></asp:Label>

And the code behind:

protected void myFirstButton_Click(object sender, EventArgs e)
{
  myFirstLabel.Text = "Inside Panel " + DateTime.Now.ToString("mm:ss");
}
protected void mySecondButton_Click(object sender, EventArgs e)
{
  mySecondLabel.Text = "Outside Panel " + DateTime.Now.ToString("mm:ss");
}

I want to update the label that is not inside an update panel when the second button is clicked. The second button needs to be in an update panel. I don't want to put the lable into an update panel.

Answer 1

If the label is not in an update panel the only way to refresh the value is by refreshing the entire page like in a normal postback. You would have to do a redirect to the same page to refresh it. The ajax framework knows to handle the redirects even if the request is from an update panel so just do an Response.Redirect(...) on the button click.

Answer 2

to me, this setup doesn't make sense. keep in mind that while update panels can be a great way of achieving an ajax like effect very easily, they're not ideal in all situations.

if your page architecture requires the arrangement of elements as you have in your example, you may be better off looking at using page or service methods with javascript to update the label.

Answer 3

Try adding a PostBackTrigger to the first UpdatePanel, for the secound button. That will tell that update panel, that the button should make a full postback.

Answer 4

If you add a PostBackTrigger to the first update panel like so

<Triggers>
   <asp:PostBackTrigger ControlID="mySecondButton" />
</Triggers>

This will cause a full post back to happen when the second button is clicked. This is the exact behaviour I was looking for.

Answer 5

ScriptManager.GetCurrent(Page).RegisterPostBackControl(button); will solve your problem