How can i move items from one Listbox to another in ASP MVC 4?

Question

How is it possible to move items from one Listbox to another Listbox in the same view without having to reload the entire page but just update the two listboxes in ASP MVC 4?

It is in order to have some selected music genres and then be able to submit those music genres to a webservice with a submit button.

The genres have an id which should not be shown and a name which should be shown.

I have tried to figure it out for the last 4 hours but i can't seem to get anything to work at all.

Edit: Solved moving items

I solved moving the items using jQuery. I've added a reference to jquery.unobtrusive-ajax.js and added some methods to the view. The final view looks like this:

SelectGenre.cshtml
@model SelectGenreModel

<div id="genreDiv">
@Html.ListBoxFor(model => model.AvailableGenres, new MultiSelectList(Model.AvailableGenres, "Id", "Name"), new { size = "10" })

<input id="btnAddAll" type="button" value=" >> " onclick="addallItems();" />
<input id="btnAdd" type="button" value=" > " onclick="addItem();" />
<input id="btnRemove" type="button" value=" < "  onclick="removeItem();" />
<input id="btnRemoveAll"type="button" value=" << "  onclick="removeallItems();" />

@Html.ListBoxFor(model => model.ChosenGenres, new MultiSelectList(Model.ChosenGenres, "Id", "Name"), new { size = "10" })
</div>

<script type="text/javascript">
function addItem() {
    $("#AvailableGenres option:selected").appendTo("#ChosenGenres");
    $("#ChosenGenres option").attr("selected", false);
}
function addallItems() {
    $("#AvailableGenres option").appendTo("#ChosenGenres");
    $("#ChosenGenres option").attr("selected", false);
}
function removeItem() {
    $("#ChosenGenres option:selected").appendTo("#AvailableGenres");
    $("#AvailableGenres option").attr("selected", false);
}
function removeallItems() {
    $("#ChosenGenres option").appendTo("#AvailableGenres");
    $("#AvailableGenres option").attr("selected", false);
}
</script>

Edit: Continued in new question

I have asked with more information and more specific in this question Get items from listbox in controller MVC ASP 4

Answer 1

I've made you a fiddle to give you an idea of how this could be achieved. You might find it useful.

Basically provided that you have 2 select elements (and presuming that you're using jQuery) you'd do something like:

$('#sourceItems').change(function () {
    $(this).find('option:selected').appendTo('#destinationItems');
});

And the corresponding html goes like:

<select id="sourceItems">
    <option>TestItem1</option>
    <option>TestItem2</option>
    // ...
</select>

<select id="destinationItems">
   // ... more options ...
</select>

Check out the fiddle for a working example. I hope this helps.

Answer 2

Let me make sure I understand your question:

• Webpage loads and has 2 listboxes. One is filled with music genres, the other is empty.
• User selects one (or many) genres, clicks a "move" button, and the genres move from the first listbox to the second listbox.
• User clicks a Submit button, and all genres present in the second listbox are sent along to some webservice.

If you want the "move" button to transfer the listbox items from the first listbox to the second listbox, without reloading the page, you'll need to write some client-side scripts (JavaScript) to deal with that. If my understanding of your question is correct, this is probably the concept you're having a hard time dealing with.

Please post the code that you have so far, and we'll go from there.