Cascading Dropdown List In Kendo UI Using ASP.NET MVC And Entity Framework

Introduction

In this article, I’ll describe, how to perform the cascading dropdownlist operation in Kendo UI, using ASP.NET MVC and Entity Framework. The Application is developed, using Entity Framework database first approach and ASP.NET MVC.

Prerequisites - Basic knowledge in ASP.NET MVC, Entity Framework and Kendo UI framework.

Set up the Table - For this article, I have created three tables, whose designs are given below-

Country Table

State Table

City Table

Create New MVC Project

Create a new empty ASP.NET MVC Application as per the following figures. Open Visual Studio ->File ->New project ->ASP.NET Web Application.

Select MVC and click OK.

Please refer to my previous article to check out how to configure Kendo UI in ASP.NET MVC Application.

Generate the Model

Now, we will create Entity Framework models from the database tables.

Step 1 - Right-click the Models folder, select Add -> ADO.NET Entity Data Model or select Add->New Item. In the Add New Item Window, select data in the left pane and ADO.NET Entity Data Model from the center pane. Name the new model file. In my case, I made it as Country_State and click Add.

Step 2 - In the Entity Data Model Wizard, select EF Designer from the database and click Next.

Step 3 - Click the New Connection button. The Connection Properties Window will open.

Step 4 - In the Connection Properties Window, provide the name of the local Server, where the database was created (in this case (DESKTOP-585QGBN)). After providing the Server name, select the Employee from the available databases and click OK.

Step 5 - You can use the default name for the connection to save the Web.Config file and click Next.

Step 6 - Select table to generate models for Country, State and City table and click Finish.

My database schema is shown in the figure, given below-

Create a Controller

Create a new empty Controller. Right-click the Controllers folder and select Add –> New Empty Controller. In my case, I named it as CascadingCountryController.

Write the code, given below, in the Controller-

public class CascadingCountryController : Controller
{
private EmployeeEntities db = new EmployeeEntities();
public ActionResult Index()
{
return View();
}
public JsonResult GetCountryList()
{
return Json(db.tbl_country.Select(x => new { Country_ID = x.Country_ID, Country_Name = x.Country_Name }), JsonRequestBehavior.AllowGet);
}
public JsonResult GetStateList(int? Country)
{
var State = db.tbl_state.AsQueryable();
if (Country>0)
{
State = State.Where(s => s.Country_ID == Country);
return Json(State.Select(s => new { State_ID = s.State_ID, State_Name = s.State_Name }), JsonRequestBehavior.AllowGet);
}
else
return Json(db.tbl_state.Select(s => new { State_ID = s.State_ID, State_Name = s.State_Name }), JsonRequestBehavior.AllowGet);
}
public JsonResult GetCityList(int? State)
{
var City = db.tbl_city.AsQueryable();
if(State>0)
{
City = City.Where(c => c.State_ID == State);
return Json(City.Select(c => new { City_ID = c.City_ID, City_Name = c.City_Name }), JsonRequestBehavior.AllowGet);
}
else
{
return Json(db.tbl_city.Select(c => new { City_ID = c.City_ID, City_Name = c.City_Name }), JsonRequestBehavior.AllowGet);
}
}
}

Creating a View

Right click on View-> CascadingCountry folder and add new empty view. Write the code, given below, in view-

@{
ViewBag.Title = "Index";
}
<h2>Kendo Cascading Dropdownlist</h2>
<div class="demo-section k-content">
<h4>Country:</h4>
@(Html.Kendo().DropDownList()
.Name("Country")
.HtmlAttributes(new { style = "width:100%" })
.OptionLabel("Select country...")
.DataTextField("Country_Name")
.DataValueField("Country_ID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCountryList", "CascadingCountry");
});
})
)
<h4 style="margin-top: 2em;">State:</h4>
@(Html.Kendo().DropDownList()
.Name("State")
.HtmlAttributes(new { style = "width:100%" })
.OptionLabel("Select state...")
.DataTextField("State_Name")
.DataValueField("State_ID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetStateList", "CascadingCountry")
.Data("filterState");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("Country")
)
<script>
function filterState() {
return {
Country: $("#Country").val()
};
}
</script>
<h4 style="margin-top: 2em;">City</h4>
@(Html.Kendo().DropDownList()
.Name("City")
.HtmlAttributes(new { style = "width:100%" })
.OptionLabel("Select city...")
.DataTextField("City_Name")
.DataValueField("City_ID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCityList", "CascadingCountry")
.Data("filterCity");
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("State")
)
<script>
function filterCity() {
return {
State: $("#State").val()
};
}
</script>
</div>
<style>
.k-readonly {
color: gray;
}
</style>

Result

Initially while the view loads the GetCountryList, Action fires and the list of countries will be returned as JSON response, which is populated in Country dropdownlist.

While selecting the country from the country dropdownlist, it will fire GetStateList Action and the list of state will be returned as JSON response, based on the country value, which is passed as the query string parameters.

While selecting the State from State dropdownlist, it will fire GetCityList Action and the list of city will be returned as JSON response,

based on the state value, which is passed as query string parameters.

Source Code

I hope you enjoyed this article. Your valuable feedback, questions or comments about this article are always welcome.