Need help with updatePanel

Question

My content page

  <asp:updatePanel id="Panel1" runat="server" Visible="true">
         <ContentTemplate>
                <div>
                    blah blah
                </div>
          </ContentTemplate>
    </asp:updatePanel>

    <asp:updatePanel id="Panel2" runat="server" Visible="false">
         <ContentTemplate>
                <div>
                    yada yada
                </div>
          </ContentTemplate>
    </asp:updatePanel>     

Code file ..The following code is at the end of Submit button click event :-

            Panel1.Visible = false;
            Panel2.Visible = true;

Now earlier I was using asp:Panel..then it was working fine..like Panel 1 would hide and Panel 2 would show up instead..it was AFTER I changed asp:Panel to asp:updatePanel that things got screwed up...now the Submit button just won't work !!

What's gone wrong suddenly ?? I changed it to updatePanel so the page doesn't refresh..isn't this how we implement this thing ???

       <asp:updatePanel id="Panel1" runat="server">
          <ContentTemplate>
          <div>
     <p>
        Type ur name

                <asp:TextBox ID="name" runat="server">
                </asp:TextBox>
       </p>


        <asp:Button ID="btn" OnClick="btn_Click" runat="server" 
        Text="Submit" />
     </div>

    </ContentTemplate>
            </asp:updatePanel>


   <asp:updatePanel id="Panel2" runat="server" Visible="false">
    <ContentTemplate>
    <div>
       Thank You!

    </div>
    </ContentTemplate>
    </asp:updatePanel>

Answer 1

I do not know where your Submit button is, but maybe try updating those panels with:

Panel1.Update();
Panel2.Update();

Answer 2

At http://msdn.microsoft.com/en-us/magazine/cc163413.aspx#S3 , you can read

Multiple UpdatePanels

A page can host several UpdatePanels. By default, when one UpdatePanel on a page updates, the other UpdatePanels on the page also update. Sometimes that’s what you want, but more often than not, you don’t need every UpdatePanel updating in response to other UpdatePanels. You can be selective about which UpdatePanel instances update (and when) by setting the UpdateMode property of each UpdatePanel control on the page to "Conditional." Then, when one UpdatePanel updates and calls a server-side event handler, call UpdatePanel.Update on the other panels you want to update. This reduces the load on the server by reducing the number of controls that render, and it reduces the volume of data in the response because UpdatePanels that don’t update don’t add anything to the response.

Answer 3

If you set Visible="false" on an UpdatePanel, it won't be rendered to the client at all. Therefore, if you're doing an Ajax postback, the client isn't going to be able to make the invisible UpdatePanel visible, because it just isn't there.

Think of UpdatePanels just as markers, showing which bits of your page you want to update on an Ajax postback. For your scenario, I think the easiest solution would be to use both UpdatePanels and Panels. Also, because the two things you're updating (the two Panels) are right next to each other, there's no need for two separate UpdatePanels:

<asp:updatePanel id="UpdatePanel1" runat="server">
  <ContentTemplate>
    <asp:Panel id="Panel1" Visible="true" runat="server">
      blah blah
    </asp:Panel>
    <asp:Panel id="Panel2" Visible="false" runat="server">
      yada yada
    </asp:Panel>
  </ContentTemplate>
</asp:updatePanel>

Then in the code-behind, change the Visible property on the Panel controls.