Hi onais,
Check this example. Now please take its reference and correct your code.
Refering the below article i have created the example.
Model
public class CascadingModel
{
public CascadingModel()
{
this.Countries = new List<SelectListItem>();
this.States = new List<SelectListItem>();
this.Cities = new List<SelectListItem>();
}
public List<SelectListItem> Countries { get; set; }
public List<SelectListItem> States { get; set; }
public List<SelectListItem> Cities { get; set; }
public int[] CountryId { get; set; }
public int[] StateId { get; set; }
public int[] CityId { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
Cascading_ddlEntities entities = new Cascading_ddlEntities();
CascadingModel model = new CascadingModel();
foreach (var country in entities.Countries)
{
model.Countries.Add(new SelectListItem { Text = country.CountryName, Value = country.CountryId.ToString() });
}
return View(model);
}
[HttpPost]
public ActionResult Index(int? countryId, int? stateId, int? cityId)
{
CascadingModel model = new CascadingModel();
Cascading_ddlEntities entities = new Cascading_ddlEntities();
foreach (var country in entities.Countries)
{
model.Countries.Add(new SelectListItem { Text = country.CountryName, Value = country.CountryId.ToString() });
}
if (countryId.HasValue)
{
var states = (from state in entities.States
where state.CountryId == countryId.Value
select state).ToList();
foreach (var state in states)
{
model.States.Add(new SelectListItem { Text = state.StateName, Value = state.StateId.ToString() });
}
if (stateId.HasValue)
{
var cities = (from city in entities.Cities
where city.StateId == stateId.Value
select city).ToList();
foreach (var city in cities)
{
model.Cities.Add(new SelectListItem { Text = city.CityName, Value = city.CityId.ToString() });
}
}
}
return View(model);
}
}
View
@model Cascading_ListBox_MVC.Models.CascadingModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<center>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
@Html.ListBoxFor(m => m.CountryId, Model.Countries, new { @class = "listbox", onchange = "document.forms[0].submit();" })
<br />
<br />
@Html.ListBoxFor(m => m.StateId, Model.States, new { @class = "listbox", onchange = "document.forms[0].submit();", disabled = "disabled" })
<br />
<br />
@Html.ListBoxFor(m => m.CityId, Model.Cities, new { @class = "listbox", disabled = "disabled" })
<br />
<br />
<input id="btnSubmit" type="submit" value="Submit" />
}
</center>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
if ($("#StateId option").length > 1) {
$("#StateId").removeAttr("disabled");
}
if ($("#CityId option").length > 1) {
$("#CityId").removeAttr("disabled");
}
$('.listbox').multiselect();
$('#btnSubmit').on('click', function () {
if ($("#CountryId").val() != "" && $("#StateId").val() != "" && $("#CityId").val() != "") {
var message = "Country: " + $("#CountryId option:selected").text();
message += "\nState: " + $("#StateId option:selected").text();
message += "\nCity: " + $("#CityId option:selected").text();
alert(message);
}
});
});
</script>
</body>
</html>
Screenshot