Cascading Dropdown in ASP.NET MVC using AJAX and jQuery with Database

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:

Country
State
City

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

India
USA

If India is selected

State Dropdown

Gujarat
Maharashtra

If Gujarat is selected

City Dropdown

Ahmedabad
Surat

Advantages of AJAX Cascading Dropdown

No page reload
Faster data loading
Better user experience
Efficient database queries

Important Tips for Beginners

Always:

Use AJAX for dynamic dropdowns
Return JSON data from controller
Use jQuery change event
Keep dropdown IDs unique

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.