Bind Html CheckBoxListFor And Get Checked Values In ASP.NET MVC Controller

Introduction

In this article we will learn how to bind Html CheckBoxListFor and get checked values in ASP.NET Html CheckBoxListFor and get checked values in ASP.NET MVC Controller. So lets start with step by step approach.

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" and provide the Project a name as you wish and click on OK .

Add Model class

Right click on model folder of created MVC application project and add class named CityModel.cs or as you wish.

addnewitem

Now write the following code into the CityModel.cs class:

CityModel.cs:

  1. public class CityModel  
  2. {  
  3.     //Value of checkbox   
  4.     public int Value  
  5.     {  
  6.         get;  
  7.         set;  
  8.     }  
  9.     //description of checkbox   
  10.     public string Text  
  11.     {  
  12.         get;  
  13.         set;  
  14.     }  
  15.     //whether the checkbox is selected or not   
  16.     public bool IsChecked  
  17.     {  
  18.         get;  
  19.         set;  
  20.     }  
  21. }  
  22. public class CityList  
  23. {  
  24.     //use CheckBoxModel class as list   
  25.     public List < CityModel > Cities  
  26.     {  
  27.         get;  
  28.         set;  
  29.     }  
  30. }  
Add Controller

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

mvc controller empty

Now create the generic list and add the records instead of going to database, however you can bind html checkboxlistfor-and get checked values in ASP.NET generic list from database but for example we added hard coded records.

HomeController.cs
  1. public class HomeController: Controller  
  2. {  
  3.     // GET: Home   
  4.     public ActionResult Index()  
  5.         {  
  6.             //Add Records into generic list   
  7.             List < CityModel > obj = new List < CityModel > ()  
  8.             {  
  9.                 new CityModel  
  10.                 {  
  11.                     Text = "Latur", Value = 1, IsChecked = false  
  12.                 },  
  13.                 new CityModel  
  14.                 {  
  15.                     Text = "Mumbai", Value = 2, IsChecked = true  
  16.                 },  
  17.                 new CityModel  
  18.                 {  
  19.                     Text = "Pune", Value = 2, IsChecked = false  
  20.                 },  
  21.                 new CityModel  
  22.                 {  
  23.                     Text = "Noida", Value = 2, IsChecked = false  
  24.                 },  
  25.             };  
  26.             CityList objBind = new CityList();  
  27.             objobjBind.Cities = obj;  
  28.             return View(objBind);  
  29.         }  
  30.         //Post and get checkbox checked records   
  31.         [HttpPost]  
  32.     public ActionResult Index(CityList Obj)  
  33.     {  
  34.         StringBuilder sb = new StringBuilder();  
  35.         foreach(var item in Obj.Cities)  
  36.             {  
  37.                 if(item.IsChecked)  
  38.                 {  
  39.                     //append each checked records into StringBuilder   
  40.                     sb.Append(item.Text + ",");  
  41.                 }  
  42.             }  
  43.             //store location into viewbag   
  44.         ViewBag.Loc = "Your preferred work locations are " + sb.ToString();  
  45.         //return location view to display checked records using viewbag   
  46.         return View("Locations");  
  47.     }  
  48.     public ActionResult Locations()  
  49.     {  
  50.         return View();  
  51.     }  
  52. }  
Add View

Right click on Views folder of created MVC application project and add empty view named Index.cshtml as

add view

Now open the Index.cshtml view and write the following code into the view: 
  1. @  
  2. model BindStronglyTypedCheckBox.Models.CityList@  
  3. {  
  4.     ViewBag.Title = "www.compilemode.com";  
  5. }  
  6.  < div class = "form-horizontal" >< h4 > Select Preferred work location < /h4> @  
  7. using(Html.BeginForm())  
  8. {  
  9.     for(int i = 0; i < Model.Cities.Count; i++)  
  10.     {@  
  11.         Html.CheckBoxFor(m => Model.Cities[i].IsChecked)@ Model.Cities[i].Text@ Html.HiddenFor(m => Model.Cities[i].Value)@ Html.HiddenFor(m => Model.Cities[i].Text) < br / >  
  12.     }  
  13.  < div class = "col-md-offset-2 col-md-10" >< input type = "submit"  
  14.     value = "Save"  
  15.     class = "btn btn-default" / >< /div> @  
  16.     ViewBag.Loc  
  17. }  
  18.  < /div>  
Now everything is ready, run the application then the check box list will look like the following screenshot:

compilemode

Now select Pune and Noida then the output will be as follows:

pune,noida

Now select Latur and Mumbai:

latur mumbai

From all the above examples we have learned how to get check box values in ASP.NET MVC Controller.

Note: 
  • Do proper validation such as date input values when implementing.
  • Download the Zip file of the sample application for a better understanding.
  • In this example CheckBoxList bound using generic list however you can also bind html Checkboxlistfor and get checked values in ASP.NET using database.

Summary:

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

Up Next
    Ebook Download
    View all
    Learn
    View all