MENU

How To Bind CheckBoxList In MVC From Model Class

Filed Under: , , , on
In this article we will learn how to bind a check box list in MVC from a model class . So let's start with step by step.

Step 1 : Create an ASP.MVC Application.


Now let us start with a step-by-step approach from the creation of a simple MVC application as in the following:
  1. "Start", then "All Programs" and select "Microsoft Visual Studio".
  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 the model folder of the created MVC application project and add  class named CheckBoxModel.cs

CheckBoxModel.cs
public class CheckBoxModel
    {
        public int Value { get; set; }
        public string Text { get; set; }
        public bool IsChecked { get; set; }
    }
    public class CheckBoxList
    {
        public List<CheckBoxModel> CheckBoxItems { get; set; }
    }

Step 3 : Add Controller

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

 HomeController.cs
public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            //Creating object of CheckBoxList model class
            CheckBoxList ChkItems = new CheckBoxList();
            //Additng items to the list
            List<CheckBoxModel> ChkItem = new List<CheckBoxModel>()
            {
              new CheckBoxModel {Value=1,Text="ASP.NET",IsChecked=true },
              new CheckBoxModel {Value=1,Text="C#",IsChecked=false },
              new CheckBoxModel {Value=1,Text="MVC",IsChecked=false },
              new CheckBoxModel {Value=1,Text="Web API" ,IsChecked=false},
              new CheckBoxModel {Value=1,Text="SignalR",IsChecked=false },
              new CheckBoxModel {Value=1,Text="SQL" ,IsChecked=false},
            };
            //assigning records to the CheckBoxItems list 
            ChkItems.CheckBoxItems = ChkItem;
            return View(ChkItems);
           
        }

    }

 Step 4: Add View

Right click on the View folder of the created MVC application project and add an empty view named Index.cshtml. Now open the Index.cshtml view and write the following code into the view.
@model BindCheckBoxListInMVC.Models.CheckBoxList
@{
    ViewBag.Title = "www.compilemode.com";
}
<div class="form-horizontal">
    <h4>Select your favourite Subjects</h4>
        @foreach (var item in Model.CheckBoxItems)
        {
            <input id="chk@(item.Value)"
                   type="checkbox"
                   value="@item.Value" 
                   checked="@item.IsChecked" />
                @item.Text <br />
        }
       
</div>
Now everything is ready ,run the application then the check box list will be look like as follows.

From all the above examples, we have learned how to bind a CheckBoxList in ASP.NET MVC from a Model Class.

Note
  • Do a proper validation such as date input values when implementing.
Summary

I hope this article is useful for all readers. If you have a suggestion, then please contact me. To learn ASP.NET MVC step-by-step, please refer to the following articles:

Post a Comment

www.CodeNirvana.in

Protected by Copyscape
Copyright © Compilemode