Controller Code:
mutliple_cascadingDropdownEntities db = new mutliple_cascadingDropdownEntities();
public ActionResult Index()
{
return View();
}
public JsonResult GetCountryList(string searchTerm)
{
var CounrtyList = db.Countries.ToList();
if (searchTerm != null)
{
CounrtyList = db.Countries.Where(x => x.CountryName.Contains(searchTerm)).ToList();
}
var modifiedData = CounrtyList.Select(x => new
{
id = x.CountryId,
text = x.CountryName
});
return Json(modifiedData, JsonRequestBehavior.AllowGet);
}
public JsonResult GetStateList(string CountryIDs)
{
List<int> CountryIdList = new List<int>();
CountryIdList = CountryIDs.Split(",".ToCharArray(), StringSplitOptions.RemoveEmptyEntries).Select(int.Parse).ToList();
List<State> StateList = new List<State>();
foreach (int countryID in CountryIdList)
{
db.Configuration.ProxyCreationEnabled = false;
var listDataByCountryID = db.States.Where(x => x.CountryId == countryID).ToList();
foreach (var item in listDataByCountryID)
{
StateList.Add(item);
}
}
return Json(StateList, JsonRequestBehavior.AllowGet);
}
Index Code:
<link href="~/Content/css/select2.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/select2.min.js"></script>
<br /><br />
<input type="hidden" class="CountryId"/>
<select class="Country" style="width:500px" multiple>
</select>
<select class="State" style="width:500px;height:30px;border-radius:5px;" >
<option>Select State</option>
</select>
<script>
$(document).ready(function () {
$(".Country").select2({
placeholder: "Counrty",
theme: "classic",
ajax: {
url: "/Home/GetCountryList",
dataType: "json",
data: function (params) {
return {
searchTerm: params.term
};
},
processResults: function (data, params) {
return {
results: data
};
}
}
});
});
$(".Country").on("change", function () {
var CounrtyID = $(this).val();
$(".CountryId").val(CounrtyID);
var textBoxVal = $(".CountryId").val();
$.ajax({
url: "/Home/GetStateList?CountryIDs=" + textBoxVal,
dataType: 'json',
type: 'post',
success: function (data) {
$(".State").empty();
$.each(data, function (index, row) {
$(".State").append("<option value='" + row.StateId + "'>" + row.StateName + "</option>")
});
}
});
});
</script>
Database Code:
create database mutliple_cascadingDropdown
use mutliple_cascadingDropdown
create table Country
(
CountryId int primary key identity,
CountryName nvarchar(100) not null
)
create table State
(
StateId int primary key identity,
StateName nvarchar(100) not null,
CountryId int foreign key references Country(CountryId)
)
Comments
Post a Comment