In this article I will explain with an example, how to implement Cascading (Dependent) DropDownList in ASP.Net MVC Razor.
The Cascading (Dependent) DropDownList will be implemented using Entity Framework in ASP.Net MVC Razor.
Note: For beginners in using Entity Framework with ASP.Net MVC, please refer my article ASP.Net MVC: Simple Entity Framework Tutorial with example.
 
 
Database
Three tables Countries, State and City are created with the following schema.
Countries Table
Cascading (Dependent) DropDownList in ASP.Net MVC
 
States Table
Cascading (Dependent) DropDownList in ASP.Net MVC
 
Cities Table
Cascading (Dependent) DropDownList in ASP.Net MVC
 
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
 
 

Creating an Entity Data Model
The very first step is to create an ASP.Net MVC Application and connect it to the Database using Entity Framework. For more details please refer my article ASP.Net MVC: Simple Entity Framework Tutorial with example.
Following is the Entity Data Models of the three Tables i.e. Countries, States and Cities which will be used later in this project.
Cascading (Dependent) DropDownList 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.
ActionNameName 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
Cascading (Dependent) DropDownList in ASP.Net MVC
 
 
Downloads