Items not added to ListBox after using jQuery .appendTo

Question

Preface: First time really using JavaScript + jQuery, so my problem likely stems from a lack of understanding.

I have some very simple Javascript to move elements from one ListBox to another:

$('[id$=AddRole]').click(function () {
  $('[id$=MissingRoles] option:selected').appendTo('[id$=Roles]');
  return false;
});

$('[id$=RemoveRole]').click(function () {
  $('[id$=Roles] option:selected').appendTo('[id$=MissingRoles]');
  return false;
});

This works wonderfully - when I click a button, the items in one list move to the other as you would expect. Fantastic! A button is then clicked forcing a Postback. In the if (IsPostBack) section of my code, I extract the 'Roles' ItemCollection and print each item out, assuming to see any new items I added. Sadly, I only get the original items that were DataBound to the list. I don't have my DataBind accidently in the IsPostBack section, so I know I'm not simply re-binding.

I'm assuming I'm missing a step here. Is there something I need to do to tell .NET to actually update the contents of the ListBox? Guessing that whatever jQuery is doing is purely aesthetic, but I'm at a loss on how to commit its changes to my controls.

Answer 1

This is actually a limitation that is due to the fact that .NET assumes that everything is left the way it was first served. If the site renders a textbox, it'll know that the value may have changed, and it updates its value based on the POST data. If it renders a disabled textbox, for instance, it "knows" that the value cannot have changed, and so, you will not be able to get the changed text, even if a javascript has enabled the textbox.

The same thing is happening here. .NET assumes it already knows what items belong to which list. The selected value is always being posted in the Request.Form collection, so even if the values in the .NET listbox control doesn't change, you will still be able to fetch the values that way (Request.Form[myListBox.ClientID]), but the values that are not selected in any of the listbox, are not being passed as form data, so there is actually technically no way for the server to know in which ways you tampered with the listbox before submitting it.

What you have to do isn't very pretty, but it's the only way. In both of your functions that move data around, you'll have to make sure that they also update a hidden field. It could be one hidden field for each listbox, or one hidden field containing the comma separated values of all listbox items, in a pipe-separated list of all listboxes, or whichever way you want to represent the data, but at the end of the day, you really have to manually make a string representaiton of the data in the different listboxes, that you can pick up at the serverside, and use to re-bind your listboxes with the new, relevant data.

Answer 2

If you are using asp.net I believe this is because you are not manipulating the viewstate, and this is important to the asp.net server on the postback to render.

I would suggest simply using an UpdatePanel to wrap your controls. Asp.net has great Ajax type functionality built in already, no full postback necessary. Their logic controls all the name mangling and viewstate.