Question

我正在开发我的网站的两个部分，一个具有固定宽度的参考框和一个与内容具有相同高度的工作框。我试图让它用户可以在两个盒子之间交换内容。我在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

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

更新：请注意，当您交换div位置时，您也可以更改样式（再次，在JQuery中很容易），这样用户就不会有“为什么这两件事改变位置”的经历。

最重要的是，我认为你是想用锤子来驱动螺丝。 JQuery是你正在寻找的螺丝刀，并且非常值得你学习它！

Answer 2

查看ASP.Net Web部件。这将以动态和反应的方式为您管理整个事情。

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

2 个答案: