Использование jQuery для перемещения элементов между списками.NET

Question

У меня есть два списка, два тега ввода HTML и одна кнопка отправки.NET на веб-странице.

// The two listboxes
<asp:ListBox ID="lbViewOptions_Hidden" runat="server" Rows="7" Width="110px"></asp:ListBox>
<asp:ListBox ID="lbViewOptions_Show" runat="server" Rows="7" Width="110px"></asp:ListBox>

// The two html input tag
<input id="ibtnRight" type="image" src="images/move_right.png" style="height:16px;width:16px;border-width:0px;" />
<input id="ibtnLeft" type="image" src="images/move_left.png" style="height:16px;width:16px;border-width:0px;" />

// The .NET submit button
<asp:Button ID="btnApplyViewOptions" runat="server" Text="Apply" CssClass="submit" onclick="btnApplyViewOptions_Click" />

У меня есть следующие функции jQuery для событий click тегов ввода, которые просто перемещают элементы назад и вперед между двумя списками. Эти функции прекрасно работают и перемещают элементы назад и вперед между списками.

$('#ibtnRight').click(function ($e) {
    $("select[id$='lbViewOptions_Hidden'] option:selected").appendTo(
        $("select[id$='lbViewOptions_Show']"));
    $("select[id$='lbViewOptions_Hidden'] option:selected").remove();

    $e.preventDefault();
});

$('#ibtnLeft').click(function ($e) {
    $("select[id$='lbViewOptions_Show'] option:selected").appendTo(
        $("select[id$='lbViewOptions_Hidden']"));
    $("select[id$='lbViewOptions_Show'] option:selected").remove();

    $e.preventDefault();
});

Списки загружаются во время события page_load с различными динамическими элементами, поэтому я использую элементы управления списками ASP.NET вместо простого кодирования HTML-тега выбора с различными элементами. Моя проблема заключается в следующем: из-за того, что списки являются элементами управления.NET, и я использую jQuery для перемещения элементов назад и вперед между ними, любые сделанные в них изменения не сохраняются при обратной передаче.

Например, предположим, что список lbViewOptions_Hidden содержит два элемента: "Foo # 1" и "Foo # 2". Если я выберу элемент "Foo # 2" и нажму кнопку ввода, чтобы переместить его в список lbViewOptions_Show, то он переместится как следует, и теперь у меня есть элемент "Foo # 1" в первом списке и элемент "Foo # 2" во втором списке. Однако, если я нажимаю кнопку.NET btnApplyViewOptions для отправки обратно на сервер, во втором списке нет элементов, и все элементы все еще находятся в первом списке.

Как мне решить проблему? Я предполагаю, что это как-то связано с ViewState, но я не уверен в этом. Заранее спасибо за любую помощь, что я получаю на этом!

Answer 1

Вам придется либо использовать Ajax для вызова серверной части WebMethod, чтобы обновить элементы управления, сохранив изменения в сеансе... затем при обратной передаче обновите элементы управления со значениями сеанса.

Или вы можете использовать скрытое поле, которое имеет runat="server" Атрибут добавлен к нему, чтобы сохранить изменения между списками, а затем захватить изменения в обратной записи и обновить элементы управления таким образом.