Angular

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.

Visual Studio

Click on OK button and check the Solution Explorer.

Visual Studio

In this article, we have two tables.
  1. StateMaster Having the list of states.

    Visual Studio

  2. CityMaster List of cities, on the basis of their state.

    Visual Studio

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

Visual Studio

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

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

    Visual Studio

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

  1. usingAngularwithWebAPI.DbContext;  
  2. using System;  
  3. usingSystem.Collections.Generic;  
  4. usingSystem.Linq;  
  5. usingSystem.Web;  
  6. usingSystem.Web.Http; // This namespace is responsible for IHttpActionResult  
  7. usingSystem.Web.Mvc;  
  8.   
  9. namespaceAngularwithWebAPI.Controllers {  
  10.     publicclassStateController: ApiController {  
  11.         DbContext.StudentEntitiesstudentEntities = newDbContext.StudentEntities();  
  12.         publicIHttpActionResultGetStates() {  
  13.             var states = studentEntities.StateMasters.ToList();  
  14.             return Ok(states);  
  15.         }  
  16.     }  
  17. }  
Create a CityController and copy the below code. This code gives you the list of cities on the basis of stateid.
  1. using System;  
  2. usingSystem.Collections.Generic;  
  3. usingSystem.Linq;  
  4. using System.Net;  
  5. usingSystem.Net.Http;  
  6. usingSystem.Web.Http;  
  7.   
  8. namespaceAngularwithWebAPI.Controllers {  
  9.     publicclassCityController: ApiController {  
  10.         DbContext.StudentEntitiesstudentEntities = newDbContext.StudentEntities();  
  11.         publicIHttpActionResultGetCity(intstateId) {  
  12.             var city = studentEntities.CityMasters.Where(x => x.StateId == stateId).ToList();  
  13.             return Ok(city);  
  14.         }  
  15.     }  
  16. }  
Now, our WebAPI code is ready. Let's test both of the methods, one by one. 
  1. GetState() Method

    GetState() Method

  2. GetCity(intstateId) Method

    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

  1. vartestApp = angular  
  2.     .module("testModule", [])  
  3.     .controller("testController", function($scope, $http) {  
  4.         $http.get('http://localhost:50623/api/state/getstates').then(function(response) {  
  5.             $scope.states = response.data;  
  6.             $scope.stateChange($scope.states[0].StateId);  
  7.         });  
  8.   
  9.         $scope.stateChange = function(stateId) {  
  10.             $http.get('http://localhost:50623/api/city/getcity', {  
  11.                 params: {  
  12.                     stateId: stateId  
  13.                 }  
  14.             }).then(function(response) {  
  15.                 $scope.city = response.data;  
  16.             });  
  17.         }  
  18.     });  
Now, let's understand the code line by line.
  1. $http.get('http://localhost:50623/api/home/getstates').then(function(response)  
  2.  {  
  3.     $scope.states = response.data;  
  4.     $scope.stateChange($scope.states[0].StateId);  
  5. });   
  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. 
  1. $scope.stateChange = function(stateId) {  
  2.         $http.get('http://localhost:50623/api/city/getcity', {  
  3.             params: {  
  4.                 stateId: stateId  
  5.             }  
  6.         }).then(  
  7.             function(response) {  
  8.                 $scope.city = response.data;  
  9.             });  
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
  1. <!DOCTYPEhtml>  
  2. <htmlng-apphtmlng-app="testModule">  
  3.   
  4.     <head>  
  5.         <scriptsrcscriptsrc="Scripts/angular.min.js">  
  6.             </script>  
  7.             <scriptsrcscriptsrc="Scripts/js/Script.js">  
  8.                 </script>  
  9.                 <title></title>  
  10.                 <metacharsetmetacharset="utf-8" />  
  11.     </head>  
  12.   
  13.     <body>  
  14.         <divng-controllerdivng-controller="testController">  
  15.             <br/><br/><br/>  
  16.             <tablebordertableborder="1">  
  17.                 <tr>  
  18.                     <td>  
  19.                         Name  
  20.                     </td>  
  21.                     <td>  
  22.                         <inputtypeinputtype="text" id="txtName" ng-model="name" />  
  23.                     </td>  
  24.                     <tr>  
  25.                         <td>  
  26.                             State  
  27.                         </td>  
  28.                         <td>  
  29.                             <selectng-modelselectng-model="stateId" ng-change="stateChange(stateId)">  
  30.                                 <optiondata-ng-repeatoptiondata-ng-repeat="st in states" value="{{st.StateId}}">{{st.StateName}}</option>  
  31.                                     </select>  
  32.                         </td>  
  33.                     </tr>  
  34.                     <tr>  
  35.                         <td>  
  36.                             City  
  37.                         </td>  
  38.                         <td>  
  39.                             <select>  
  40. <optionng-modeloptionng-model="cityId"data-ng-repeat="ct in city"value="{{ct.CityId}}">{{ct.City}}</option>  
  41. </select>  
  42.                         </td>  
  43.                     </tr>  
  44.                     <tr>  
  45.                         <td>  
  46.                             Address  
  47.                         </td>  
  48.                         <td>  
  49.                             <inputtypeinputtype="text" id="txtAddress" />  
  50.                         </td>  
  51.                     </tr>  
  52.                     <tr>  
  53.                         <td>  
  54.                             Phone  
  55.                         </td>  
  56.                         <td>  
  57.                             <inputtypeinputtype="text" id="txtPhone" />  
  58.                         </td>  
  59.                     </tr>  
  60.                     <tr>  
  61.                         <td>  
  62.                             <inputtypeinputtype="button" id="bttnUpdate" value="Update" />  
  63.                         </td>  
  64.                     </tr>  
  65.                     </table>  
  66.                     </div>  
  67.   
  68.     </body>  
  69.   
  70.     </html>  
  71.     Now, you have to understatd, only two lines of <select> tag  
  72.   
  73. <selectng-modelselectng-model="stateId"ng-change="stateChange(stateId)">  
  74. <optiondata-ng-repeatoptiondata-ng-repeat="st in states"value="{{st.StateId}}">{{st.StateName}}</option>  
  75. </select> and  
  76.   
  77.     <select>  
  78. <optionng-modeloptionng-model="cityId"data-ng-repeat="ct in city"value="{{ct.CityId}}">{{ct.City}}</option>  
  79. </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.

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. 
Ebook Download
View all
Learn
View all
Membership not found