Cascading DropDownList in ASP.Net MVC

Sourabh Mishra

30 Comments

Join the conversation! Your thoughts help the community grow.

Tasneem Nomani2y ago
How to set default state and district initially
Satya Maruthi4y ago
Very helpful. I would like to post the selected list values to the controller. I have a problem with the posting second list value. Any idea would be helpful. Thanks in advance.
Rich Striker5y ago
Most confusing code example I have ever seen....get a clue.
Raymond G6y ago
Dear Sourabh thanks for this description that helped me to understand cascaded dropdownlist. I am trying to apply Bootstrap 3 functionality : @using (Html.BeginForm()), <div class="form-horizontal">, Class = "form-control".When the view initialize the display is ok and Bootstrap applied, unfortunately when the City dropdownlist is updated I loose City dropdownlist Bootstrap formatting. is there any guidance you can give to fix this. Thanks a lot.
Padmakhi Sahu8y ago
Sir please help me figure out how to use cascading dropdownlist for state and city to insert data and in edit view page
Kishore Madanapali9y ago
Sir please post an example of Cascading dropdownlist in asp.net mvc using jquery and ado.net code. Eg:Countries,States,Cities
- Sourabh Mishra9y ago
  Watch this video https://www.youtube.com/watch?v=Bw9PrDykDxI
Sourabh Mishra9y ago
Video on cascading dropdownlist using angularjs https://www.youtube.com/watch?v=Bw9PrDykDxI
rehab ali9y ago
Thank you, it was easy Could you please share the code for a three level cascade i trying but not work
Yash Bhan9y ago
Thank you so much for this! Could you please share the code for a three level cascade?
Deepak Choudhary9y ago
@Html.DropDownListFor(x => x.StateNames, Model.StateNames, "--Select--", new { @id="ddlState"}); show error pls give me solution (StateNames)
- charlie fisher7y ago
  Hi Deepak this one got me too :) it turns out i had @Model in my view and not @model that fixed it for me when i changed it :)
- Manoj Kumar4y ago
  I'm also facing the same problem,need Help
Manav Pandya9y ago
Nice one ......................
likhitha valli9y ago
I am using kendo dropdownlist the text is not binding to kendo dropdown
rucha kinikar9y ago
I want to know,how to featch the value on text box when we select the the value from dropdown box I.e using script ?
- rucha kinikar9y ago
  Where to use that code?
- Sourabh Mishra9y ago
  For this you can use this code $("#dropdownlistid option:selected").text();
imran bhatti9y ago
The code is good but i am not able to populate the second Dropdownlist only first one is populating.
- Rocío Guzmán9y ago
  Hi! imran bhatti, I modified the code and was possible cascading in three levels
- Yash Bhan9y ago
  Hi, Rocio Guzm?n, can you please share the code for the three level cascading, i'm trying to do the same, but am only able to get to two levels.
Zeeshan Azim10y ago
Thousands of thanks for this snippet.
Ankur Mistry10y ago
good one
Praveen Dhatrika10y ago
Thnq It helped me a lot. :)
Rupali Shinde10y ago
really nice example of cascading dropdown
Mukesh Kumar11y ago
Good One
Ajay Kadam11y ago
NIce it works...Thanks
malusi ngubane11y ago
cascading is good but how to save those selected values to the database
Jefferson Brito11y ago
How can I populate the dropdownlist in edit mode?
Manish Kumar Choudhary11y ago
Nice one..

In this article, you will learn how to create a cascading DropDownList in ASP.NET MVC. I will show you the procedure step-by-step. So, let's begin.

Case Study: I will create two DDLs (State and District). The first DDL will let you pick a state and when you a pick state, it will make a parameterized JSON call using jQuery that will return a matching set of districts that will be populated to the second DDL. I will also show how to use proper validations with each control. Here is the animated screen that we are going to create:

Now, let's see the procedure.

Step 1

At the very first, we need a model class that defines the properties for storing data.

public class ApplicationForm
{
public string Name { get; set; }
public string State { get; set; }
public string District { get; set; }
}

Step 2

Now, we need an initial controller that will return an Index view by a packing list of states in ViewBag.StateName.

public ActionResult Index()
{
List<SelectListItem> state = new List<SelectListItem>();
state.Add(new SelectListItem { Text = "Bihar", Value = "Bihar" });
state.Add(new SelectListItem { Text = "Jharkhand", Value = "Jharkhand" });
ViewBag.StateName = new SelectList(state, "Value", "Text");
return View();
}

In the above controller we have a List<SelectListItem> containing states attached to ViewBag.StateName. We could get a list of states from the database using a LINQ query or something and pack it into ViewBag.StateName. Well let's go with in-memory data.

Step 3

Once we have a controller we can add its view and start creating a Razor form.

@Html.ValidationSummary("Please correct the errors and try again.")
@using (Html.BeginForm())
{
<fieldset>
<legend>DropDownList</legend>
@Html.Label("Name")
@Html.TextBox("Name")
@Html.ValidationMessage("Name", "*")
@Html.Label("State")
@Html.DropDownList("State", ViewBag.StateName as SelectList, "Select a State", new { id = "State" })
@Html.ValidationMessage("State", "*")
@Html.Label("District")
<select id="District" name="District"></select>
@Html.ValidationMessage("District", "*")
<p>
<input type="submit" value="Create" id="SubmitId" />
</p>
</fieldset>
}

You can see I have added proper labels and validation fields with each input control (two DropDownLists and one TextBox) and also a validation summery at the top. Notice, I have used <select id="District"â€¦.> which is HTML instead of a Razor helper; this is because when we make a JSON call using jQuery we will return HTML markup of the pre-populated option tag. Now, let's add jQuery code in the above view page.

Step 4

Here is the jQuery code making a JSON call to the DDL named controller's DistrictList method with a parameter (which is the selected state name). The DistrictList method will return JSON data. With the returned JSON data we are building <option> tag HTML markup and attaching this HTML markup to "District" which is a DOM control.

@Scripts.Render("~/bundles/jquery")
<script type="text/jscript">
$(function () {
$('#State').change(function () {
$.getJSON('/DDL/DistrictList/' + $('#State').val(), function (data) {
var items = '<option>Select a District</option>';
$.each(data, function (i, district) {
items += "<option value='" + district.Value + "'>" + district.Text + "</option>";
});
$('#District').html(items);
});
});
});
</script>

Please make sure you are using jQuery library references before the <script> tag.

Step 5

In the above jQuery code we are making a JSON call to DDL named controller's DistrictList method with a parameter. Here is the DistrictList method code that will return JSON data.

public JsonResult DistrictList(string Id)
{
var district = from s in District.GetDistrict()
where s.StateName == Id
select s;
return Json(new SelectList(district.ToArray(), "StateName", "DistrictName"), JsonRequestBehavior.AllowGet);
}

Please note, the DistrictList method will accept an "Id" (it should be "Id" always) parameter of string type sent by the jQuery JSON call. Inside the method, I am using an "Id" parameter in the LINQ query to get a list of matching districts and conceptually, in the list of district data there should be a state field. Also note, in the LINQ query I am making a method called District.GetDistrict().

Step 6

In the above District.GetDistrict() method call, District is a model that has a GetDistrict() method. And I am using the GetDistrict() method in the LINQ query, so this method should be of type IQueryable. Here is the model code.

public class District
{
public string StateName { get; set; }
public string DistrictName { get; set; }
public static IQueryable<District> GetDistrict()
{
return new List<District>
{
new District { StateName = "Bihar", DistrictName = "Motihari" },
new District { StateName = "Bihar", DistrictName = "Muzaffarpur" },
new District { StateName = "Bihar", DistrictName = "Patna" },
new District { StateName = "Jharkhand", DistrictName = "Bokaro" },
new District { StateName = "Jharkhand", DistrictName = "Ranchi" },
}.AsQueryable();
}
}

Step 7

You can run the application here because the cascading dropdownlist is ready now. I will do some validation when the user clicks the submit button. So, I will add another action result of the POST version.

[HttpPost]
public ActionResult Index(ApplicationForm formdata)
{
if (formdata.Name == null)
{
ModelState.AddModelError("Name", "Name is required field.");
}
if (formdata.State == null)
{
ModelState.AddModelError("State", "State is required field.");
}
if (formdata.District == null)
{
ModelState.AddModelError("District", "District is required field.");
}
if (!ModelState.IsValid)
{
//Populate the list again
List<SelectListItem> state = new List<SelectListItem>();
state.Add(new SelectListItem { Text = "Bihar", Value = "Bihar" });
state.Add(new SelectListItem { Text = "Jharkhand", Value = "Jharkhand" });
ViewBag.StateName = new SelectList(state, "Value", "Text");
return View("Index");
}
//TODO: Database Insertion
return RedirectToAction("Index", "Home");
}

And, this action result will accept ApplicationForm model data and based on posted data will do validations. If a validation error occurs, the action method calls the AddModelError method to add the error to the associated ModelState object. The AddModelError method accepts the name of the associated property and the error message to display. After the action method executes the validation rules, it uses the IsValid property of the ModelStateDictionary collection to determine whether the resulting data complies with the model.

So, this is all. If you wish to see the complete code, use the links given below.

Model: ApplicationForm.cs | Controller: DDLController.cs | View: Index.cshtml

Hope this helps.