CheckBoxListForプラグイン

使い方

http://www.codeproject.com/Tips/613785/How-to-Use-CheckBoxListFor-With-ASP-NET-MVC-4

1. チェックボックスを表すモデルクラスを作る。
2. そのモデルクラスのリスト（配列）を全選択肢のリスト（AvailableFruits）とチェック済みの選択肢のリスト（SelectedFruits）としてViewModelのフィールドに置く。
3. ユーザが選択した選択肢を格納するモデルクラス（PostedFruits）を作る。
4. コントローラーで、PostedFruitsの受け取り処理、DB等からのAvailableFruitsの生成処理、PostedFruitsとAvailableFruitsからSelectedFruitsを確定する処理、を行う。
5. ビューでCheckBoxListFor()を使用する。

使い方の補足

上の使い方のサンプルで出力されるチェックボックスリストのHTML

 <input id="PostedFruits_FruitIds14" name="PostedFruits.FruitIds" type="checkbox" value="1"></input>
 <label for="PostedFruits_FruitIds14">Apple</label>&nbsp;
 <input id="PostedFruits_FruitIds15" name="PostedFruits.FruitIds" type="checkbox" value="2"></input>
 <label for="PostedFruits_FruitIds15">Banana</label>&nbsp;
 <input id="PostedFruits_FruitIds16" name="PostedFruits.FruitIds" type="checkbox" value="3"></input>
 <label for="PostedFruits_FruitIds16">Cherry</label>&nbsp;

CheckBoxListFor()

 @Html.CheckBoxListFor(model => model.PostedFruits.FruitIds,  // (1)
                       model => model.AvailableFruits,        // (2)
                       fruit => fruit.Id,                     // (3)
                       fruit => fruit.Name,                   // (4)
                       model => model.SelectedFruits,         // (5)
                       Position.Horizontal)

• (1) この指定により、INPUTタグのNAME属性が<input name="PostedFruits.FruitsIds">のようになり、Controllerで以下のように配列postedFruitsとして参照できる。

   public ActionResult Index(FruitViewModel vm) { var postedFruits = vm.PostedFruits; }
   public ActionResult Index(PostedFruits postedFruits) {}

• (2) チェックボックスの全ての選択肢
• (3) INPUTタグのVALUE属性
• (4) INPUTタグの隣に表示されるLABELタグの文字
• (5) ユーザが選択した値 （List<Fruit>）
  • なお、PostedFruitsはユーザが選択した値、SeelctedFruitsはユーザが選択した中で全選択肢に含まれる値を表す

コントローラーでユーザ入力値postedFruitsからCheckBoxListFor()へ渡す為の値をセットアップする

 /// <summary>
 /// for setup view model, after post the user selected fruits data
 /// </summary>
 private FruitViewModel GetFruitsModel(PostedFruits postedFruits)
 {
     // setup properties
     var model = new FruitViewModel();
     var selectedFruits = new List<Fruit>();
     var postedFruitIds = new string[0];
     if (postedFruits == null) postedFruits = new PostedFruits();
 
     // if a view model array of posted fruits ids exists
     // and is not empty,save selected ids
     if (postedFruits.FruitIds != null && postedFruits.FruitIds.Any()) {
         postedFruitIds = postedFruits.FruitIds;
     }
 
     // if there are any selected ids saved, create a list of fruits
     if (postedFruitIds.Any()) {
         selectedFruits = FruitRepository.GetAll()
          .Where(x => postedFruitIds.Any(s => x.Id.ToString().Equals(s)))
          .ToList();
     }
 
     //setup a view model
     model.AvailableFruits = FruitRepository.GetAll().ToList();
     model.SelectedFruits = selectedFruits;
     model.PostedFruits = postedFruits;
     return model;
 }

チェックボックスリストをテーブルタグで整形する

http://www.jjask.com/261808/mvc-4-razor-checkboxlistfor-formatting-issue

参考

• Nuget https://www.nuget.org/packages/MvcCheckBoxList
• Project http://mvccbl.com/
• Code Project http://www.codeproject.com/Articles/292050/CheckBoxList-For-a-missing-MVC-extension