In this article I will explain with an example, how to populate cascading i.e. dependent ListBox using Entity Framework in ASP.Net MVC Razor.
The cascading i.e. dependent ListBox will be populated from database by making use of Entity Framework in ASP.Net MVC Razor.
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 MVC]()
States Table
![Cascading (Dependent) ListBox using Entity Framework in ASP.Net MVC]()
Cities Table
![Cascading (Dependent) ListBox using Entity Framework in ASP.Net MVC]()
Note: You can download the database table SQL by clicking the download link below.
Entity Framework Model
Once the Entity Framework is configured and connected to the database table, the Model will look as shown below.
![Cascading (Dependent) ListBox using Entity Framework 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 ListBox) 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.
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 following 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 using Entity Framework and 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 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 sent back to the View.
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 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.
The HTML Form consists of three ListBoxes for Country, State and City which are created using ListBoxFor HTML Helper function and a Submit Button.
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, inside the Button Click event handler, all the three ListBoxes selected Texts are displayed using JavaScript Alert Message Box.
@model Cascading_ListBox_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))
{
<table>
<tr>
<td>Country:</td>
<td>@Html.ListBoxFor(m => m.CountryId, Model.Countries, new { onchange = "document.forms[0].submit();" })</td>
</tr>
<tr>
<td>State:</td>
<td>@Html.ListBoxFor(m => m.StateId, Model.States, new { onchange = "document.forms[0].submit();" })</td>
</tr>
<tr>
<td>City:</td>
<td>@Html.ListBoxFor(m => m.CityId, Model.Cities)</td>
</tr>
</table>
<br />
<input id="btnSubmit" type="submit" value="Submit" />
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSubmit").on("click", function () {
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) ListBox using Entity Framework in ASP.Net MVC]()
Downloads
