如何在ASP MVC 4中将项目从一个列表框移动到另一个列表框？

Question

如何在同一个视图中将项目从一个列表框移动到另一个列表框,而不必重新加载整个页面,只需更新ASP MVC 4中的两个列表框？

这是为了拥有一些选定的音乐流派,然后能够通过提交按钮将这些音乐流派提交到网络服务.

类型具有不应显示的id和应显示的名称.

我试图在过去的4个小时内搞清楚,但我似乎无法完成任何工作.

编辑:解决移动项目

我解决了使用jQuery移动项目的问题.我添加了对jquery.unobtrusive-ajax.js的引用,并为视图添加了一些方法.最终视图如下所示:

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>

编辑:继续新问题

我已经在这个问题中询问了更多信息和更具体的内容 从控制器MVC ASP 4中的列表框中获取项目

Answer 1

我为您准备了一个小提琴，以使您了解如何实现这一目标。您可能会发现它很有用。

基本上，只要您有2个select元素（并假设您使用的是jQuery），您就可以执行以下操作：

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

相应的html如下所示：

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

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

查看小提琴中的示例。我希望这有帮助。