CheckboxList in MVC

How to create CheckBoxList in MVC ?

You can create checkboxlist in MVC by using the Editor templates

Steps for creating checkboxlist

• Add class to modal folder in your project (MultiCheckListBox)
• Add Folder (EditorTemplates) to Views -> Shared as shown

(MultiCheckListBox) class should Look like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ExportToExcel.Models
{
    public class MultiCheckListBox
    {
        public string ID { get; set; }
        public string DisplayLabel { get; set; }
        public bool Checked { get; set; }
        public string checkboxOnClick { get; set; }  // for javascript Event
    }

    public class CheckListViewModal
    {
        public List<MultiCheckListBox> Cities { get; set; }
    }
}

Add Partial View to EditorTemplates folder. 
The view name should be same as a class name.
as shown in screen shot



The Partial view (MultiCheckListBox) should look Like this.

@model ExportToExcel.Models.MultiCheckListBox
<tr>
    <td>
        @Html.HiddenFor(x => x.ID)
        @Html.LabelFor(x => x.DisplayLabel, htmlAttributes: new { @style = "display:none;" })
        @Html.CheckBoxFor(x => x.Checked, htmlAttributes: new { onclick = Model.checkboxOnClick })
    </td>
    <td>
        @Html.LabelFor(x => x.Checked, Model.DisplayLabel)
    </td>
</tr>

Add controller(CheckBoxExample)  to controllers folder 

it should look like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ExportToExcel.Models;

namespace ExportToExcel.Controllers
{
    public class CheckBoxExampleController : Controller
    {
        // GET: CheckBoxExample
        public ActionResult CheckBoxExp()
        {
            var modal = new CheckListViewModal();
            List<MultiCheckListBox> citylst = new List<MultiCheckListBox>();
            for (int i = 1; i <= 20; i++ )
                citylst.Add(new MultiCheckListBox() { ID = i.ToString(), Checked = false, DisplayLabel = "City "+i.ToString() });
           
            modal.Cities = citylst;
            return View(modal);
        }
        [HttpPost]
        public ActionResult CheckBoxExp(CheckListViewModal modal)
        {
            var selected = modal.Cities.Where(x => x.Checked == true).ToList();
           
            List<MultiCheckListBox> citylst = new List<MultiCheckListBox>();
            for (int i = 1; i <= 20; i++)
                citylst.Add(new MultiCheckListBox() { ID = i.ToString(), 
                    Checked = selected.Where(x => x.ID == i.ToString()).ToList().Count > 0 ? true : false, 
                    DisplayLabel = "City " + i.ToString() });
            modal.Cities = citylst;

            return View(modal);
        }
    }
}

Add view to Action method (CheckBoxExp)

The view (CheckBoxExp) should look like this

@model ExportToExcel.Models.CheckListViewModal

@{
    ViewBag.Title = "CheckBoxExp";
    Layout = "~/Views/Shared/_MyLayout.cshtml";
}

<h2>Check Box List</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    <hr />
    <div class="form-horizontal">   
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            <div class="col-md-offset-2 col-md-4">
                <div class="panel panel-primary">
                    <div class="panel-heading">Select City</div>
                    <div class="panel-body" style="height:200px;overflow:scroll;">
                        <table class="table table-bordered table-condensed">
                            @Html.EditorFor(x => x.Cities)
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-danger" />
            </div>
        </div>
    </div>
}

Now debug your project and see your select checkboxes you can see here in screen shot.