---
title: "CheckBoxList Example in ASP.NET MVC 4"  
description: "Hi everyone in this article I’m explaining about checkboxlist in asp.net mvc."  
author: "Anonymous User"  
published: 2015-01-28  
updated: 2020-07-18  
canonical: https://www.mindstick.com/articles/1562/checkboxlist-example-in-asp-dot-net-mvc-4  
category: "asp.net"  
tags: ["asp.net mvc", "mvc4"]  
reading_time: 13 minutes  

---

# CheckBoxList Example in ASP.NET MVC 4

Hi everyone in this article I’m explaining about checkboxlist in [asp.net MVC](https://www.mindstick.com/articles/1571/start-with-asp-dot-net-mvc-4).

##### Description:

When we use MVC in ASP.Net, we are not using server-side webform controls. We always use @[Html helper](https://www.mindstick.com/forum/155772/how-we-create-custom-html-helper-in-asp-dot-net-mvc) controls or simple HTML controls, for example <input type="textbox" Id="txtName"/>.\
Since this question always arises, how to create a Checkboxlist in MVC. We can build this in [ASP.Net webforms](https://www.mindstick.com/forum/155702/difference-between-asp-dot-net-webforms-and-asp-dot-net-mvc) very easily using built-in server controls. But how to do this in MVC.

So in this article, I explain how to create a checkboxlist in MVC.\
\
Please follow these steps:

##### Step 1:

Open [visual studio](https://www.mindstick.com/articles/12378/visual-studio-for-mac-is-out-of-beta-preview-now-officially-available) >> File >> New Project >> ASP.NET MVC 4 [Web Application](https://www.mindstick.com/articles/13069/progressive-web-application-pwas-all-you-need-to-know-about)

![CheckBoxList Example in ASP.NET MVC 4](https://www.mindstick.com/mindstickarticle/dfa6f70e-5bd5-4e6e-a9a0-c57f995e3497/images/98b7120b-e258-42fe-a8f2-70a0e53a668c.png)

Step 2: Give the application name and click ok

Step 3: After do this steps open a window and select empty template and click ok.

![CheckBoxList Example in ASP.NET MVC 4](https://www.mindstick.com/mindstickarticle/dfa6f70e-5bd5-4e6e-a9a0-c57f995e3497/images/f1b4c284-e9ce-4685-9e32-c289904ed197.png)

Step 4: For this application we will create a Model. So right-click on the Model folder then click on "Add" -> "Class".

![CheckBoxList Example in ASP.NET MVC 4](https://www.mindstick.com/mindstickarticle/dfa6f70e-5bd5-4e6e-a9a0-c57f995e3497/images/9eb1b17e-379a-4491-9dc9-1d2e124c2ac8.png)

Here we will create "StudentModel". Now click on the "Add" Button.

![CheckBoxList Example in ASP.NET MVC 4](https://www.mindstick.com/mindstickarticle/dfa6f70e-5bd5-4e6e-a9a0-c57f995e3497/images/9c73c194-6612-4b8c-a484-98a1c71454d7.png)

Now add the following code.

```
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc; namespace CheckBoxListSampleApp.Models{    public class StudentModel    {        public IList<SelectListItem> StudentNames { get; set; }      }}
```

In the code above, I create am "IList<SelectListItem>" type propery. This SelectListItem returns both text and a value that is helpful for lists (like Dropdownlist, Listbox etcetera).\
We will now write the code for a Controller.\
Right-click on the Controller folder then seelct "Add" >> "Controller".

![CheckBoxList Example in ASP.NET MVC 4](https://www.mindstick.com/mindstickarticle/dfa6f70e-5bd5-4e6e-a9a0-c57f995e3497/images/cfde6b4c-0920-4b82-ab01-94c5430f9634.png)

![CheckBoxList Example in ASP.NET MVC 4](https://www.mindstick.com/mindstickarticle/dfa6f70e-5bd5-4e6e-a9a0-c57f995e3497/images/d0f76a32-b1d6-49ac-b5d7-27a78aff086b.png)

Now this is our Empty [MVC Controller](https://www.mindstick.com/forum/12890/how-can-asp-dot-net-mvc-controller-return-an-image), click on the "Add" button. We will now write the code.

```
using CheckBoxListSampleApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace CheckBoxListSampleApp.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Student()
        {
            StudentModel objStudentModel = new StudentModel();

            List<SelectListItem> names = new List<SelectListItem>();
            names.Add(new SelectListItem { Text = "Kamlakar", Value = "1" });
            names.Add(new SelectListItem { Text = "Pawan", Value = "2" });
            names.Add(new SelectListItem { Text = "Rohit", Value = "3" });
            names.Add(new SelectListItem { Text = "Haider", Value = "4" });
            names.Add(new SelectListItem { Text = "Manoj", Value = "5" });
            names.Add(new SelectListItem { Text = "Mayank", Value = "6" });
            objStudentModel.StudentNames = names;

            return View(objStudentModel);
        }
        [HttpPost]
        public ActionResult Studentl(string[] Name)
        {
            return Json(new { success = Name });
        }
    }
}
```

In the code above, I create a new ActionMethod and Student. In this [Action Method](https://www.mindstick.com/forum/155751/define-action-method-in-mvc) , I am returning a model, that has a list of student names.\
\
If you notice in the code above, I use SelectListItem and SelectListItem having the two properties Text and Value, that are helpful for a list like Dropdownlist, Listbox etcetera.\
\
Now add a new view, so right-click and click on "Add View".

![CheckBoxList Example in ASP.NET MVC 4](https://www.mindstick.com/mindstickarticle/dfa6f70e-5bd5-4e6e-a9a0-c57f995e3497/images/83865210-b63c-4755-a119-98ff34ea9e14.png)

Now click on the "Add" button. Now add the following code:

##### Student.cshtml

```
 @model CheckBoxListSampleApp.Models.StudentModel
@{
    ViewBag.Title = "Student";
}
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script>
    $(document).ready(function () {
        $('.chkclass').click(function () {

            var getchkid = $(this).attr('id');
            var isChecked = $('#' + getchkid).is(':checked');

            if ($('#' + getchkid).is(':checked') == true) {
                $('#td' + $(this).val()).css("color", "white");
                $('#td' + $(this).val()).css("background-color", "blue");
            }
            else {
                $('#td' + $(this).val()).css("color", "black");
                $('#td' + $(this).val()).css("background-color", "#f9f9f9");
            }
        });

        $('#bttn_Click').click(function () {

            var studentListVal = null;
            studentListVal = [];

            $('input:checkbox:checked').each(function () {
                studentListVal.push($(this).attr('value'));
            });

            $.ajax({
                type: "post",
                url: "/Home/Studentl",
                data: { Name: studentListVal },
                datatype: "json",
                traditional: true,
                success: function (data) {

                    var selectedIds;
                    for (var i = 0; i < data.success.length; i++) {
                        if (selectedIds != undefined) {
                            selectedIds = selectedIds + " " + data.success[i];
                        }
                        else {
                            selectedIds = data.success[i];
                        }
                    }
                    alert('You have Selected Student Ids- ' + selectedIds);
                }
            });

        });

    });

</script>
<div class="clearfix">&nbsp;</div>
<div class="clearfix">&nbsp;</div>
<div class="clearfix">&nbsp;</div>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-3 well">
            <div id="divStudentlist">
                @foreach (var names in @Model.StudentNames)
                {
                    var checkBoxId = "chk" + names.Value;
                    var tdId = "td" + names.Value;
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <tbody>
                                <tr>
                                    <td class="col-md-3"><input type="checkbox" id="@checkBoxId" class="chkclass" value="@names.Value" /></td>
                                    <td class="col-md-9" id="@tdId">@names.Text</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                }
            </div>
            <div class="clearfix">&nbsp;</div>
            <input type="button" class="btn btn-info" id="bttn_Click" value="Send Checked value to Controller" />
        </div>
    </div>
</div>
```

\

Your view is now created and you are ready to run your CheckboxList Program. So Press F5 and run your code.

## Output:

![CheckBoxList Example in ASP.NET MVC 4](https://www.mindstick.com/mindstickarticle/dfa6f70e-5bd5-4e6e-a9a0-c57f995e3497/images/d8515c72-387e-468a-bf36-d035f5cb085a.png)

## Output:

When [click button](https://www.mindstick.com/forum/34274/how-to-pass-combobox-value-from-windows-form-edirrow-to-windows-form-form1-where-click-button) to send value to controller

![CheckBoxList Example in ASP.NET MVC 4](https://www.mindstick.com/mindstickarticle/dfa6f70e-5bd5-4e6e-a9a0-c57f995e3497/images/86d0d954-7049-482f-8f53-d5138bf05ac8.png)

And [value in controller](https://www.mindstick.com/forum/12693/how-to-use-textbox-and-viewbag-value-in-controller-method)

![CheckBoxList Example in ASP.NET MVC 4](https://www.mindstick.com/mindstickarticle/dfa6f70e-5bd5-4e6e-a9a0-c57f995e3497/images/403afe28-29fb-4425-a2ef-c7eedf599132.png)

You might now wonder how this blue color appears in the background when I check a checkbox and disappears when I uncheck a checkbox. I did this using jQuery. But first you must understand how this checkbox list

is created.

##### Code Description:

```
<div id="divStudentlist">
                @foreach (var names in @Model.StudentNames)
                {
                    var checkBoxId = "chk" + names.Value;
                    var tdId = "td" + names.Value;
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <tbody>
                                <tr>
                                    <td class="col-md-3"><input type="checkbox" id="@checkBoxId" class="chkclass" value="@names.Value" /></td>
                                    <td class="col-md-9" id="@tdId">@names.Text</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                }
            </div>
```

In this code I am using a [foreach loop](https://www.mindstick.com/forum/182/problem-in-getting-the-value-from-array-by-using-foreach-loop), that helps me to take all the StudentNames

\

List from my Model to names , which is a var type.

@foreach (var names in @Model.StudentNames)

Now I will generate my Checkbox Id and <td> id because I want to generate these

\

ids dynamically.

var checkBoxId = "chk" + names.Value;

var tdId = "td" + names.Value;

Now I just create a simple HTML table and use a checkbox and in the table cell (td)

\

I am passing names as a text value.

```
<div class="table-responsive">
                        <table class="table table-bordered table-striped">
                            <tbody>
                                <tr>
                                    <td class="col-md-3"><input type="checkbox" id="@checkBoxId" class="chkclass" value="@names.Value" /></td>
                                    <td class="col-md-9" id="@tdId">@names.Text</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
```

Now, using JQuery , when the user clicks a checkbox, it simply sets its table cell (td)

\

background to blue.

```
<script src="~/Scripts/jquery-1.7.1.min.js"></script>

<script>
    $(document).ready(function () {
        $('.chkclass').click(function () {

            var getchkid = $(this).attr('id');
            var isChecked = $('#' + getchkid).is(':checked');

            if ($('#' + getchkid).is(':checked') == true) {
                $('#td' + $(this).val()).css("color", "white");
                $('#td' + $(this).val()).css("background-color", "blue");
            }
            else {
                $('#td' + $(this).val()).css("color", "black");
                $('#td' + $(this).val()).css("background-color", "#f9f9f9");
            }
        });

    });

</script>
```

Now the question arises, how will you send your selected values to controller,

\

because once you get the values in to controller, you can do anything like save into

\

database. So let’s understand the below code.

\

```
         $('#bttn_Click').click(function () {

            var studentListVal = null;
            studentListVal = [];

            $('input:checkbox:checked').each(function () {
                studentListVal.push($(this).attr('value'));
            });

            $.ajax({
                type: "post",
                url: "/Home/Studentl",
                data: { Name: studentListVal },
                datatype: "json",
                traditional: true,
                success: function (data) {

                    var selectedIds;
                    for (var i = 0; i < data.success.length; i++) {
                        if (selectedIds != undefined) {
                            selectedIds = selectedIds + " " + data.success[i];
                        }
                        else {
                            selectedIds = data.success[i];
                        }
                    }
                    alert('You have Selected Student Ids- ' + selectedIds);
                }
            });

        });
```

\

\

In my next post i'll explain about Use of Bootbox.js in bootstrap framework

---

Original Source: https://www.mindstick.com/articles/1562/checkboxlist-example-in-asp-dot-net-mvc-4

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
