Populate Cascading Dropdown Using Web API and AngularJS

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.

 

 

 

Type the Controller Name as DeptListController and provide the following code there.

public List<Department> Get()
{
    List<Department> lstDept = GetDeptList();
    return lstDept;
}

private List<Department> GetDeptList()
{
    List<Department> lstData = new List<Department>();

    Department objDept = new Department();
    objDept.DeptID = 0;
    objDept.DeptName = "";
    lstData.Add(objDept);

    objDept = new Department();
    objDept.DeptID = 1;
    objDept.DeptName = "Sales";
    lstData.Add(objDept);

    objDept = new Department();
    objDept.DeptID = 2;
    objDept.DeptName = "Accounts";
    lstData.Add(objDept);

    objDept = new Department();
    objDept.DeptID = 3;
    objDept.DeptName = "Marketing";
    lstData.Add(objDept);

    objDept = new Department();
    objDept.DeptID = 4;
    objDept.DeptName = "Administrator";
    lstData.Add(objDept);

    objDept = new Department();
    objDept.DeptID = 5;
    objDept.DeptName = "Purchase";
    lstData.Add(objDept);
    return lstData;
}

Similarly add another Web API Controller with the name DesigListController and provide the following code.

public List<Designation> Post(Department objData)
{
    List<Designation> lstDesig = new List<Designation>();

    if (objData.DeptID > 0)
        lstDesig = GetDesigList().Where(s => s.DeptID.Equals(objData.DeptID)).ToList();
    return lstDesig;
}

private List<Designation> GetDesigList()
{
    List<Designation> lstData = new List<Designation>();

    Designation objDesig = new Designation();
    objDesig.DesigID = 1;
    objDesig.DesigName = "Sales Manager";
    objDesig.DeptID = 1;
    lstData.Add(objDesig);

    objDesig = new Designation();
    objDesig.DesigID = 2;
    objDesig.DesigName = "Sr. Sales Manager";
    objDesig.DeptID = 1;
    lstData.Add(objDesig);

    objDesig = new Designation();
    objDesig.DesigID = 3;
    objDesig.DesigName = "Accountant";
    objDesig.DeptID = 2;
    lstData.Add(objDesig);

    objDesig = new Designation();
    objDesig.DesigID = 4;
    objDesig.DesigName = "Auditor";
    objDesig.DeptID = 2;
    lstData.Add(objDesig);

    objDesig = new Designation();
    objDesig.DesigID = 5;
    objDesig.DesigName = "Agent";
    objDesig.DeptID = 3;
    lstData.Add(objDesig);

    objDesig = new Designation();
    objDesig.DesigID = 6;
    objDesig.DesigName = "Marketing Manager";
    objDesig.DeptID = 3;
    lstData.Add(objDesig);

    objDesig = new Designation();
    objDesig.DesigID = 7;
    objDesig.DesigName = "Sr. Sales Manager";
    objDesig.DeptID = 1;
    lstData.Add(objDesig);

    objDesig = new Designation();
    objDesig.DesigID = 8;
    objDesig.DesigName = "Network Administrator";
    objDesig.DeptID = 4;
    lstData.Add(objDesig);

    objDesig = new Designation();
    objDesig.DesigID = 9;
    objDesig.DesigName = "Purchase Office";
    objDesig.DeptID = 6;
    lstData.Add(objDesig);

    objDesig = new Designation();
    objDesig.DesigID = 10;
    objDesig.DesigName = "Supervisor";
    objDesig.DeptID = 6;
    lstData.Add(objDesig);
    return lstData;
}

Basically, this web API controller is called when we select a department from the dropdown list. It takes the department model class as argument to provide information about the selected department and fetches the designation list as in the selected deparment.

 

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.