how to create cascading dropdown with ajax and partialView using MVC
B Sahoo Posted On : 20/11/2014
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 Partial view. You have to follow me for developing cascading dropdown step-by-step. 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 "CascadingDropdownWithPartialView" 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();
_objViewModel.CountryList = new List();
return View(_objViewModel);

}

  • Add new PartialViewResult named"_countryPartialView" to Controller with input parameter "continentId".
  • Add below given code to PartialViewResult.

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

return PartialView(_objViewModel);

}

Step : 5

  • Right click on Index ActionResult and select Add View option.
  • Create stringly Type View with "CascadedropdownModel (CascadingDropdownWithPartialView.ViewModel)" Model Class.
  • Right click on "_countryPartialView" PartialViewResult and select Add View option.
  • Create stringly Type View with "CascadedropdownModel (CascadingDropdownWithPartialView.ViewModel)" Model Class.
  • but here, select Partial View checkbox to create Partial View.

Code for "Index" View

Code for "_countryPartialView" PartialView

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("_countryPartialView", "Cascade")',
type: 'POST',
data: { "continentId": selectedValue },
success: function (data) {
$("#Country").replaceWith(data);
}, error: function (error) {
}
});
});
});
</script>

Summary

Now You can select Country name on selection of Continent name.
In this way we can develop cascading dropdown with help of PartialView, JQuery and Ajax. You can download the source code. Next article i will show you how to create cascading dropdown with help of JQuery,Json and Ajax.

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