ASP.NET MVC：jQuery UIの選択可能なフォームの投稿と検証

Question

私はユーザーに表示する項目のリストを持っており、jQuery UIの選択可能な操作を利用して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'); 
     } 
    }); 

です最も美しい解決策。誰も選択可能なアイテムを投稿するためのよりよい方法を持っていますか？

第2に、ユーザーがリストから少なくとも1つのアイテムを選択したことを確認する必要があります。ユーザーが少なくとも1つの項目を選択したことを確認するために、jQueryクライアント側の検証を行うことは可能ですか？私はこれを実装する方法についていくつかの考えを持っていますが、カスタム検証属性を作成するのに問題はありませんが、何かを一緒に投げ出す前に、すでに完了しているかどうか、

おかげ

Answer 1

Youuあなたがアイテムを投稿するために使用するコードを示していません。それは私にとっては興味深いものです。

隠されたフィールドに頼っているとして、私はあなたがそれをやる理由を知らない。 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){ 
       ... 
     });