• home
  • Email: trainings@synapseindia.careers

Blogs

back

Adding CheckBoxList in ASP.NET MVC

Jul 14, 2016

ASP.NET MVC provides the concept of Model , View and Controller. Razor engine makes the working with views easier. Using HTML helpers e.g. CheckBox and CheckBoxFor adds checkbox () to the web page. In this example we are adding CheckBoxList with the great combination of Model , View and controller. See the below code for Model containing CheckModel.cs file which further containing three properties :

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
  
namespace MvcCheckbox.Models  
{  
    public class CheckModel   
    {  
        public int Id   
        {  
            get;  
            set;  
        }  
        public string Name   
        {  
            get;  
            set;  
        }  
        public bool Checked   
        {  
            get;  
            set;  
        }  
    }  
}  
After making our model class ready , let us make the controller ready with two action methods with same name. One action method is decorated with Attribute [HttpGet] to be invoked at get request and second method is decorated with [HttpPost] to be invoked at post request. Action method for post is setting the data into properties of CheckModel and storing into List of CheckModel type. After adding the CheckModel instances into List , it's instance is passed into view, See the below code for same Now let's create a list of Checkmodels in the Index Action Method and pass it to the view.
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
using MvcCheckbox.Models;  
  
namespace MvcCheckbox.Controllers  
{  
    public class HomeController : Controller  
    {  
  
        [HttpGet]  
        public ActionResult Index()  
        {  
            var list = new List  
            {  
                 new CheckModel{Id = 1, Name = "Aquafina", Checked = false},  
                 new CheckModel{Id = 2, Name = "Mulshi Springs", Checked = false},  
                 new CheckModel{Id = 3, Name = "Alfa Blue", Checked = false},  
                 new CheckModel{Id = 4, Name = "Atlas Premium", Checked = false},  
                 new CheckModel{Id = 5, Name = "Bailley", Checked = false},  
                 new CheckModel{Id = 6, Name = "Bisleri", Checked = false},  
                 new CheckModel{Id = 7, Name = "Himalayan", Checked = false},  
                 new CheckModel{Id = 8, Name = "Cool Valley", Checked = false},  
                 new CheckModel{Id = 9, Name = "Dew Drops", Checked = false},  
                 new CheckModel{Id = 10, Name = "Dislaren", Checked = false},  
                  
            };  
            return View(list);  
        }  
  
        [HttpPost]  
        public ActionResult Index(List list)  
        {  
            return View(list);  
        }  
  
    }  
} 
Below is the code for the View displaying all checkboxes accordingly with the help of HTML helper methods. see the code below:
@model List<MvcCheckbox.Models.CheckModel>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>

@using (Html.BeginForm())
{
for (var i = 0; i < Model.Count(); i++)
{
<table>
<tr>
<td>
@Html.HiddenFor(it => it[i].Id)
@Html.DisplayFor(it => it[i].Name)
</td>
<td>
@Html.CheckBoxFor(it => it[i].Checked,new {Style ="vertical-align:3px}"})
</td>
</tr>
</table>

}

<input id="Submit1" type="submit" value="submit" />

}