9

ページ全体をリロードせずに、ASP MVC 4 の 2 つのリストボックスを更新するだけで、同じビュー内の 1 つのリストボックスから別のリストボックスにアイテムを移動するにはどうすればよいですか?

これは、いくつかの音楽ジャンルを選択し、送信ボタンを使用してそれらの音楽ジャンルを Web サービスに送信できるようにするためです。

ジャンルには、表示されるべきではない 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のリストボックスからアイテムを取得します

4

2 に答える 2

5

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.

于 2013-05-20T03:42:49.660 に答える
0

あなたの質問を理解していることを確認させてください：

  • Web ページが読み込まれ、2 つのリストボックスが表示されます。1 つは音楽ジャンルで満たされ、もう 1 つは空っぽです。
  • ユーザーが 1 つ (または複数) のジャンルを選択し、「移動」ボタンをクリックすると、ジャンルが最初のリストボックスから 2 番目のリストボックスに移動します。
  • ユーザーが [送信] ボタンをクリックすると、2 番目のリストボックスにあるすべてのジャンルが Web サービスに送信されます。

ページをリロードせずに、「移動」ボタンでリストボックス項目を最初のリストボックスから 2 番目のリストボックスに転送する場合は、それに対処するためにいくつかのクライアント側スクリプト (JavaScript) を作成する必要があります。あなたの質問に対する私の理解が正しければ、これはおそらくあなたが苦労している概念です。

これまでのコードを投稿してください。そこから先に進みます。

于 2013-05-20T02:18:36.943 に答える