How to use CheckBoxList and DropdownList in MVC4 Razor

Question

I have to use @Html.CheckBoxListFor<> or @Html.DropdownListFor<>.I am confused about how to use these helper class in View whild I am using List for Model Binding.

What is the Right and Easiest way to Bind List into CheckBoxList and DropdownList.

In Model:

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; }
    }

And View Is:

<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>

Currently I am using Nuget Packege but it is little bit confusing and hard to use.Suggest me any other to achieve this one.

Answer 1

It depend on your UI requirement. if you need a drop down list then use that.

CheckBoxList is not out of the box helper, it is a custom helper.

You can find more details of the helper (CheckBoxList) from here Code Project

Regarding Drop down please refer to MSDN. It can be overloaded in multiple ways.

Here are the available ASP.NET MVC helpers

Answer 2

1. Step Install package using package manager

   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 Index.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>