Wednesday, 30 August 2017

mvc checkboxlist example


Using the ckeckboxlist to display the records. It is having the items in the form of list box and having the checkbox in list.

It will be appear as like below. Here  I have implemented the checkbox list which will dynamically binding based on dropdown. mvc checkboxlist example
Its like cascaded checkboxlist, mvc checkboxlist multiselectlist.                       

1.       Take the reference of checkboxlist from nugget package as like below.  Search as MVCCheckboxlist as  given below and install this nugget package.



2.       Create the classes which will help to bind it to the dropdown  and  checkboxlist.

  public class EmployeeDetailModel
    {
        public int EmpID { get; set; }
        public int EmpName { get; set; }
        public string Dist { get; set; }
        public List<District> DistList { get; set; }
        public string City { get; set; }
        public List<City> CityList { get; set; }
        public List<City> SelectedCityList { get; set; }


    }

    public class District
    {
        public int DistrictID { get; set; }
        public string DistrictName { get; set; }
    }

    public class City
    {
        public int CityID { get; set; }
        public int DistrictID { get; set; }
        public string CityName { get; set; }
    }

3.       Create the collection of district and City where District will bind to the dropdown and   City will bind to the list.

List<District> disct;
        List<City> lstCity;
        public HomeController()
        {
            disct = new List<District> {
                new District { DistrictID = 1, DistrictName = "Bilaspur" },
                new District { DistrictID = 2, DistrictName = "Korba" },
                new District { DistrictID = 3, DistrictName = "Durg" }
            };

            lstCity =  new List<City> {
                new City { CityID = 1, DistrictID=1, CityName = "Masturi" },
                new City { CityID = 2,  DistrictID=1, CityName = "Masturi1" },
                new City { CityID = 3,  DistrictID=1,CityName = "Masturi2" },
                new City { CityID = 4,  DistrictID=2,CityName = "Masturi3" },
                new City { CityID = 5,  DistrictID=2,CityName = "Masturi4" },
                new City { CityID = 6,  DistrictID=2, CityName= "Masturi5" },
                new City { CityID = 7,  DistrictID=2,CityName = "Masturi6" },
                new City { CityID = 8,  DistrictID=2,CityName = "Masturi7" },
                new City { CityID = 9,  DistrictID=4,CityName = "Masturi8" },
                new City { CityID = 10,  DistrictID=4,CityName = "Masturi9" },
                new City { CityID = 11,  DistrictID=4,CityName = "Masturi10" },
                new City { CityID = 12,  DistrictID=4,CityName = "Masturi11" },
                new City { CityID = 13,  DistrictID=4,CityName = "Masturi12" },

            };
        }


4.       User Interface for application which consist of textboxfor, Dropdown and  Checkboxlistfor.( mvc checkboxlist multiselectlist.)

@using MvcCheckBoxList
@model WebApplication1.Controllers.EmployeeDetailModel
@{
    ViewBag.Title = "About";
}
<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>

<p>Employee Detail</p>

<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <label for="exampleInputPassword1">Emp Name</label>
            @Html.TextBoxFor(m => m.EmpName);
        </div>
    </div>
    <div class="col-md-4">
        <label for="exampleInputPassword1">Dist</label>
        @Html.DropDownListFor(m => m.Dist, new SelectList(Model.DistList, "DistrictID", "DistrictName"));
    </div>
    <div class="col-md-4">
        <label for="exampleInputPassword1">City</label>
        <div style="height: 100px; overflow-y:auto;border: 1px solid lightgrey;padding:4px 4px 4px 2px;" id="chkCityList">
            @Html.CheckBoxListFor(m => m.SelectedCityList, m => m.CityList, e => e.CityID, e => e.CityName, m => m.SelectedCityList, MvcCheckBoxList.Model.Position.Vertical);
        </div>

    </div>
</div>

5.       Defining the controller for  View and pass the model to bind the dropdown and checkboxlistfor.

public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            EmployeeDetailModel oEmployee = new Controllers.EmployeeDetailModel();


            oEmployee.DistList = disct;

            oEmployee.CityList = lstCity;

            return View(oEmployee);
        }

6.       Binding the checkboxlistfor based  selection of dropdown  list it will behave cascaded dropdown with list.

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $('#Dist').change(function () {
            debugger;
            var city = "";
            $.ajax({
                type: "post",
                url: "/Home/GetCity",
                data: { DistID: $('#Dist').val() },
                datatype: "json",
                traditional: true,
                success: function (data) {
                    for (var i = 0; i < data.length; i++)
                    {
                        city = city + "<input id='SelectedCityList" + i + "' name='SelectedCityList' type='checkbox' value='" + data[i].CityID + "'><label for='SelectedCityList0'>" + data[i].CityName + " </label><br />"
                    }
                    $('#chkCityList').html(city);
                }
            });
        });
    });
</script>



Now while selecting Bilaspur you can see it will bind only three records.

No comments:

Post a Comment

Others

You will like to read it