Introduction
In many web applications, dropdown lists depend on another dropdown selection. This is called a Cascading Dropdown.
Example:
Select Country
Based on the country, show States
Based on the state, show Cities
Instead of reloading the entire page, we can use AJAX with jQuery to load the data dynamically.
Using AJAX, the page updates without refreshing, which improves performance and user experience.
This tutorial explains how to implement cascading dropdowns using AJAX and jQuery in ASP.NET MVC with a database.
Example Scenario
We will create three dropdown lists:
When a Country is selected, the State dropdown updates automatically.
When a State is selected, the City dropdown updates automatically.
Step 1 Create Database Tables
Create three tables in SQL Server.
Country Table
CREATE TABLE Country
(
Id INT PRIMARY KEY IDENTITY,
CountryName VARCHAR(50)
)
State Table
CREATE TABLE State
(
Id INT PRIMARY KEY IDENTITY,
StateName VARCHAR(50),
CountryId INT
)
City Table
CREATE TABLE City
(
Id INT PRIMARY KEY IDENTITY,
CityName VARCHAR(50),
StateId INT
)
Step 2 Create Model
Create models inside the Models folder.
Country Model
public class Country
{
public int Id {get;set;}
public string CountryName {get;set;}
}
State Model
public class State
{
public int Id {get;set;}
public string StateName {get;set;}
public int CountryId {get;set;}
}
City Model
public class City
{
public int Id {get;set;}
public string CityName {get;set;}
public int StateId {get;set;}
}
Step 3 Create Controller
Create a controller called:
LocationController
Load Countries
public ActionResult Index()
{
var countries = db.Countries.ToList();
ViewBag.CountryList = new SelectList(countries,"Id","CountryName");
return View();
}
Step 4 AJAX Method for States
This method returns states based on the selected country.
public JsonResult GetStates(int CountryId)
{
var states = db.States
.Where(s => s.CountryId == CountryId)
.ToList();
return Json(states, JsonRequestBehavior.AllowGet);
}
Step 5 AJAX Method for Cities
public JsonResult GetCities(int StateId)
{
var cities = db.Cities
.Where(c => c.StateId == StateId)
.ToList();
return Json(cities, JsonRequestBehavior.AllowGet);
}
Step 6 Create View
Inside:
Views/Location/Index.cshtml
HTML Dropdowns
<select id="CountryId">
<option value="">Select Country</option>
@foreach(var item in ViewBag.CountryList)
{
<option value="@item.Value">@item.Text</option>
}
</select>
<br/><br/>
<select id="StateId">
<option value="">Select State</option>
</select>
<br/><br/>
<select id="CityId">
<option value="">Select City</option>
</select>
What is this?
Step 7 Add jQuery AJAX
Add jQuery code for cascading dropdowns.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#CountryId").change(function () {
var countryId = $(this).val();
$.ajax({
url: '/Location/GetStates',
type: 'GET',
data: { CountryId: countryId },
success: function (data) {
$("#StateId").empty();
$("#StateId").append('<option>Select State</option>');
$.each(data, function (i, state) {
$("#StateId").append('<option value="' + state.Id + '">' + state.StateName + '</option>');
});
}
});
});
$("#StateId").change(function () {
var stateId = $(this).val();
$.ajax({
url: '/Location/GetCities',
type: 'GET',
data: { StateId: stateId },
success: function (data) {
$("#CityId").empty();
$("#CityId").append('<option>Select City</option>');
$.each(data, function (i, city) {
$("#CityId").append('<option value="' + city.Id + '">' + city.CityName + '</option>');
});
}
});
});
</script>
How the Cascading Dropdown Works
Step-by-step flow:
User selects Country
↓
jQuery change event triggers
↓
AJAX request sent to Controller
↓
Controller returns States in JSON
↓
State dropdown updates automatically
↓
User selects State
↓
AJAX loads Cities
Example Output
Country Dropdown
If India is selected
State Dropdown
If Gujarat is selected
City Dropdown
Advantages of AJAX Cascading Dropdown
Important Tips for Beginners
Always:
Conclusion
Cascading dropdowns are commonly used in real applications such as:
Address forms
E-commerce filters
Registration systems
By combining AJAX, jQuery, and ASP.NET MVC, we can easily create dynamic dropdown lists that update automatically based on user selection.