articles

CheckBoxList Example in ASP.NET MVC 4

CheckBoxList Example in ASP.NET MVC 4

Anonymous User23528 28-Jan-2015

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"/>.
Since this 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

CheckBoxList Example in ASP.NET MVC 4

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

 

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

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

CheckBoxList Example in ASP.NET MVC 4

 

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

CheckBoxList Example in ASP.NET MVC 4

 

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

CheckBoxList Example in ASP.NET MVC 4

 

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

 

 

Output:

When click button to send value to controller

 

 

 

CheckBoxList Example in ASP.NET MVC 4

 

 

And value in controller

 

CheckBoxList Example in ASP.NET MVC 4

 

 

 

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


Updated 18-Jul-2020
I am a content writter !

Leave Comment

Comments

Liked By