Question

I have two listboxes, two html input tags and one .NET submit button on an webpage.

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

I have the following jQuery functions for the click events of the input tags, which simply move items back and forth between the two listboxes. These functions work just fine and move items back and forth between the listboxes.

$('#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();
});

The listboxes are loaded during the page_load event with various items that are dynamic, thus my reason for using ASP.NET listbox controls instead of just hardcoding an HTML select tag with the various items. My problem is this: due to the fact that the listboxes are .NET controls and I’m using jQuery to move items back and forth between the them, any changes made to them does not persist through a postback.

For example, assume that listbox lbViewOptions_Hidden has two items in it: “Foo #1” and “Foo #2”. If I select item “Foo #2” and click the input button to move it to listbox lbViewOptions_Show, then it moves over as it should, and I now have item “Foo #1” in the first listbox and item “Foo #2” in the second listbox. However, if I click on the .NET button btnApplyViewOptions to submit back to the server, the second listbox has no items and all of the items are still in the first listbox.

How do I go about fixing this problem? I assume that it has something to do with the ViewState, but I’m not positive about it. Thanks in advance for any help that I get on this!

Answer 1

You are going to have to either use Ajax to call a WebMethod server side to update the controls by storing the changes in the session … then upon postback update the controls with the session values.

Or you can use a hidden field that has the runat="server" attribute added to it, to store the changes between the lists and then grab the changes on post back and update the controls that way.