Question

May be it’s the same question i have i asked before but the issue is the same and i didn’t find any resolution so i have to write it again with the expectation that it would be solved this time.
My question is i am using two list boxes and one list box is populated by putting the list the list item tag in listBox1 on aspx page and i want to implement functionality like add and remove between two list boxes i mean removing an item from listBox1 should be added to second and removing an item from second should be added to first. While i tried my own but the problem is that on post back it come to same condition. I have implemented the add remove functionality by using the jQuery but the problem is that on post back it come to same condition so i want a good solution for this ow should i implement this so that on post back it retain it’s value please ris me off from this issue.
I found some solutions for this on Google that i should make some other class which will extend ListBox base class but i couldn’t understand that and how should i code for that so please explain me that code if possible.

Answer 1

No jQuery involved, but all the swapping takes place on the client, any moved item will still be moved after a postback.

<select id="ListBox1" name="ListBox1" runat="server" size="5" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br />
<input class="button" onclick="moveSelectedItems(document.getElementById('ListBox1'), document.getElementById('ListBox2'));"                                         type="button" value="<"/>&nbsp;<br/>
<input class="button" onclick="moveSelectedItems(document.getElementById('ListBox2'), document.getElementById('ListBox1'));"                                         type="button" value=">"/><br/>
<select id="ListBox2" name="ListBox2" runat="server" size="5">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
</select>
<asp:HiddenField runat="server" ID="ListOneHiddenField" />
<asp:HiddenField runat="server" ID="ListTwoHiddenField" />

<script type="text/javascript">
function moveSelectedItems(oListFrom, oListTo) 
{
        var oNewOption;

        // Move the item from one list to another
        oNewOption = document.createElement("OPTION");
        oListTo.options.add(oNewOption);
        oNewOption.innerText = oListFrom.options(oListFrom.selectedIndex).innerText;
        oNewOption.value = oListFrom.options(oListFrom.selectedIndex).value;
        oListFrom.options.remove(oListFrom.selectedIndex);

        // Persist the pipe-separated set of items in each listbox to a hidden field
        document.getElementById('ListOneHiddenField').value = "";

        for (var j = 0; j < document.getElementById('ListBox1').options.length; j++)
            document.getElementById('ListOneHiddenField').value += document.getElementById('ListBox1').options(j).value + "|";

        document.getElementById('ListTwoHiddenField').value = "";

        for (var j = 0; j < document.getElementById('ListBox2').options.length; j++)
            document.getElementById('ListTwoHiddenField').value += document.getElementById('ListBox2').options(j).value + "|";
}
</script>


protected void Page_Load(object sender, EventArgs e)
{
    string[] listItems;

    if (IsPostBack)
    {
        // Clear the ListBox
        ListBox1.Items.Clear();

        // Split the set of items into an array
        listItems = ListOneHiddenField.Value.Split("|".ToCharArray());

        // Rebuild the set of list items
        foreach (string listItem in listItems)
        {
            if (!string.IsNullOrEmpty(listItem))
            {
                ListBox1.Items.Add(new ListItem(listItem, listItem));
            }
        }

        // Rinse and repeat
        ListBox2.Items.Clear();

        listItems = ListTwoHiddenField.Value.Split("|".ToCharArray());

        foreach (string listItem in listItems)
        {
            if (!string.IsNullOrEmpty(listItem))
            {
                ListBox2.Items.Add(new ListItem(listItem, listItem));
            }
        }
    }
}