Post
Ask Question

How To Bind CheckBoxList In ASP.NET MVC

Background

In this article we will learn how to bind CheckBoxList in ASP.NET MVC used to choose multiple records. So lets start with step by step approach.

Step 1: Create an MVC Application.

Now let us start with a step by step approach from the creation of simple MVC application as in the following:

  1. "Start", then "All Programs" and select "Microsoft Visual Studio 2015".

  2. "File", then "New" and click "Project..." then select "ASP.NET Web Application Template", then provide the Project a name as you wish and click on OK .
Step 2: Add Model class.

Right click on model folder of created MVC application project and add class named CheckBoxModel.cs as:



CheckBoxModel.cs
  1. public class CheckBoxModel    
  2. {    
  3.     public int Value { get; set; }    
  4.     public string Text { get; set; }    
  5.     public bool IsChecked { get; set; }    
  6. }    
  7. public class CheckBoxList    
  8. {    
  9.     public List<CheckBoxModel> CheckBoxItems { get; set; }    
  10. }
Step 3: Add Controller.

Right click on Controllers folder of created MVC application and add Controller named HomeController.cs as:



HomeController.cs
  1. public class HomeController : Controller    
  2. {    
  3.     // GET: Home    
  4.     public ActionResult Index()    
  5.     {    
  6.         //Creating object of CheckBoxList model class    
  7.         CheckBoxList ChkItems = new CheckBoxList();    
  8.         //Additng items to the list    
  9.         List<CheckBoxModel> ChkItem = new List<CheckBoxModel>()    
  10.         {    
  11.           new CheckBoxModel {Value=1,Text="ASP.NET",IsChecked=true },    
  12.           new CheckBoxModel {Value=1,Text="C#",IsChecked=false },    
  13.           new CheckBoxModel {Value=1,Text="MVC",IsChecked=false },    
  14.           new CheckBoxModel {Value=1,Text="Web API" ,IsChecked=false},    
  15.           new CheckBoxModel {Value=1,Text="SignalR",IsChecked=false },    
  16.           new CheckBoxModel {Value=1,Text="SQL" ,IsChecked=false},    
  17.         };    
  18.         //assigning records to the CheckBoxItems list     
  19.         ChkItems.CheckBoxItems = ChkItem;    
  20.         return View(ChkItems);    
  21.            
  22.     }    
  23.   
  24. } 
Step 4: Add View

Right click on Views folder of created MVC application project and add empty View name Index.cshtml as:



Now open the Index.cshtml view and write the following code into the view
  1. @model BindCheckBoxListInMVC.Models.CheckBoxList  
  2. @{  
  3.     ViewBag.Title = "www.compilemode.com";  
  4. }  
  5. <div class="form-horizontal">  
  6.     <h4>Select your favourite Subjects</h4>  
  7.         @foreach (var item in Model.CheckBoxItems)  
  8.         {  
  9.             <input id="chk@(item.Value)"  
  10.                    type="checkbox"  
  11.                    value="@item.Value"   
  12.                    checked="@item.IsChecked" />  
  13.                 @item.Text <br />  
  14.         }  
  15.          
  16. </div> 
Now everything is ready, run the application, then the CheckBoxList will look like the following output:



From all the above examples we learned how to bind CheckBoxList in ASP.NET MVC.

Note
  • Do proper validation such as date input values while implementing.
  • Download the Zip file of the sample application for a better understanding
Summary

I hope this article is useful for all readers, if you have a suggestion, then please contact me.


Similar Articles