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