Basically, whenever we want to create a Cascading Dropdown List, it basically populates another Dropdown list on the basis of the selected item of the first Dropdown list. In this article, we basically create two Dropdown lists, one for Department List and another for the Designation List. Whenever we select a department name from the list, it populates the designation list on the basis of the selected department code.
To implement this, we will start by creating an ASP.NET MVC Application. For these, you can press CTRL + SHIFT + N or you can click on "File" -> "New" -> "Project...". Then select ASP.Net Web Application and provide the project a name and click the OK button.
Now, in the next tab, select MVC application and below that check the MVC and Web API Check boxes and click on the OK button.
This will create a starter web application.
Now, we need to create two model classes named
Departrment and
Designation. For this, select the Model folder and right-click and select
Add Class. Now add the following model class:
- public class Department
- {
- public int DeptID { get; set; }
- public string DeptName { get; set; }
- }
-
- public class Designation
- {
- public int DesigID { get; set; }
- public string DesigName { get; set; }
- public int DeptID { get; set; }
- }
Now, we need to add a Web API Controller. For this, Select
Controller folder and right-click and click
Add Controller.
Now, we need to install the Angular JS Reference using Nuget Console application. After the installation is done, the Angular js related script files has been added under the script tag.
Now, create a new folder named Html under the Root of the Main project. Now add 2 blank HTML files within that Html Folder with the name MainPage.Html and Dropdown.html.
Now add the following code to the MainPage.Html:
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
-
- <script src="../../Scripts/angular1.3.8.min.js"></script>
- <script>
- var myApp = angular.module('MyApp', [])
- .controller("MyController", ['$scope', '$http',
- function ($scope, $http) {
- $http.get("/api/DeptList").then(function (responses) {
- $scope.DeptMas = responses.data;
- $scope.Department = $scope.DeptMas[0];
- });
-
- $scope.OnDeptChange = function () {
- $http.post("/api/DesigList", $scope.Department).then(function (responses) {
- $scope.DesigMas = responses.data;
- $scope.Designation = $scope.DesigMas[0];
- });
- }
- }]);
-
- myApp.directive("ngDropdown", function () {
- return {
- restrict: "E",
- templateUrl: "DownDown.html"
- }
- });
- </script>
- </head>
- <body ng-app="MyApp">
- <ng-dropdown></ng-dropdown>
- </body>
- </html>
Now add the following code to the DropDown.Html:
- <div ng-controller="MyController">
- <table>
- <tr>
- <td>Select Department Name :</td>
- <td> <select ng-options="a.DeptName for a in DeptMas" ng-model="Department" ng-change="OnDeptChange()" name="ddlDept"></select> </td>
- </tr>
- <tr>
- <td>Select Designation Name :</td>
- <td> <select ng-options="a.DesigName for a in DesigMas" ng-model="Designation" name="ddlDesig"></select></td>
- </tr>
- </table>
- </div>
Now, as in the preceding HTML code, we create an Angular JS Controller named MyController within MainPage.html and call that controller from the dropdown.html page for data binding. Also, we create another custom directive named ngDropdown that basically calls the Dropdown controls within the main page. Basically it works just like the user controls concept in traditional web forms project or partial views concept in MVC.