Creating a Cascading Dropdown List in MVC 4 Using AngularJS

Procedure

Open Visual Studio 2012 and select "File" -> "New" -> "Project...".

Now add a AngularJS reference. Right-click on the project in the Solution Explorer and select Manage NuGet Packages.







Now add an ADO.NET Entity Data Model.













Now add a new Controller Employee and enter the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using CascadingDropDownInMVC4WithAngularJS.Models;  
  7.   
  8. namespace CascadingDropDownInMVC4WithAngularJS.Controllers  
  9. {  
  10.     public class EmployeeController : Controller  
  11.     {  
  12.       EmployeeManagementEntities db=new EmployeeManagementEntities();  
  13.   
  14.         public ActionResult Index()  
  15.         {  
  16.             return View();  
  17.         }  
  18.                   
  19.         public JsonResult GetCountry()  
  20.         {  
  21.             var CountryList = db.Country.ToList();  
  22.             return this.Json(CountryList, JsonRequestBehavior.AllowGet);  
  23.         }  
  24.   
  25.         [HttpPost]  
  26.         public JsonResult GetStates(int CountryID)  
  27.         {  
  28.             var StateList = db.State.Where(m => m.CountryID == CountryID).ToList();  
  29.   
  30.             return this.Json(StateList);  
  31.         }  
  32.     }  
  33. }   

Now add a View on the Index Action method:

 

  1. @Scripts.Render("~/Scripts/angular.min.js")  
  2.   
  3. <script type="text/javascript">  
  4.     //Module  
  5.     var myApp = angular.module('myApp', []);  
  6.   
  7.     //Controller  
  8.     myApp.controller('MainCtrl', ['$scope', '$http',  
  9.         function ($scope, $http) {  
  10.             //$http service for Getting the Country  
  11.             $http({  
  12.                 method: 'GET',  
  13.                 url: '/Employee/GetCountry'  
  14.             }).  
  15.             success(function (data) {  
  16.                 $scope.country = data;  
  17.             });  
  18.   
  19.             //$http service for getting States  
  20.             $scope.GetStates = function () {  
  21.                 if ($scope.countr) {  
  22.                     $http({  
  23.                         method: 'POST',  
  24.                         url: '/Employee/GetStates/',  
  25.                         data: JSON.stringify({ CountryID: $scope.countr })  
  26.                     }).  
  27.                     success(function (data) {  
  28.                         $scope.states = data;  
  29.                     });  
  30.                 }  
  31.                 else {  
  32.                     $scope.cities = null;  
  33.                 }  
  34.             }  
  35.         }]);  
  36. </script>  
  37.   
  38. <div data-ng-app="myApp">  
  39.     <div data-ng-controller="MainCtrl">  
  40.         <div class="editor-label">  
  41.             <label>Name</label>  
  42.         </div>  
  43.         <div class="editor-field">  
  44.             @Html.TextBox("Name")  
  45.         </div>  
  46.         <div class="editor-label">  
  47.             <label>Country</label><br />  
  48.         </div>  
  49.         <div class="editor-field">  
  50.             <select data-ng-model="countr"  
  51.                 data-ng-options="c.CountryID as c.CountryName for c in country"  
  52.                 data-ng-change="GetStates()">  
  53.                 <option value="">--Select Country--</option>  
  54.             </select><br />  
  55.         </div>  
  56.         <div class="editor-label"><br />  
  57.             <label>State</label><br />  
  58.         </div>  
  59.         <div class="editor-field">  
  60.             <select data-ng-model="state" data-ng-disabled="!states"  
  61.                 data-ng-options="s.StateID as s.StateName for s in states">  
  62.                 <option value="">--Select State--</option>  
  63.             </select>  
  64.         </div>  
  65.   
  66.   
  67.     </div>  
  68. </div>  

 

Now run you application:





Next Recommended Readings