In this article I will explain with an example, how to populate cascading i.e. dependent ListBox using Entity Framework in ASP.Net Core MVC.
The cascading i.e. dependent ListBox will be populated from database by making use of Entity Framework in ASP.Net Core MVC.
 
 
Database
I have made use of the following three tables Countries, States and Cities with the schema as follow.
Countries Table
Cascading (Dependent) ListBox using Entity Framework in ASP.Net Core MVC
 
States Table
Cascading (Dependent) ListBox using Entity Framework in ASP.Net Core MVC
 
Cities Table
Cascading (Dependent) ListBox using Entity Framework in ASP.Net Core MVC
 
Note: You can download the database table SQL by clicking the download link below.
          Download SQL file
 
 
Model
The following Model class consists of three Generic List Collection properties of SelectListItem class for holding the Country, State and City records.
The Model class also contains three Integer Array type properties for holding the selected Country, State and City values.
Below the class, there are three classes Country, State and City which will be used to connect to the database table using Entity Framework.
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; }
}
 
public class Country
{
    public int CountryId { get; set; }
    public string CountryName { get; set; }
}
 
public class State
{
    public int StateId { get; set; }
    public string StateName { get; set; }
    public int CountryId { get; set; }
}
 
public class City
{
    public int CityId { get; set; }
    public string CityName { get; set; }
    public int StateId { get; set; }
}
 
 
Database Context
Once the Entity Framework is configured and connected to the database table, the Database Context will look as shown below.
Note: For beginners in ASP.Net Core and Entity Framework, please refer my article ASP.Net Core: Simple Entity Framework Tutorial with example. It covers all the information needed for connecting and configuring Entity Framework with ASP.Net Core.
 
public class DBCtx : DbContext
{
    public DBCtx(DbContextOptions<DBCtx> options) : base(options)
    {
    }
 
    public DbSet<Country> Countries { get; set; }
    public DbSet<State> States { get; set; }
    public DbSet<City> Cities { get; set; }
}
 
 
Controller
The Controller consists of following two Action methods.
Action method for handling GET operation
Inside this Action method, the records from Countries table is fetched using Entity Framework and then a Generic List collection of SelectListItem class objects is generated.
The generated Generic List collection of SelectListItem is assigned to the Countries property of the Model class object which is then returned back 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 ListBoxes.
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 populated using Entity Framework in the Model class object.
When the CountryId and the StateId parameter has values, 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 populated using Entity Framework in the Model class object.
Finally, the Model class object is returned back to the View.
public class HomeController : Controller
{
    private DBCtx Context { get; }
    public HomeController(DBCtx _context)
    {
        this.Context = _context;
    }
 
    public IActionResult Index()
    {
        CascadingModel model = new CascadingModel();
        model.Countries = (from country in this.Context.Countries
                          select new SelectListItem
                          {
                              Value = country.CountryId.ToString(),
                              Text = country.CountryName
                          }).ToList();
        return View(model);
    }
 
    [HttpPost]
    public ActionResult Index(int? countryId, int? stateId, int? cityId)
    {
        CascadingModel model = new CascadingModel();
        model.Countries = (from country in this.Context.Countries
                          select new SelectListItem
                          {
                              Value = country.CountryId.ToString(),
                              Text = country.CountryName
                          }).ToList();
 
        if (countryId.HasValue)
        {
            model.States = (from state in this.Context.States
                           where state.CountryId == countryId
                           select new SelectListItem
                          {
                              Value = state.StateId.ToString(),
                              Text = state.StateName
                          }).ToList();
        }
 
        if (stateId.HasValue)
        {
            model.Cities = (from city in this.Context.Cities
                           where city.StateId == stateId
                           select new SelectListItem
                           {
                               Value = city.CityId.ToString(),
                               Text = city.CityName
                           }).ToList();
        }
 
        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 following ASP.Net Tag Helpers attributes.
asp-action – Name of the Action. In this case the name is Index.
Asp-controller – Name of the Controller. In this case the name is Home.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The HTML Form consists of three ListBox elements (SELECT) for Country, State and City and a Submit Button.
The Model properties have been assigned to the ListBoxes using the asp-items Tag Helpers attribute.
The Country and State ListBox have been assigned a JavaScript OnChange event handler. When any value is selected in Country or State ListBoxes then the Form will be submitted in order to call the Action method.
 
Displaying Selected Texts
Inside the jQuery document ready event handler, the Button has been assigned with a Click event handler.
Finally, when the Button is clicked all the three ListBoxes selected Texts are displayed using JavaScript Alert Message Box.
@model Cascading_ListBox_MVC_Core.Models.CascadingModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <form method="post" asp-controller="Home" asp-action="Index">
        <table>
            <tr>
                <td>Country:</td>
                <td>
                    <select id="ddlCountries" name="CountryId" asp-for="CountryId" asp-items="Model.Countries"
                            multiple="multiple" onchange="document.forms[0].submit();">
                   </select>
                </td>
            </tr>
            <tr>
                <td>State:</td>
                <td>
                    <select id="ddlStates" name="StateId" asp-for="StateId" asp-items="Model.States"
                            multiple="multiple" onchange="document.forms[0].submit();">
                    </select>
                </td>
            </tr>
            <tr>
                <td>City:</td>
                <td>
                    <select id="ddlCities" name="CityId" asp-for="CityId" asp-items="Model.Cities"
                            multiple="multiple">
                    </select>
                </td>
            </tr>
        </table>
        <br/>
        <input id="btnSubmit" type="submit" value="Submit" />
    </form>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnSubmit").on("click", function () {
                var message = "Country: " + $("#ddlCountries option:selected").text();
                message += "\nState: " + $("#ddlStates option:selected").text();
                message += "\nCity: " + $("#ddlCities option:selected").text();
                alert(message);
            });
        });
    </script>
</body>
</html>
 
 
Screenshot
Cascading (Dependent) ListBox using Entity Framework in ASP.Net Core MVC
 
 
Downloads
Download Code