Home > DeveloperSection > Beginner > CheckBoxList Example in ASP.NET MVC 4

CheckBoxList Example in ASP.NET MVC 4


ASP.Net ASP.NET MVC  Mvc4 
Ratings:
0 Comment(s)
 8949  View(s)
Rate this:

CheckBoxList Example in ASP.NET MVC 4

Hi everyone in this article I’m explaining about checkboxlist in asp.net mvc.

Description:

When we use MVC in ASP.Net, we are not using server-side webform controls. We always use @Html helper controls or simple HTML controls, for example <input type="textbox" Id="txtName"/>.

So the question always arises, how to create a Checkboxlist in MVC. We can build this in ASP.Net webforms 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 >> File >> New Project >> ASP.NET MVC 4 Web Application

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.

 

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

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

 

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".

 

Now this is our Empty MVC Controller, 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 , 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".

 

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:

 

 

Output:

When click button to send value to controller

 

 

 

 

 

And value in controller

 

 

 

 

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, 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


Don't want to miss updates? Please click the below button!

Follow MindStick