Update panel not working with user control

Question

I can't figure out how to get a trigger in an update panel to update a control in anther update panel if the trigger is inside a user control inside the update panel. Here's my test case.

Test.aspx:

<%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true"
    CodeBehind="Test.aspx.cs" Inherits="MyTestApp.Test" %>

<%@ Register src="UpdatePanelTest.ascx" tagname="UpdatePanelTest" tagprefix="uc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="body" runat="server">

<div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <uc1:UpdatePanelTest ID="UpdatePanelTest1" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Label ID="Label2" runat="server" ForeColor="red" />

        </ContentTemplate>

    </asp:UpdatePanel>
    <asp:Button ID="Button3" runat="server" Text="(3) Update Black Time" OnClick="Button3_Click" />
</div>
</asp:Content>

Test.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace MyTestApp
{
    public partial class Test : System.Web.UI.Page
    {
        protected void Button3_Click(object sender, EventArgs e)
        {
            ((Label)UpdatePanel1.FindControl("UpdatePanelTest1").FindControl("Label1")).Text = DateTime.Now.ToLongTimeString();
        }
    }
}

UpdatePanelTest.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UpdatePanelTest.ascx.cs" Inherits="MyTestApp.UpdatePanelTest" %>
<asp:Label ID="Label1" runat="server" /><br />
<asp:Button ID="Button1" runat="server" Text="(1) Update Both Times" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="(2) Update Black Time" OnClick="Button2_Click" />

UpdatePanelTest.ascx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace MyTestApp
{
    public partial class UpdatePanelTest : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = DateTime.Now.ToLongTimeString();
            ((Label)Parent.FindControl("UpdatePanel2").FindControl("Label2")).Text = DateTime.Now.ToLongTimeString();
        }
        protected void Button2_Click(object sender, EventArgs e)
        {
            Label1.Text = DateTime.Now.ToLongTimeString();
        }
    }
}

The UI is as follows:

(empty first label, which will become a black timestamp)
(1) Update Both Times             (2) Update Black Time
(empty second label, which will become a red timestamp)
(3) Update Black Time

If I click (1), which is inside the user control, only the black timestamp updates, although when I debug into it, I can see it correctly assigning the text to the red timestamp. If I click (2), also inside the user control, it correctly updates just the black timestamp. If I click (3), which is on the main page, it only updates the black timestamp, but it will finally display the red timestamp, which has the timestamp from when I clicked button (1). The other problem with this is it's refreshing the entire page, which is the whole thing I'm trying to avoid.

What do I need to change to get this to correctly update and display a control in one UpdatePanel when I click a control inside a user control in another UpdatePanel ? I've tried this the other way, clicking a control inside an UpdatePanel to try and update a control inside a user control inside another UpdatePanel , with similar results.

Answer 1

Updating from one update panel to another update panel may require an explicit calling of Update method on the latter. Expose an Event in the user control, implement in your page that consumes this user control and call Update method of the second UpdatePanel.

To be explicit, the code for the Button1 click event inside UpdatePanelTest.ascx.cs needed to be changed to the following:

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = DateTime.Now.ToLongTimeString();
    ((Label)Parent.FindControl("UpdatePanel2").FindControl("Label2")).Text = DateTime.Now.ToLongTimeString();
    ((UpdatePanel)Parent.FindControl("UpdatePanel2")).Update();
}