UpdatePanel.Update() not updating in real time

Question

This leads on from a problem with another thread....but is more focussed on one point hopefully!

I've got an AJAX update Panel

<asp:UpdatePanel
     ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
           <ContentTemplate>
                                <asp:Label ID="lblMessage1" runat="server" />
                                <asp:Label ID="lblMessage2" runat="server" />
                                <asp:Button ID="btnTrigger" runat="server"        onclick="Button1_Click" style="visibility:hidden"/>

              </ContentTemplate>
 </asp:UpdatePanel>

And my code behind is this

 protected void Button1_Click(object sender, EventArgs e)

    {
        Type cstype = this.GetType();
        Label message1 = (Label)(FindControl("lblMessage1"));
        Label message2 = (Label)(FindControl("lblMessage2"));

        message1.Text = "adam";
        UpdatePanel1.Update();

        Thread.Sleep(5000);

        message2.Text = "adam2";
        UpdatePanel1.Update();

I want to see Adam appear and then Adam2 after 5 seconds, but they both appear together.

Answer 1

You are calling Update on the panel, but since it's occurring on the server side, both calls are essentially executed on the client at the same time. Calling Update has no effect until the call is returned. You would need two separate calls, or a client side trigger to make it behave the way you have described.

Answer 2

The code you have provided will set the value in message1.Text ON THE SERVER, wait 5 seconds ON THE SERVER, and then set message2.Text ON THE SERVER... it will then send everything back to the client in one go. That is why you're seeing it all update at the same time.

If you want them to be updated at different times, you will need more complex coding to call two separate things on the server, and display them independently.

For that, you're probably going to have to look at TWO <asp:UpdatePanel> objects, or write your own AJAX handling code in javascript/jquery

Answer 3

Try to separate 2 labels, 2 buttons into 2 different update panels. Then trigger them continuously one after another 5 seconds:

HTML:

<asp:UpdatePanel
     ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
           <ContentTemplate>
                <asp:Label ID="lblMessage1" runat="server" />
                <asp:Button ID="btnTrigger1" runat="server"        onclick="Button1_Click" style="visibility:hidden"/>
              </ContentTemplate>
 </asp:UpdatePanel>

<asp:UpdatePanel
     ID="UpdatePanel2" runat="server" UpdateMode="Conditional" >
           <ContentTemplate>
                 <asp:Label ID="lblMessage2" runat="server" />
                 <asp:Button ID="btnTrigger2" runat="server"        onclick="Button2_Click" style="visibility:hidden"/>
           </ContentTemplate>
 </asp:UpdatePanel>

<script>
     window.onload = function(){
          document.getElementById("<%= btnTrigger1.ClientID %>").click();
          // wait 5 secs to trigger 2nd button
          setTimeout(function(){
                document.getElementById("<%= btnTrigger2.ClientID %>").click();
          }, 5000);
     };
</script>

CS:

protected void Button1_Click(object sender, EventArgs e)
{
    Type cstype = this.GetType();
    Label message1 = (Label)(FindControl("lblMessage1"));

    message1.Text = "adam";
    UpdatePanel1.Update();
}

protected void Button2_Click(object sender, EventArgs e)
{
    Type cstype = this.GetType();
    Label message2 = (Label)(FindControl("lblMessage2"));

    message2.Text = "adam2";
    UpdatePanel1.Update();
}