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.

StateMaster Having the list of states.
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.

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.

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.

GetState() 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

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);
});

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.
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.

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.

3 Comments

Join the conversation! Your thoughts help the community grow.

Sourabh Mishra9y ago
Watch in Video Format, click on the below link https://www.youtube.com/watch?v=Bw9PrDykDxI
Satish Kumar Vadlavalli10y ago
And only suggestion is you should make city as null in stateChange method
Satish Kumar Vadlavalli10y ago
Nice share