2

ユーザーに表示するアイテムのリストがあり、jQuery UI の Selectable インタラクションを利用して 1 つ以上のアイテムを選択できるようにします。選択した値をコントローラーに戻すために、選択したイベントでJavaScriptを介して設定している選択可能な各項目内に非表示の入力フィールドを含めています。これは私がどのようにセットアップしたかの例です

モデル

public class ItemsViewModel
{
     public List<Item> Items { get; set; }
}

public class Item 
{
     public int Id { get; set; }
     public string Name { get; set; }
     public bool Selected { get; set; }
}

HTML

<ul id="Items">
     <li>
          <label>Item 1</label>
          <input type="hidden" id="Items[0]_Id" name="Id" value="1" />
          <input type="hidden" id="Items[0]_Selected" name="Items[0].Selected" class="is-selected" value="False" />
     </li>
     <li>
          <label>Item 2</label>
          <input type="hidden" id="Items[1]_Id" name="Items[1].Id" value="2" />
          <input type="hidden" id="Items[1]_Selected" name="Items[1].Selected" class="is-selected" value="False" />
     </li>
</ul>

JavaScript 

 $('#Items').selectable({
        filter: 'li',
        selected: function (event, ui) {
            $(ui.selected).find('input.is-selected').val('True');
        },
        unselected: function (event, ui) {
            $(ui.unselected).find('input.is-selected').val('False');
        }
    });

私の最初の質問は、これは機能しますが、最も美しい解決策ではありません。選択可能なアイテムを投稿するより良い方法はありますか?

次に、ユーザーがリストから少なくとも 1 つの項目を選択したことを確認する必要があります。ユーザーが少なくとも 1 つのアイテムを選択したことを確認するために、jQuery クライアント側の検証をフックすることは可能ですか? これを実装する方法についていくつかの考えがあり、カスタム検証属性を作成するのに問題はありませんが、何かをまとめる前に、それが既に行われているか、それを行うための最良の方法があるかどうかを尋ねると思いました.

ありがとう

4

1 に答える 1

1

アイテムを投稿するために使用するコードを表示していません。それは私にとって興味深いビットのようです。

隠しフィールドに依存することについては、なぜそうするのかわかりません。選択したイベントにアイテムの配列を入力してから、AJAX POST を実行するときにその配列を送信しないのはなぜですか?

itemsToPost = [];

$('#Items').selectable({ 
    filter: 'li', 
    selected: function (event, ui) {
        itemsToPost.push( {id: ui.attr('id'), name:ui.text()}); 
    }, 
    ...

$.ajax({url     : "/whatever/ASPNETMVC/Endpoint",
        cache   : false,
        type    : "POST", // http method
        dataType: "json",
        data    : itemsToPost,
        error   : function(xhr,status,error){
                ...
        },
        success : function(msg, arg2, xhr){
                ...
        });
于 2011-11-11T16:31:04.727 に答える