Cascading DropDownList In AngularJS And WebAPI

In this blog, you will learn about Cascading dropdownlist in AngularJS and WebAPI.

In development, DropDownList is very common. On the basis of the requirement, we have to create cascading between DropDownLists. Today, in this article, we will learn how to populate DropDownList and cascade over it.

So, let's start.

Step 1

Open Visual Studio.

Step 2

Go to File>>New>> Project.



Choose ASP.NET Web application.

Step 3

Select WebAPI.



Click on OK button and check the Solution Explorer.



In this article, we have two tables.

1. StateMaster Having the list of states.
   
   
   
   
2. CityMaster List of cities, on the basis of their state.
   
   
   

Now, let's create an ADO.NET Entity Data Model file for connecting the tables.



Click on Add button. Now, create an edmx file.

• Once you click on the Finish button, your screen will look like the following.
  
  
  

Now, let's create a StateController and paste the below code. This code gives you the list of states.

usingAngularwithWebAPI.DbContext;
using System;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Http; // This namespace is responsible for IHttpActionResult
usingSystem.Web.Mvc;

namespaceAngularwithWebAPI.Controllers {
    publicclassStateController: ApiController {
        DbContext.StudentEntitiesstudentEntities = newDbContext.StudentEntities();
        publicIHttpActionResultGetStates() {
            var states = studentEntities.StateMasters.ToList();
            return Ok(states);
        }
    }
}

Create a CityController and copy the below code. This code gives you the list of cities on the basis of stateid.

using System;
usingSystem.Collections.Generic;
usingSystem.Linq;
using System.Net;
usingSystem.Net.Http;
usingSystem.Web.Http;

namespaceAngularwithWebAPI.Controllers {
    publicclassCityController: ApiController {
        DbContext.StudentEntitiesstudentEntities = newDbContext.StudentEntities();
        publicIHttpActionResultGetCity(intstateId) {
            var city = studentEntities.CityMasters.Where(x => x.StateId == stateId).ToList();
            return Ok(city);
        }
    }
}

Now, our WebAPI code is ready. Let's test both of the methods, one by one. 

1. GetState() Method
   
   
   
   
2. GetCity(intstateId) Method
   
   
   

So, as we can see, both of our methods are returning data properly. Now, it is time to code in AngularJS to call these methods into UI.

Script.js

vartestApp = angular
    .module("testModule", [])
    .controller("testController", function($scope, $http) {
        $http.get('http://localhost:50623/api/state/getstates').then(function(response) {
            $scope.states = response.data;
            $scope.stateChange($scope.states[0].StateId);
        });

        $scope.stateChange = function(stateId) {
            $http.get('http://localhost:50623/api/city/getcity', {
                params: {
                    stateId: stateId
                }
            }).then(function(response) {
                $scope.city = response.data;
            });
        }
    });

Now, let's understand the code line by line.

$http.get('http://localhost:50623/api/home/getstates').then(function(response)
 {
    $scope.states = response.data;
    $scope.stateChange($scope.states[0].StateId);
});

1. In the first line, you can see that $http.get sends request to URL and in response, we have a model variable state which will get the list of states.
   
   
2. In the 3rd line, $scope.stateChange($scope.states[0].stateId) is a function, which send stateId of first state which is on the list of dropdownlist, so we can get the cities of selected states automatically. 

$scope.stateChange = function(stateId) {
        $http.get('http://localhost:50623/api/city/getcity', {
            params: {
                stateId: stateId
            }
        }).then(
            function(response) {
                $scope.city = response.data;
            });

This code will send request through URL and selected stateId. In response, we will get the list of cities. Now, it is time to bind the DropDownList into UI.

index.html

<!DOCTYPEhtml>
<htmlng-apphtmlng-app="testModule">

    <head>
        <scriptsrcscriptsrc="Scripts/angular.min.js">
            </script>
            <scriptsrcscriptsrc="Scripts/js/Script.js">
                </script>
                <title></title>
                <metacharsetmetacharset="utf-8" />
    </head>

    <body>
        <divng-controllerdivng-controller="testController">
            <br/><br/><br/>
            <tablebordertableborder="1">
                <tr>
                    <td>
                        Name
                    </td>
                    <td>
                        <inputtypeinputtype="text" id="txtName" ng-model="name" />
                    </td>
                    <tr>
                        <td>
                            State
                        </td>
                        <td>
                            <selectng-modelselectng-model="stateId" ng-change="stateChange(stateId)">
                                <optiondata-ng-repeatoptiondata-ng-repeat="st in states" value="{{st.StateId}}">{{st.StateName}}</option>
                                    </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            City
                        </td>
                        <td>
                            <select>
<optionng-modeloptionng-model="cityId"data-ng-repeat="ct in city"value="{{ct.CityId}}">{{ct.City}}</option>
</select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Address
                        </td>
                        <td>
                            <inputtypeinputtype="text" id="txtAddress" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Phone
                        </td>
                        <td>
                            <inputtypeinputtype="text" id="txtPhone" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <inputtypeinputtype="button" id="bttnUpdate" value="Update" />
                        </td>
                    </tr>
                    </table>
                    </div>

    </body>

    </html>
    Now, you have to understatd, only two lines of <select> tag

<selectng-modelselectng-model="stateId"ng-change="stateChange(stateId)">
<optiondata-ng-repeatoptiondata-ng-repeat="st in states"value="{{st.StateId}}">{{st.StateName}}</option>
</select> and

    <select>
<optionng-modeloptionng-model="cityId"data-ng-repeat="ct in city"value="{{ct.CityId}}">{{ct.City}}</option>
</select>

In the first select tag, we have ng-model= "state" which will store the values of selected stateId and with the use of ng-change, request will be sent to Angular Controller metod (stateChange(stateId)) to send the list of cities.

The second <select> tag, will get this list and populate it, here also we use ng-model= "cityId".

Now, let's see the output.



As you can see, we are able to cascade between our DropDownLists very easily.

If you have any query related to this article, please send your valuable comments.