How to create Cascade dropdown for MVC Application with help of Jquery, Ajax and Json
B Sahoo Posted On : 02/04/2013
About Author
Biswaranjan Sahoo have good working and teching experience in Microsoft technology.

How to create cascading dropdown in mvc

In this article, i will show you how to create a cascading DropDownList in MVC3 or MVC4 with help of Jquery, Ajax and Json object. We have to follow step-by-step process. There is 6 steps. You can also download the source code from above link. So, let's begin.

Step : 1

  • Create a new Project. Open Visual Studio 2012.
  • Go to "File" => "New" => "Project...".
  • Select "Web" in installed templates.
  • Select "ASP.NET MVC 4 Web Application".
  • Enter the Project Name as "CasecadeDropdownWithJson" and choose the location.
  • Click "OK".
  • Choose "Empty" Templet, Click OK.

Step : 2

  • Right click on Model to add a new class named as "Continent".
  • Like "Continent", add "Country" class to Model.

Step : 3

  • Right click on Project, add new folder and rename as ViewModel.
    ViewModel : View model is a class, that represents data model used in specific view. Other end we can say ViewModel is a complex object that may contain multiple entities or objects from different data models or data source. Basically ViewModel is a class that specify data model used in the strongly-typed view. It is used to pass data from controller to strongly-typed view.
  • Add a class file to ViewModel, by right clicking on ViewModel folder and give name as "CascadedropdownModel".
  • Add namespace "CascadingDropdownWithPartialView.Models" of model to the "CascadedropdownModel" class file.
  • Create 2 IEnumerable property with Continent and Country Type.
  • Create 2 ststic function for Continent and Country list.

using System.Collections.Generic;
using CascadingDropdownWithPartialView.Models;

namespace CascadingDropdownWithPartialView.ViewModel
{

public class CascadedropdownModel
{

public IEnumerable ContinentList { get; set; }
public IEnumerable CountryList { get; set; }

public static IEnumerable GetContinentList()
{
List ContinentList = new List();
ContinentList.Add(new Continent() { ID = 1, ContinentName = "Asia" });
ContinentList.Add(new Continent() { ID = 2, ContinentName = "Africa" });
ContinentList.Add(new Continent() { ID = 3, ContinentName = "Antarctica" });
ContinentList.Add(new Continent() { ID = 4, ContinentName = "Australia" });
ContinentList.Add(new Continent() { ID = 5, ContinentName = "North America" });
ContinentList.Add(new Continent() { ID = 6, ContinentName = "South America" });
ContinentList.Add(new Continent() { ID = 7, ContinentName = "Europe" });

return ContinentList;
}


public static IEnumerable GetCountryList()
{
List CountryList = new List();
//Asia
CountryList.Add(new Country() { Id = 1, ContinentId=1, CountryName = "Afghanistan" });
CountryList.Add(new Country() { Id = 2, ContinentId = 1, CountryName = "India" });
CountryList.Add(new Country() { Id = 3, ContinentId = 1, CountryName = "Pakistan" });
CountryList.Add(new Country() { Id = 4, ContinentId = 1, CountryName = "China" });
CountryList.Add(new Country() { Id = 5, ContinentId = 1, CountryName = "Nepal" });
CountryList.Add(new Country() { Id = 6, ContinentId = 1, CountryName = "Bhutan" });
//Africa
CountryList.Add(new Country() { Id = 7, ContinentId = 2, CountryName = "Burundi" });
CountryList.Add(new Country() { Id = 8, ContinentId =2, CountryName = "Comoros" });
CountryList.Add(new Country() { Id = 9, ContinentId = 2, CountryName = "Djibouti" });
CountryList.Add(new Country() { Id = 10, ContinentId = 2, CountryName = "Kenya" });
//Antarctica
CountryList.Add(new Country() { Id = 11, ContinentId = 3, CountryName = "Bouvet Island" });
CountryList.Add(new Country() { Id = 12, ContinentId = 3, CountryName = "French Southern Territories" });
CountryList.Add(new Country() { Id = 13, ContinentId = 3, CountryName = "Heard Island and McDonald Islands " });
CountryList.Add(new Country() { Id = 14, ContinentId = 3, CountryName = "Kenya" });
//Australia
CountryList.Add(new Country() { Id = 15, ContinentId = 4, CountryName = "Australia" });
CountryList.Add(new Country() { Id = 16, ContinentId = 4, CountryName = "Fiji" });
CountryList.Add(new Country() { Id = 17, ContinentId = 4, CountryName = "Micronesia" });
CountryList.Add(new Country() { Id = 18, ContinentId = 4, CountryName = "New Zealand" });
//NORTH AMERICA
CountryList.Add(new Country() { Id = 19, ContinentId = 5, CountryName = "Bahamas " });
CountryList.Add(new Country() { Id = 20, ContinentId = 5, CountryName = "Honduras " });
CountryList.Add(new Country() { Id = 21, ContinentId = 5, CountryName = "Canada " });
CountryList.Add(new Country() { Id = 22, ContinentId = 5, CountryName = "United States of America" });
CountryList.Add(new Country() { Id = 23, ContinentId = 5, CountryName = "Grenada " });
CountryList.Add(new Country() { Id = 24, ContinentId = 5, CountryName = "Panama " });
//SOUTH AMERICA
CountryList.Add(new Country() { Id = 25, ContinentId = 6, CountryName = "Argentina" });
CountryList.Add(new Country() { Id = 26, ContinentId = 6, CountryName = "Ecuador " });
CountryList.Add(new Country() { Id = 27, ContinentId = 6, CountryName = "Guyana " });
CountryList.Add(new Country() { Id = 28, ContinentId = 6, CountryName = "Brazil " });
CountryList.Add(new Country() { Id = 29, ContinentId = 6, CountryName = "Venezuela "});
//Europe
CountryList.Add(new Country() { Id = 30, ContinentId = 7, CountryName = "Ukraine" });
CountryList.Add(new Country() { Id = 31, ContinentId = 7, CountryName = "Spain" });
CountryList.Add(new Country() { Id = 32, ContinentId = 7, CountryName = "Switzerland" });
CountryList.Add(new Country() { Id = 33, ContinentId = 7, CountryName = "United Kingdom" });
return CountryList;
}

}

}

Step : 4

  • Right click on Controller to add a new controller class.
  • Give the "Cascade" as controller name. Click on ADD Button.
  • Add namespace of ViewModel and Model in controller class.
  • By default, controller add Index ActionResult.
  • Create object of "CascadedropdownModel".
  • fill "ContinentList" of "CascadedropdownModel" object with GetContinentList() method of ViewModel.
  • Intialize "CountryList" of "CascadedropdownModel" object with Country List Type (List<Country>) of Model.
  • pass that object of "CascadedropdownModel" through View;

public ActionResult Index()
{
CascadedropdownModel _objViewModel = new CascadedropdownModel();
_objViewModel.ContinentList = CascadedropdownModel.GetContinentList();
return View(_objViewModel);

}

  • Add new JsonResult named "Country" to Controller with input parameter "continentId".
  • Add below given code to JsonResult.

public JsonResult Country(int continentId)
{
CascadedropdownModel _objViewModel = new CascadedropdownModel();
_objViewModel.CountryList = CascadedropdownModel.GetCountryList().Where(c => c.ContinentId == continentId);

return Json(new SelectList(_objViewModel.CountryList, "Id", "CountryName"));

}

Step : 5

  • Right click on Index ActionResult and select Add View option.
  • Create strongly Type View with "CascadedropdownModel (CascadingDropdownWithPartialView.ViewModel)" Model Class.

Code for "Index" View

Step : 6

  • Add Ajax function in Index View.

<script language="javascript" type="text/javascript">
$(this.document).ready(function ()
{
$("#Continent").change(function ()
{
var selectedValue = $(this).val();
 $.ajax({
url: '@Url.Action("Country", "Cascade")',
type: 'POST',
data: { "continentId": selectedValue },
dataType: 'json',
success: function (data) {
var items = "";
items += "";
$.each(data, function (i, item) {
items += "";
});
$("#Country").html(items);
}, error: function (error) {
}
});
});
});
</script>

Summary

Now You can select Country name on selection of Continent name. This is all about, how to create Cascading dropdown in MVC application with help of Jquery Ajax and JSON.

Post your Suggetion or Comment
Name :
Email Address :
Comment :