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>

编辑：继续新问题

我已经在这个问题中提供了更多信息和更具体的信息 Get items from listbox in controller MVC ASP 4

Answer 1

我已经让你fiddle让你知道如何实现这一目标。您可能会发现它很有用。

基本上假设您有2个选择元素（假设您正在使用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>

查看小提琴的工作示例。我希望这会有所帮助。

Answer 2

让我确保理解你的问题：

网页加载并有2个列表框。一个是充满音乐类型，另一个是空的。
用户选择一个（或多个）流派，点击“移动”按钮，流派从第一个列表框移动到第二个列表框。
用户点击“提交”按钮，第二个列表框中的所有类型都会被发送到某个网络服务。

如果您希望“移动”按钮将列表框项目从第一个列表框传输到第二个列表框，而无需重新加载页面，则需要编写一些客户端脚本（JavaScript）来处理它。如果我对你的问题的理解是正确的，这可能是你很难处理的概念。

请发布到目前为止的代码，我们将从那里开始。

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

编辑：解决移动项目

编辑：继续新问题

2 个答案: