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<_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>
<style type="text/css">
.modalBackground
{
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
</style>
<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 () {
$("#divProcessing").hide();
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);
}
});
var submit = false;
$("form").on("submit", function (e) {
var modal = $('<div />');
modal.addClass("modalBackground");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
setTimeout(function () {
submit = true;
$(".loading").hide();
$('form').submit();
}, 1000);
if (!submit) {
e.preventDefault();
}
});
});
</script>
</head>
<body>
<div class="loading" align="center">
Loading. Please wait.<br /><br />
<img alt="" src="../../loader.gif" />
</div>
<center>
<%using (Html.BeginForm("Index", "Home", FormMethod.Post))
{ %>
Country : <%:Html.ListBoxFor(m => m.CountryId, Model.Countries, new { @class = "form-control", onchange = "$('form').submit();" })%><br />
State : <%:Html.ListBoxFor(m => m.StateId, Model.States, new { @class = "form-control", onchange = "$('form').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>
</body>
</html>
Screenshot
