试图在回发时动态移动 asp.net 面板

Question

我正在开发我的网站的 2 个部分，一个具有固定宽度的参考框和一个与内容具有相同高度的工作框。我正在努力做到这一点，以便用户可以在两个框之间交换内容。我在 aspx 页面中有以下类型的设置：

<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>

我想要发生的是当我按下 lbtSwapPanels 链接按钮时，它会将 pnlSection1 移动到 pnlWorking 并将 pnlSection2 移动到 pnlReference。我在 OnClick 方法中使用的代码是：

    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);

很遗憾，这不起作用。当我单击链接按钮时，没有任何反应。如果我然后做一些事情来执行另一个回发，那么参考和工作面板就会变成空的。我认为这与未保存到 Viewstate 中的更改有关，但我不知道如何解决这个问题。

有人对如何做到这一点有任何想法吗？

更新： 使用 Jquery 移动对象似乎会导致 asp.net 回发问题以及使我的 asp.net ajax tabcontainer 完全无法运行。在 2 次交换和回发之后，进一步的回发根本不再起作用。这是新代码

<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>

这里是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);
}

第一次回发导致 tabcontainer 失败（javascript 异常声称它正在尝试创建一个具有相同 ID 的选项卡容器（原始 aspx 页面中仅存在一个）。然后回发继续做一些奇怪的事情。

Answer 1

您是否考虑过将控件保留在面板中，而只是交换面板的位置？尽管您将使用 DIVS 而不是 ASP.NET 面板，但您可以在 JQuery 中轻松完成此操作。同样，这很容易，因为面板最终只是转换为 DIVS。我最近做了一个向导式问卷调查（从面板转移到 div），我很惊讶它是如此简单。

更新：请注意，当您交换 div 位置时，您也可以更改样式（同样，在 JQuery 中很简单），这样用户就不会有“为什么这两件事会改变位置”的不和谐体验。

实际上，我认为您正在尝试使用锤子来驱动螺钉。 JQuery 是您正在寻找的螺丝刀，学习它非常值得！