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;
  8. namespace CascadingDropDownInMVC4WithAngularJS.Controllers
  9. {
  10. public class EmployeeController : Controller
  11. {
  12. EmployeeManagementEntities db=new EmployeeManagementEntities();
  14. public ActionResult Index()
  15. {
  16. return View();
  17. }
  19. public JsonResult GetCountry()
  20. {
  21. var CountryList = db.Country.ToList();
  22. return this.Json(CountryList, JsonRequestBehavior.AllowGet);
  23. }
  25. [HttpPost]
  26. public JsonResult GetStates(int CountryID)
  27. {
  28. var StateList = db.State.Where(m => m.CountryID == CountryID).ToList();
  30. return this.Json(StateList);
  31. }
  32. }
  33. }

Now add a View on the Index Action method:

  1. @Scripts.Render("~/Scripts/angular.min.js")
  3. <script type="text/javascript">
  4. //Module
  5. var myApp = angular.module('myApp', []);
  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. });
  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>
  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>
  67. </div>
  68. </div>

Now run you application: