How do I get all values from a listbox that are not selected in ASP.NET MVC

Question

Hello,

I have a form that (amongst other things) contains 2 multi-select listboxes. Basically you can add items to the one on the right from the full list of items on the left using some add/remove buttons.

The problem is that I cannot see a way of picking up the contents of the listbox when posting back to the controller.

I have followed this example: http://ittecture.wordpress.com/2009/04/30/tip-of-the-day-198-asp-net-mvc-listbox-controls/

This works fine if you have actually selected the items in the listbox before posting. That's not really the way I think this UI should behave though.

Hope that makes sense, Nick

Answer 1

In addition to listbox, have several hidden input fields to hold "currently added" items. The listbox selection will indicate "items to remove" when selected.

OK, clarification. You have left and right listboxes. Left one holds available items, and selected ones are POSTed and then added. Right one holds currently added items, and selected ones are POSTed and then removed from added items.

Now, you also need to hold currently added items. You can do this via bunch of

<input type="hidden" name="currently_added" value="itemid" />

hidden fields.

Yes you can go jQuery but this is an easy way; not every site should be designed to require JavaScript turned on. The above solution works without JavaScript enabled.

Your post from page will give you 3 arrays:

1. Left side box selected items to add
2. Right side box selected items to remove
3. Hidden fields - already added items

You take (3), remove (2) from it, add (1) to it, and display the same page or do whatever you want.

Answer 2

I don't think a listbox is the control you want for the control on the right. The way a listbox works (by posting the selected item) is not what you're trying to achieve.

You could consider having a grid or even just a div with a number of strings. There is more Javascript/JQuery to be written, but it will provide a nice user experience because no postbacks will be needed until all the work is complete.

You'll need to use JavaScript/JQuery to add and remove items from the div based on the buttons to add and remove.

In addition, for each item that is added on the right, you'll need to add a hidden input field:

<input type="hidden" id="SelectedItems" value="..." />

Set the value to the key or id of the newly added item. If you remove a field from the right control, make sure you remove the associated hidden field.

To handle items on the right that the user has removed, you'll need hidden fields to indicate which have been removed:

<input type="hidden" id="RemovedItems" value="..." />

Then in your controller you can add two parameters to the Action (or add two field to the viewmodel) which will be arrays of strings. This will be set to all of the values in the hidden fields that were added, and all the ones that were removed.

Answer 3

Thanks for the help guys. I forgot to mention that I am populating the selected items listbox with jQuery. Not sure if that was important or not though.

In the end, I fixed it by selecting all items onclick with jQuery before posting. Seemed like the easiest solution.