Попытка динамически перемещаться по панелям 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, утверждающие, что он пытается создать контейнер вкладок с тем же идентификатором (на исходной странице aspx существует только один).

Answer 1

Задумывались ли вы о том, чтобы сохранить элементы управления на панели, а просто поменять положение панелей? Вы можете сделать это довольно легко в JQuery, хотя вы будете использовать DIVS вместо панелей ASP.NET. Это, опять же, довольно просто, так как в конце Панели просто переводятся в DIVS. Я сделал это недавно для вопросника в стиле мастера (переход от панелей к элементам div) и был удивлен, насколько это просто.

Обновление: обратите внимание, что когда вы меняете позиции div, вы также можете изменить стиль (опять же, легко в JQuery), чтобы у пользователя не было резкого «почему эти две вещи изменили положение».

Суть в том, что я думаю, что вы пытаетесь использовать молоток для ввинчивания винта. JQuery - это отвертка, которую вы ищете и изучаете, она того стоит!

Answer 2

Посмотрите на веб-части ASP.Net. Это поможет вам динамично и быстро реагировать.