9

如何在同一视图中将项目从一个列表框移动到另一个列表框，而无需重新加载整个页面，而只需更新 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

4

2 回答 2

5

我给你做了一个小提琴，让你知道如何实现这一点。你可能会发现它很有用。

基本上，如果您有 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>

查看小提琴以获取工作示例。我希望这有帮助。

于 2013-05-20T03:42:49.660 回答
0

让我确保我理解你的问题：

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

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

请发布您目前拥有的代码，我们将从那里开始。

于 2013-05-20T02:18:36.943 回答