Trying to move around asp.net panels around dynamically on postback

Question

I have 2 sections of my website I am developing, a reference box that has a fixed width and a working box that has the same height as the content. I am trying to make it so the user can swap the content between the two boxes. I have the following type of setup in the aspx page:

<asp:panel id="pnlReference" runat="server" CssClass="referencePanel" >
    <asp:panel id="pnlsection1" runat="server" >
        Content....
    </asp:panel>
</asp:panel>

<asp:linkbutton id="lbtSwapPanels" runat="server" />

<asp:panel id="pnlWorking" runat="server" CssClass="workingPanel" >
    <asp:panel id="pnlSection2" runat="server" >
       Content....
    </asp:panel>
</asp:panel>

What I am trying to have occur is when I press the lbtSwapPanels linkbutton, it moves pnlSection1 into pnlWorking and pnlSection2 into pnlReference. The code I used to do this in the OnClick method was:

    Control pane1, pane2;

    pane1 = pnlWorking.Controls[0];
    pane2 = pnlReference.Controls[0];

    // Remove them from their respective panels
    pnlWorking.Controls.Remove(pane1);
    pnlReference.Controls.Remove(pane2);

    // Add them to the opposite pane
    pnlWorking.Controls.Add(pane2);
    pnlReference.Controls.Add(pane1);

Unfortunately, this does not work. When I click the linkbutton, nothing happens. If I then do something to perform another postback the reference and working panels become empty. I assume this has to do with the change not being saved into Viewstate but I don't know how to get around that.

Does anyone have any ideas on how to do this?

Update: It seems that moving objects around with Jquery is causing issues with asp.net postbacks as well as making my asp.net ajax tabcontainer completely fail to function. After 2 swaps and postbacks, further postbacks cease to function at all. Here's the new code

<div id="referencePane">
  <asp:panel id="pnlsection1" runat="server" >
    Content with tab container
  </asp:panel
</div>
<a href="#" onclick="SwapPanes()">Swap Panes</a>
<div id="workingPane">
  <asp:panel id="pnlsection2" runat="server" >
    Content
  </asp:panel>
</div>

Here's the javascript:

function SwapPanes() {
    var pane1, pane2;    

    pane1 = $("#workingPane").html();
    pane2 = $("#referencePane").html();
    $("#workingPane").empty();
    $("#referencePane").empty();

    // Add them to the opposite pane
    $("#workingPane").prepend(pane2);
    $("#referencePane").prepend(pane1);
}

First postback causes the tabcontainer to fail (javascript exceptions claiming it's trying to create a tab container with teh same ID (only one exists in the original aspx page). Postbacks then proceed to do wierd stuff.

Answer 1

Have you thought about keeping the controls in the panel but just swapping the position of the panels? You can do this pretty easily in JQuery although you'll be using DIVS instead of ASP.NET panels. This is, again, quite easy since Panels just translate to DIVS in the end. I did this recently for a wizard-style questionnaire (moving from panels to divs) and I was surprised how easy it was.

Update: Note that, when you swap the div positions, you can change the style as well (again, easy in JQuery) so that the user won't have a jarring "why did these two things change position" experience.

The bottom line, really, is that I think you are trying to use a hammer to drive a screw. JQuery is the screwdriver you are looking for and learning it is very much worth your while!

Answer 2

Look into ASP.Net web parts. That will manage the whole thing for you in a dynamic and responsive way.