如何在 MVC4 Razor 中使用 CheckBoxList 和 DropdownList

我必须使用 @Html.CheckBoxListFor 或 @Html.DropdownListFor。当我使用列表进行模型绑定时，我对如何在视图中使用这些帮助器类感到困惑。

将列表绑定到 CheckBoxList 和 DropdownList 的正确且最简单的方法是什么。

在模型中：

public class SampleViewModel
    {
        public IEnumerable<Responsible> AvailableResponsibles { get; set; }
        public IEnumerable<Responsible> SelectedResponsibles { get; set; }
        public PostedResponsibles PostedResponsibles { get; set; }
        Responsible objResponsible = new Responsible();
        public SampleViewModel GetResponsiblesInitialModel()
        {
            //setup properties
            var model = new SampleViewModel();
            var selectedResponsibles = new List<Responsible>();

            //setup a view model
            model.AvailableResponsibles = objResponsible.GetAll().ToList();
            model.SelectedResponsibles = selectedResponsibles;
            return model;
        }
    }
public class Responsible
    {
        //Integer value of a checkbox
        public int Id { get; set; }

        //String name of a checkbox
        public string Name { get; set; }

        //Boolean value to select a checkbox
        //on the list
        public bool IsSelected { get; set; }

        //Object of html tags to be applied
        //to checkbox, e.g.:'new{tagName = "tagValue"}'
        public object Tags { get; set; }

        public IEnumerable<Responsible> GetAll()
        {
            return new List<Responsible> {
                              new Responsible {Name = "Apple", Id = 1 },
                              new Responsible {Name = "Banana", Id = 2},
                              new Responsible {Name = "Cherry", Id = 3},
                              new Responsible {Name = "Pineapple", Id = 4},
                              new Responsible {Name = "Grape", Id = 5},
                              new Responsible {Name = "Guava", Id = 6},
                              new Responsible {Name = "Mango", Id = 7}
                            };
        }

    }

    public class PostedResponsibles
    {
        //this array will be used to POST values from the form to the controller
        public string[] ResponsibleIds { get; set; }
    }

视图是：

<tr>
                <td>
                    @Html.LabelFor(model=>model.Responsible)
                </td>
                <td>
                  @Html.CheckBoxListFor(model => model.PostedResponsibles.ResponsibleIds,
                                  model => model.AvailableResponsibles,
                                  Responsible => Responsible.Id,
                                  Responsible => Responsible.Name,
                                  model => model.SelectedResponsibles)

                </td>
            </tr>

目前我正在使用 Nuget 包，但它有点令人困惑且难以使用。建议我使用其他包来实现这一目标。

1. 步骤使用包管理器安装包

   Install-Package MvcCheckBoxList
   

2. Add Fruit.cs

   namespace CheckBoxListForApp.Models
   {
     public class Fruit
     {
         public int Id { get;set;}
         public string Name { get;set; }  
         public bool IsSelected{get;set;}
         public object Tags { get;set;}
     }
   }
   

3. Add FruitViewModel.cs

   using System.Collections.Generic;
   namespace CheckBoxListForApp.Models
   {
     public class FruitViewModel
     {
       public IEnumerable<Fruit> AvailableFruits { get; set; }
       public IEnumerable<Fruit> SelectedFruits { get; set; }
       public PostedFruits PostedFruits { get; set; }
     }
   }
   

4. Add PostedFruits.cs

   namespace CheckBoxListForApp.Models
   {
       /// <summary>
       /// for Helper class to make posting back selected values easier
       /// </summary>
       public class PostedFruits
       {
           //this array will be used to POST values from the form to the controller
           public string[] FruitIds { get; set; }
       }
   }
   

5. Add HomeController.cs

   using System.Collections.Generic;
   using System.Globalization;
   using System.Linq;
   using System.Web.Mvc;
   using CheckBoxListForApp.Models;
   
   namespace CheckBoxListForApp.Controllers
   {
       public class HomeController : Controller
       {
   
           [HttpGet]
           public ActionResult Index()
           {
               return View(GetFruitsInitialModel());
           }
   
   
           [HttpPost]
           public ActionResult Index(PostedFruits postedFruits)
           {
               return View(GetFruitsModel(postedFruits));
           }
   
           private FruitViewModel GetFruitsModel(PostedFruits postedFruits)
           {
   
               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();
               }
   
   
               model.AvailableFruits = FruitRepository.GetAll().ToList();
               model.SelectedFruits = selectedFruits;
               model.PostedFruits = postedFruits;
               return model;
           }
   
           private FruitViewModel GetFruitsInitialModel()
           {
   
               var model = new FruitViewModel();
               var selectedFruits = new List<Fruit>();
   
   
               model.AvailableFruits = FruitRepository.GetAll().ToList();
               model.SelectedFruits = selectedFruits;
               return model;
           }
       }
   }
   

6. Add FruitRepository.cs

   using System.Collections.Generic;
   using System.Linq;
   
   namespace CheckBoxListForApp.Models
   {
       /// <summary>
       /// work as fruit repository
       /// </summary>
       public static class FruitRepository
       {
           /// <summary>
           /// for get fruit for specific id
           /// </summary>
           public static Fruit Get(int id)
           {
               return GetAll().FirstOrDefault(x => x.Id.Equals(id));
           }
   
           /// <summary>
           /// for get all fruits
           /// </summary>
           public static IEnumerable<Fruit> GetAll()
           {
               return new List<Fruit> {
                                 new Fruit {Name = "Apple", Id = 1 },
                                 new Fruit {Name = "Banana", Id = 2},
                                 new Fruit {Name = "Cherry", Id = 3},
                                 new Fruit {Name = "Pineapple", Id = 4},
                                 new Fruit {Name = "Grape", Id = 5},
                                 new Fruit {Name = "Guava", Id = 6},
                                 new Fruit {Name = "Mango", Id = 7}
                               };
           }
       }
   }
   

7. Add 索引.cshtml

   @using MvcCheckBoxList.Model
   @model CheckBoxListForApp.Models.FruitViewModel
   
   @{
       ViewBag.Title = "Home Page";
   }
   
   <section class="checkBoxListFor">
       <p>
           <label>Please Select Fruits:</label>
           @using (Html.BeginForm("Index", "Home", FormMethod.Post))
           {
               @Html.CheckBoxListFor(model => model.PostedFruits.FruitIds,
                                     model => model.AvailableFruits,
                                     fruit => fruit.Id,
                                     fruit => fruit.Name,
                                     model => model.SelectedFruits,
                                     Position.Horizontal)
               <input class="green" type="submit" 
                         value="POST to Controller" />
           }
       </p>
   </section>