Hi nauna,
Check this example. Now please take its reference and correct your code.
Refering the below article i have created the example.
Database
For this example i have used Countries, State and City tables.
You can download the database table SQL by clicking the download link below.
Download SQL file
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
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<_779288_Cascading_ListBox_MVC.Models.CascadingModel>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.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>
<script type="text/javascript">
$(function () {
if ($("#StateId option").length > 1) {
$("#StateId").removeAttr("disabled");
}
if ($("#CityId option").length > 1) {
$("#CityId").removeAttr("disabled");
}
$('#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>
</head>
<body>
<div>
<center>
<%using (Html.BeginForm("Index", "Home", FormMethod.Post)) { %>
Country : <%:Html.ListBoxFor(m => m.CountryId, Model.Countries, new { @class = "form-control", onchange = "document.forms[0].submit();" })%><br />
State : <%:Html.ListBoxFor(m => m.StateId, Model.States, new { @class = "form-control", onchange = "document.forms[0].submit();", disabled = "disabled" })%><br />
City : <%:Html.ListBoxFor(m => m.CityId, Model.Cities, new { @class = "form-control", disabled = "disabled" })%><br />
<input id="btnSubmit" type="submit" value="Submit" class="btn btn-primary" />
<% }%>
</center>
</div>
</body>
</html>
Screenshot
