In this article I will explain with an example, how to populate Cascading i.e. Dependent Country, State and City DropDownLists without using jQuery in ASP.Net MVC Razor.
The Cascading i.e. Dependent Country, State and City DropDownLists will be populated from database by making use of Entity Framework in ASP.Net MVC Razor.
Database
Three tables Countries, State and City are created with the following schema.
Countries Table
![Implement Cascading (Dependent) DropDownLists without jQuery in ASP.Net MVC]()
States Table
![Implement Cascading (Dependent) DropDownLists without jQuery in ASP.Net MVC]()
Cities Table
![Implement Cascading (Dependent) DropDownLists without jQuery in ASP.Net MVC]()
Note: You can download the database table SQL by clicking the download link below.
Creating an Entity Data Model
Following is the Entity Data Models of the three Tables i.e. Countries, States and Cities which will be used later in this project.
![Implement Cascading (Dependent) DropDownLists without jQuery in ASP.Net MVC]()
Model
The following Model class consists of three Generic List Collection properties of SelectListItem class (which is an in-built ASP.Net MVC class and has all the properties needed for populating a DropDownList) for holding the Country, State and City records.
The Model class also contains three Integer type properties for holding the selected Country, State and City values.
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
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, the list of all Countries is fetched from the Entity Data Model and the same is returned to the View.
Action method for handling POST operation
This Action method handles the call made from the POST function from the View and is executed in two cases.
1. When an option is selected from the Country and State DropDownLists.
2. When the Submit button is clicked.
When the Form is submitted, the posted values are captured in three variables one for each i.e. Country, State and City.
When only the CountryId parameter has value, the list of all Countries and list of all States for the selected Country are sent back to the View.
When the CountryId and the StateId parameter has value, the list of all Countries, the list of all States for the selected Country and the list of all Cities for the selected State are sent back to the View.
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
Inside the View, in the very first line the CascadingModel class is declared as Model for the View.
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
Inside the Form, the Country, State and City DropDownLists are populated using DropDownListFor HTML Helper function.
The Country and State DropDownList have been assigned a JavaScript OnChange event handler, so that when any value is selected in Country or State DropDownLists then the Form will be submitted in order to call the Action method.
Inside the jQuery document ready event handler, if all the three DropDownLists are populated then the selected values are displayed using JavaScript Alert Message Box.
@model Cascading_DropDownList_Entity_MVC.Models.CascadingModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
@Html.DropDownListFor(m => m.CountryId, Model.Countries, "Please select", new { onchange = "document.forms[0].submit();" })
<br/>
<br/>
@Html.DropDownListFor(m => m.StateId, Model.States, "Please select", new { onchange = "document.forms[0].submit();", disabled = "disabled" })
<br/>
<br/>
@Html.DropDownListFor(m => m.CityId, Model.Cities, "Please select", new { disabled = "disabled" })
<br/>
<br/>
<input type="submit" value="Submit"/>
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {
if ($("#StateId option").length > 1) {
$("#StateId").removeAttr("disabled");
}
if ($("#CityId option").length > 1) {
$("#CityId").removeAttr("disabled");
}
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
![Implement Cascading (Dependent) DropDownLists without jQuery in ASP.Net MVC]()
Downloads
