Hi rani,
Using the below articles i have created the example.
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {
$scope.Save = function () {
var countryId = $scope.SelectedCountryId;
var stateId = $scope.SelectedStateId;
var cityId = $scope.SelectedCityId;
var countryName = $.grep($scope.Countries, function (country) { return country.Value == countryId; })[0].Text;
var stateName = $.grep($scope.States, function (state) { return state.Value == stateId; })[0].Text;
var cityName = $.grep($scope.Cities, function (city) { return city.Value == cityId; })[0].Text;
var message = "Country Id : " + countryId + "\tCountry Name : " + countryName + "\n\r";
message += "State Id : " + stateId + "\tState Name : " + stateName + "\n\r";
message += "City Id : " + cityId + "\tCity Name : " + cityName + "\n\r"
$window.alert(message);
}
$scope.LoadDropDown = function (type, value) {
switch (type) {
default:
$scope.Countries = null;
break;
case "CountryId":
$scope.States = null;
$scope.Cities = null;
break;
case "StateId":
$scope.Cities = null;
break;
}
$http({
method: "POST",
url: "Default.aspx/AjaxMethod",
dataType: 'json',
data: '{type: "' + type + '", value: ' + value + '}',
headers: { "Content-Type": "application/json" }
}).success(function (data, status) {
switch (type) {
default:
$scope.Countries = data.d;
$scope.SelectedCountryId = $scope.Countries[0].Value;
break;
case "CountryId":
if (data.d.length > 0) {
$scope.States = data.d;
$scope.SelectedStateId = $scope.States[0].Value;
}
break;
case "StateId":
if (data.d.length > 0) {
$scope.Cities = data.d;
$scope.SelectedCityId = $scope.Cities[0].Value;
}
break;
}
}).error(function (data, status) {
$window.alert(data.Message);
});
};
$scope.LoadDropDown('', 0);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="MyApp" ng-controller="MyController">
<table class="table table-responsive">
<tr>
<td>Country:</td>
<td>
<select ng-model="SelectedCountryId" ng-options="country.Value as country.Text for country in Countries"
ng-change="LoadDropDown('CountryId',SelectedCountryId)" class="form-control">
</select>
</td>
</tr>
<tr>
<td>State:</td>
<td>
<select ng-model="SelectedStateId" ng-options="state.Value as state.Text for state in States"
ng-change="LoadDropDown('StateId',SelectedStateId)" class="form-control">
</select>
</td>
</tr>
<tr>
<td>City:</td>
<td>
<select ng-model="SelectedCityId" ng-options="city.Value as city.Text for city in Cities" class="form-control"></select>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" name="save" value="Save" ng-click="Save()" class="btn btn-primary" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
Code
C#
[System.Web.Services.WebMethod]
public static List<ListItem> AjaxMethod(string type, int value)
{
List<ListItem> items = new List<ListItem>();
CascadingEntities entities = new CascadingEntities();
switch (type)
{
default:
var countries = entities.Countries.ToList();
if (countries.Count > 0)
{
items.Add(new ListItem { Text = "Select Country", Value = "0" });
foreach (var country in countries)
{
items.Add(new ListItem { Text = country.CountryName, Value = country.CountryId.ToString() });
}
}
break;
case "CountryId":
var states = entities.States.Where(s => s.CountryId == value).ToList();
if (states.Count > 0)
{
items.Add(new ListItem { Text = "Select State", Value = "0" });
foreach (var state in states)
{
items.Add(new ListItem { Text = state.StateName, Value = state.StateId.ToString() });
}
}
break;
case "StateId":
var cities = entities.Cities.Where(c => c.StateId == value).ToList();
if (cities.Count > 0)
{
items.Add(new ListItem { Text = "Select City", Value = "0" });
foreach (var city in cities)
{
items.Add(new ListItem { Text = city.CityName, Value = city.CityId.ToString() });
}
}
break;
}
return items;
}
VB.Net
<System.Web.Services.WebMethod()>
Public Shared Function AjaxMethod(ByVal type As String, ByVal value As Integer) As List(Of ListItem)
Dim items As List(Of ListItem) = New List(Of ListItem)()
Dim entities As CascadingEntities = New CascadingEntities()
Select Case type
Case "CountryId"
Dim states = entities.States.Where(Function(s) s.CountryId = value).ToList()
If states.Count > 0 Then
items.Add(New ListItem With {.Text = "Select State", .Value = "0"})
For Each state In states
items.Add(New ListItem With {.Text = state.StateName, .Value = state.StateId.ToString()})
Next
End If
Case "StateId"
Dim cities = entities.Cities.Where(Function(c) c.StateId = value).ToList()
If cities.Count > 0 Then
items.Add(New ListItem With {.Text = "Select City", .Value = "0"})
For Each city In cities
items.Add(New ListItem With {.Text = city.CityName, .Value = city.CityId.ToString()})
Next
End If
Case Else
Dim countries = entities.Countries.ToList()
If countries.Count > 0 Then
items.Add(New ListItem With {.Text = "Select Country", .Value = "0"})
For Each country In countries
items.Add(New ListItem With {.Text = country.CountryName, .Value = country.CountryId.ToString()})
Next
End If
End Select
Return items
End Function
Screenshot
