Post
Ask Question

Cascading Dropdown in AngularJS

Add 2 Class 1 for Countries and other for state.

  1. public class Country  
  2. {  
  3.     public int CountryId { get; set; }  
  4.     public string CountryName { get; set; }  
  5. }  
  6. public class State  
  7. {  
  8.     public int StateId { get; set; }  
  9.     public string StateName { get; set; }  
  10.     public int CountryId { get; set; }  
  11. }  
Create a ActionResult Name it as Index [Add a View].

Add the script
  1. <script src="~/Scripts/angular.min.js"></script>  
Create a js Name it in my case its CascadingDropdown.
  1. var app = angular.module('myApp', []);  
  2. app.controller('myController', function ($scope, $http) {  
  3.     getcountries();  
  4.     function getcountries() {  
  5.       
  6.         $http({  
  7.             method: 'Get',  
  8.             url: '/Home/Countries'  
  9.   
  10.         }).success(function (data, status, header, config) {  
  11.   
  12.             $scope.countries = data;  
  13.         }).error(function (data, status, header, config) {  
  14.             $scope.message = "Error";  
  15.         });  
  16.     }  
  17.   
  18.     $scope.GetStates = function ()   
  19.     {  
  20.         var countryIdselected = $scope.countrymodel;  
  21.         if (countryIdselected) {  
  22.             $http({  
  23.                 method: 'Post',  
  24.                 url: '/Home/States',  
  25.                 data: JSON.stringify({ countryId: countryIdselected })  
  26.             }).success(function (data, status, header, config) {  
  27.                 $scope.states = data;  
  28.             }).error(function (data, status, header, config) {  
  29.                 $scope.message = "Error";  
  30.             })  
  31.         }  
  32.         else {  
  33.             $scope.states = null;  
  34.         }  
  35.     }  
  36. });  
  37.   
  38.   
  39. //Calls for Country DropDown  
  40.  public ActionResult Countries()  
  41.         {  
  42.             List<Country> cobj = new List<Country>();  
  43.             cobj.Add(new Country { CountryId = 1, CountryName = "India" });  
  44.             cobj.Add(new Country { CountryId = 2, CountryName = "Srilanka" });  
  45.             cobj.Add(new Country { CountryId = 3, CountryName = "USA" });  
  46.   
  47.             return Json(cobj, JsonRequestBehavior.AllowGet);  
  48.         }  
  49.   
  50. //Calls for State DropDown with CountryID as Parameter  
  51.   
  52.         public ActionResult States(int countryId)  
  53.         {  
  54.    List<State> sobj = new List<State>();  
  55.    sobj.Add(new State { StateId = 1, StateName = "Karnataka", CountryId = 1 });  
  56.    sobj.Add(new State { StateId = 2, StateName = "Kerala", CountryId = 1 });  
  57.    sobj.Add(new State { StateId = 3, StateName = "TamilNadu", CountryId = 1 });  
  58.    sobj.Add(new State { StateId = 1, StateName = "Newyork", CountryId = 3 });  
  59.    sobj.Add(new State { StateId = 1, StateName = "Colombo", CountryId = 2 });  
  60.   
  61. //Filter based on CountryID  
  62.             var result = sobj.Where(x => x.CountryId == countryId).Select(x => new { x.StateId, x.StateName });  
  63.   
  64.             return Json(result);  
  65.         }  
  66.   
  67. //IndexView  
  68. //  Add the script file <script src="~/Scripts/CascadingDropdown.js"></script>  
  69. <div ng-app="myApp">  
  70.         
  71.             <form name="mainForm"  ng-controller="myController">  
  72.   
  73.                 <select ng-model="countrymodel" ng-options=" c.CountryId as c.CountryName for c in countries" ng-change="GetStates()">  
  74.                     <option value="">-- Select Country --</option>  
  75.                 </select>  
  76.                 <select ng-model="statemodel" ng-options="s.StateId as s.StateName for s in states ">  
  77.                     <option value="">-- Select State --</option>  
  78.                 </select>  
  79.             </form>  
  80. </div>