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

how possible move items 1 listbox listbox in same view without having reload entire page update 2 listboxes in asp mvc 4?

it in order have selected music genres , able submit music genres webservice submit button.

the genres have id should not shown , name should shown.

i have tried figure out last 4 hours can't seem work @ all.

edit: solved moving items

i solved moving items using jquery. i’ve added reference jquery.unobtrusive-ajax.js , added methods view. final view looks 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 more information , more specific in question get items listbox in controller mvc asp 4

i've made fiddle give idea of how achieved. might find useful.

basically provided have 2 select elements (and presuming you're using jquery) you'd like:

$('#sourceitems').change(function () {     $(this).find('option:selected').appendto('#destinationitems'); }); 

and corresponding html goes like:

<select id="sourceitems">     <option>testitem1</option>     <option>testitem2</option>     // ... </select>  <select id="destinationitems">    // ... more options ... </select> 

check out fiddle working example. hope helps.