







In this tutorial, we will show you how to create page contains dropdownlist cascading functionality. Dropdownlist cascading is very common in web development and it’s good to build such an interactive interface when your item in dropdownlist is too long for the user to choose.

To Do

1. MS VS2012, C#, Razor

2. jQuery 1.7.1

Task

1. Create a simple website to let the user choose their programmer skill.

2. It will consist of 2 DropDownList , one DropDownList is for populating software company name, and another one is the software created by this company.

ASP .Net MVC DropDownList Cascading Example

1.Create a Empty MVC Project and name it DropDownListCascade. It’s your choice to chose Internet Application templates as your templates but for this tutorial we will create lighter project without any not related template and JavaScript. So we can focus on the objective of this tutorial without concerning much on the unintended error causing by the default template.

2.Add ViewModels folder, in this folder add a file and name it programming.cs.Copy below code into programming.cs

Programming.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DropDownListCascade.ViewModels { public class Programming { public int selectedType { get; set; } public int selectedLanguange { get; set; } public System.Web.Mvc.SelectList types; public System.Web.Mvc.SelectList languanges; } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 using System ; using System . Collections . Generic ; using System . Linq ; using System . Web ; namespace DropDownListCascade . ViewModels { public class Programming { public int selectedType { get ; set ; } public int selectedLanguange { get ; set ; } public System . Web . Mvc . SelectList types ; public System . Web . Mvc . SelectList languanges ; } }

May be you saw this tips somewhere in this blog. But is worth to remind you again. It’s a good practice use ViewModel to bind data into view. 🙂

3.In controllers folder, add a class and name it DropDownListController.cs. Copy below code in this file

DropDownListCascadeController .cs using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace DropDownListCascade.Controllers { public class DropDownListCascadeController : Controller { //For display default values into dropdownlist for the first time public ActionResult Index() { List<SelectListItem> list = new List<SelectListItem>() { new SelectListItem(){ Value="1", Text="Microsoft"}, new SelectListItem(){ Value="2", Text="Apple"}, new SelectListItem(){ Value="3", Text="Others"} }; ViewModels.Programming programming = new ViewModels.Programming(); programming.types = new SelectList(list, "Value", "Text"); programming.languanges = new SelectList(new List<SelectListItem>(), "Value", "Text"); return View(programming); } //It is necessary to set string type in parameter or else you will get Internal Server error 500. [HttpPost] public JsonResult GetLanguages(string typeSelected) { int type = int.Parse(typeSelected); List<SelectListItem> list = new List<SelectListItem>(); if (type == 1) { list.AddRange(new List<SelectListItem>(){ new SelectListItem(){ Value="3", Text="Asp"}, new SelectListItem(){ Value="4", Text="BASIC"}, new SelectListItem(){ Value="5", Text="C"}, new SelectListItem(){ Value="6", Text="C++"} }); } else if (type == 2) { list.AddRange(new List<SelectListItem>(){ new SelectListItem(){ Value="2", Text="AppleScript"}, }); } else { list.AddRange(new List<SelectListItem>(){ new SelectListItem(){ Value="1", Text="ActionScript"}, new SelectListItem(){ Value="7", Text="Clojure"}, new SelectListItem(){ Value="8", Text="COBOL"}, new SelectListItem(){ Value="9", Text="ColdFusion"}, new SelectListItem(){ Value="10", Text="Erlang"}, new SelectListItem(){ Value="11", Text="Fortran"}, new SelectListItem(){ Value="12", Text="Groovy"}, new SelectListItem(){ Value="13", Text="Haskell"}, new SelectListItem(){ Value="14", Text="instinctcoder.com"}, new SelectListItem(){ Value="15", Text="Java"}, new SelectListItem(){ Value="16", Text="JavaScript"}, new SelectListItem(){ Value="17", Text="Lisp"}, new SelectListItem(){ Value="18", Text="Perl"}, new SelectListItem(){ Value="19", Text="PHP"}, new SelectListItem(){ Value="20", Text="Python"}, new SelectListItem(){ Value="21", Text="Ruby"}, new SelectListItem(){ Value="22", Text="Scala"}, new SelectListItem(){ Value="23", Text="Scheme"} }); } ViewModels.Programming programming = new ViewModels.Programming(); programming.languanges = new SelectList(list, "Value", "Text"); return Json(new { programming.languanges }); } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 using System ; using System . Collections . Generic ; using System . Linq ; using System . Web ; using System . Web . Mvc ; namespace DropDownListCascade . Controllers { public class DropDownListCascadeController : Controller { //For display default values into dropdownlist for the first time public ActionResult Index ( ) { List < SelectListItem > list = new List < SelectListItem > ( ) { new SelectListItem ( ) { Value = "1" , Text = "Microsoft" } , new SelectListItem ( ) { Value = "2" , Text = "Apple" } , new SelectListItem ( ) { Value = "3" , Text = "Others" } } ; ViewModels . Programming programming = new ViewModels . Programming ( ) ; programming . types = new SelectList ( list , "Value" , "Text" ) ; programming . languanges = new SelectList ( new List < SelectListItem > ( ) , "Value" , "Text" ) ; return View ( programming ) ; } //It is necessary to set string type in parameter or else you will get Internal Server error 500. [ HttpPost ] public JsonResult GetLanguages ( string typeSelected ) { int type = int . Parse ( typeSelected ) ; List < SelectListItem > list = new List < SelectListItem > ( ) ; if ( type == 1 ) { list . AddRange ( new List < SelectListItem > ( ) { new SelectListItem ( ) { Value = "3" , Text = "Asp" } , new SelectListItem ( ) { Value = "4" , Text = "BASIC" } , new SelectListItem ( ) { Value = "5" , Text = "C" } , new SelectListItem ( ) { Value = "6" , Text = "C++" } } ) ; } else if ( type == 2 ) { list . AddRange ( new List < SelectListItem > ( ) { new SelectListItem ( ) { Value = "2" , Text = "AppleScript" } , } ) ; } else { list . AddRange ( new List < SelectListItem > ( ) { new SelectListItem ( ) { Value = "1" , Text = "ActionScript" } , new SelectListItem ( ) { Value = "7" , Text = "Clojure" } , new SelectListItem ( ) { Value = "8" , Text = "COBOL" } , new SelectListItem ( ) { Value = "9" , Text = "ColdFusion" } , new SelectListItem ( ) { Value = "10" , Text = "Erlang" } , new SelectListItem ( ) { Value = "11" , Text = "Fortran" } , new SelectListItem ( ) { Value = "12" , Text = "Groovy" } , new SelectListItem ( ) { Value = "13" , Text = "Haskell" } , new SelectListItem ( ) { Value = "14" , Text = "instinctcoder.com" } , new SelectListItem ( ) { Value = "15" , Text = "Java" } , new SelectListItem ( ) { Value = "16" , Text = "JavaScript" } , new SelectListItem ( ) { Value = "17" , Text = "Lisp" } , new SelectListItem ( ) { Value = "18" , Text = "Perl" } , new SelectListItem ( ) { Value = "19" , Text = "PHP" } , new SelectListItem ( ) { Value = "20" , Text = "Python" } , new SelectListItem ( ) { Value = "21" , Text = "Ruby" } , new SelectListItem ( ) { Value = "22" , Text = "Scala" } , new SelectListItem ( ) { Value = "23" , Text = "Scheme" } } ) ; } ViewModels . Programming programming = new ViewModels . Programming ( ) ; programming . languanges = new SelectList ( list , "Value" , "Text" ) ; return Json ( new { programming . languanges } ) ; } } }

4.Add view by access place your cursor on the DropDownListCascadeController > Index. Then go to this file Views > DropDownListCascade > Index.chtml . In this file, the code will look like this

Index.chtml @model DropDownListCascade.ViewModels.Programming @{Layout = null;} <script src="~/Scripts/jquery-1.7.1.js"></script> <script src="~/Scripts/dropdown.cascade.js"></script> Software Company @Html.DropDownListFor(m => m.selectedType, Model.types, "--Select a type--") <br/> Software Created By this company @Html.DropDownListFor(m => m.selectedLanguange, Model.languanges, "--Select a language--") 1 2 3 4 5 6 7 8 9 @ model DropDownListCascade . ViewModels . Programming @ { Layout = null ; } <script src = "~/Scripts/jquery-1.7.1.js" > </script> <script src = "~/Scripts/dropdown.cascade.js" > </script> Software Company @ Html . DropDownListFor ( m = > m . selectedType , Model . types , "--Select a type--" ) < br / > Software Created By this company @ Html . DropDownListFor ( m = > m . selectedLanguange , Model . languanges , "--Select a language--" )

5.So if you choose empty project as template in step 1 then please download jQuery website from here. else you could skip this.

6.Add Scripts folder and the downloaded jQuery file place in this folder. Add one more js file and name it

dropdown.cascade.js and this file will look like this

dropdown.cascade.js $(function () { $('#selectedType').change(function () { var typeSelected = $('#selectedType :selected').val(); typeSelected = typeSelected == "" ? 0 : typeSelected; //When select 'optionLabel' we need to reset it to default as well. So not need //travel back to server. if (typeSelected == "") { $('#selectedLanguange').empty(); $('#selectedLanguange').append('<option value="">--Select a language--</option>'); return; } //This is where the dropdownlist cascading main function $.ajax({ type: "POST", url: "GetLanguages", //Your Action name in the DropDownListConstroller.cs data: "{'typeSelected':" + typeSelected + "}", //Parameter in this function, Is cast sensitive and also type must be string contentType: "application/json; charset=utf-8", dataType: "json" }).done(function (data) { //When succeeded get data from server construct the dropdownlist here. if (data != null) { $('#selectedLanguange').empty(); $.each(data.languanges, function (index, data) { $('#selectedLanguange').append('<option value="' + data.Value + '">' + data.Text + '</option>'); }); } }).fail(function (response) { if (response.status != 0) { alert(response.status + " " + response.statusText); } }); }); }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 $ ( function ( ) { $ ( '#selectedType' ) . change ( function ( ) { var typeSelected = $ ( '#selectedType :selected' ) . val ( ) ; typeSelected = typeSelected == "" ? 0 : typeSelected ; //When select 'optionLabel' we need to reset it to default as well. So not need //travel back to server. if ( typeSelected == "" ) { $ ( '#selectedLanguange' ) . empty ( ) ; $ ( '#selectedLanguange' ) . append ( '<option value="">--Select a language--</option>' ) ; return ; } //This is where the dropdownlist cascading main function $ . ajax ( { type : "POST" , url : "GetLanguages" , //Your Action name in the DropDownListConstroller.cs data : "{'typeSelected':" + typeSelected + "}" , //Parameter in this function, Is cast sensitive and also type must be string contentType : "application/json; charset=utf-8" , dataType : "json" } ) . done ( function ( data ) { //When succeeded get data from server construct the dropdownlist here. if ( data != null ) { $ ( '#selectedLanguange' ) . empty ( ) ; $ . each ( data . languanges , function ( index , data ) { $ ( '#selectedLanguange' ) . append ( '<option value="' + data . Value + '">' + data . Text + '</option>' ) ; } ) ; } } ) . fail ( function ( response ) { if ( response . status != 0 ) { alert ( response . status + " " + response . statusText ) ; } } ) ; } ) ; } ) ;

7.Lastly, Press CTRL+F5 to run the application and make sure your URL is http://localhost:59326/DropDownListCascade/Index, and you will see the page like this, That’s all!







