Hi rani,
Check this example. Now please take its reference and correct your code.
Database
For this example i have used Countries, State and City tables.
You can download the database table SQL by clicking the download link below.
Download SQL file
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.directive('multiselectDropdown', function () {
return {
restrict: 'E',
scope: {
model: '=',
options: '='
},
template:
"<div class='btn-group' data-ng-class='{open: open}' style='width: 200px;'>" +
"<button type='button' class='btn btn-small' style='width: 160px;height: 30px;'>---Select---</button>" +
"<button type='button' class='btn btn-small dropdown-toggle' data-ng-click='openDropdown()' style='width: 40px;height: 30px;' ><span class='caret'></span></button>" +
"<ul class='dropdown-menu' aria-labelledby='dropdownMenu' style='position: absolute;'>" +
"<li style='cursor:pointer;' data-ng-repeat='option in options'><a data-ng-click='toggleSelectItem(option)'><span data-ng-class='getClassName(option)' aria-hidden='true'></span> {{option.name}}</a></li>" +
"</ul></div>",
controller: function ($scope) {
$scope.openDropdown = function () {
$scope.open = !$scope.open;
};
$scope.selectAll = function () {
$scope.model = [];
angular.forEach($scope.options, function (item, index) {
$scope.model.push(item);
});
};
$scope.deselectAll = function () {
$scope.model = [];
};
$scope.toggleSelectItem = function (option) {
var intIndex = -1;
angular.forEach($scope.model, function (item, index) {
if (item.id == option.id) {
intIndex = index;
}
});
if (intIndex >= 0) {
$scope.model.splice(intIndex, 1);
} else {
$scope.model.push(option);
}
};
$scope.getClassName = function (option) {
var varClassName = 'glyphicon glyphicon-unchecked';
angular.forEach($scope.model, function (item, index) {
if (item.id == option.id) {
varClassName = 'glyphicon glyphicon-check';
}
});
return (varClassName);
};
}
}
});
app.controller('MyController', ['$scope', '$http', '$window', function ($scope, $http, $window) {
$scope.SelectedCountries = [];
$scope.SelectedStates = [];
$scope.SelectedCities = [];
$scope.LoadDropDown = function (type, value) {
$http({
method: "POST",
url: "Default.aspx/AjaxMethod",
dataType: 'json',
data: '{type: "' + type + '", value: ' + value + '}',
headers: { "Content-Type": "application/json" }
}).success(function (data, status) {
$scope.Countries = [];
$scope.States = [];
$scope.Cities = [];
switch (type) {
default:
angular.forEach(data.d, function (item, index) {
$scope.Countries.push({ id: item.Value, name: item.Text });
});
break;
case "CountryId":
if (data.d.length > 0) {
angular.forEach(data.d, function (item, index) {
$scope.States.push({ id: item.Value, name: item.Text });
});
}
break;
case "StateId":
if (data.d.length > 0) {
angular.forEach(data.d, function (item, index) {
$scope.Cities.push({ id: item.Value, name: item.Text });
});
}
break;
}
}).error(function (data, status) {
$window.alert(data.Message);
});
};
// Load Country DropDownList.
$scope.LoadDropDown('', 0);
// Country DropDown Change.
$scope.CountryChange = function () {
if ($('#ddlCountries').find('div').attr('class') == "btn-group") {
var selectedCountryId = '"';
angular.forEach($scope.SelectedCountries, function (item, index) {
selectedCountryId += item.id + ',';
});
selectedCountryId += '"';
$scope.LoadDropDown('CountryId', selectedCountryId);
}
else {
$scope.LoadDropDown('', 0);
}
}
// State DropDown Change.
$scope.StateChange = function () {
if ($('#ddlStates').find('div').attr('class') == "btn-group") {
var selectedStateId = '"';
angular.forEach($scope.SelectedStates, function (item, index) {
selectedStateId += item.id + ',';
});
selectedStateId += '"';
$scope.LoadDropDown('StateId', selectedStateId);
}
else {
var selectedCountryId = '"';
angular.forEach($scope.SelectedCountries, function (item, index) {
selectedCountryId += item.id + ',';
});
selectedCountryId += '"';
$scope.LoadDropDown('CountryId', selectedCountryId);
}
}
$scope.Save = function () {
var country = "Country\n\r";
angular.forEach($scope.SelectedCountries, function (item, index) {
country += "Id : " + item.id + "\tName : " + item.name + "\n\r";
});
var state = "State\n\r";
angular.forEach($scope.SelectedStates, function (item, index) {
state += "Id : " + item.id + "\tName : " + item.name + "\n\r";
});
var city = "City\n\r";
angular.forEach($scope.SelectedCities, function (item, index) {
city += "Id : " + item.id + "\tName : " + item.name + "\n\r";
});
var message = country + "\n\r\n\r" + state + "\n\r\n\r" + city;
$window.alert(message);
}
} ])
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="MyApp" ng-controller="MyController">
<div class="container">
<div class="form-group">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Country :</td>
<td>
<multiselect-dropdown id="ddlCountries" model="SelectedCountries" options="Countries"
ng-click="CountryChange()"></multiselect-dropdown>
</td>
</tr>
<tr>
<td>State :</td>
<td>
<multiselect-dropdown id="ddlStates" model="SelectedStates" options="States" ng-click="StateChange()"></multiselect-dropdown>
</td>
</tr>
<tr>
<td>City :</td>
<td>
<multiselect-dropdown id="ddlCities" model="SelectedCities" options="Cities"></multiselect-dropdown>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Save" ng-click="Save()" />
</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>
Namespaces
C#
using System.Collections.Generic;
using System.Linq;
VB.Net
Imports System.Collections.Generic
Imports System.Linq
Code
C#
[System.Web.Services.WebMethod]
public static List<ListItem> AjaxMethod(string type, string value)
{
List<ListItem> items = new List<ListItem>();
CascadingEntities entities = new CascadingEntities();
switch (type)
{
default:
var countries = entities.Countries.ToList();
if (countries.Count > 0)
{
foreach (var country in countries)
{
items.Add(new ListItem { Text = country.CountryName, Value = country.CountryId.ToString() });
}
}
break;
case "CountryId":
for (int i = 0; i < value.Split(',').Count(); i++)
{
if (!string.IsNullOrEmpty(value.Split(',')[i]))
{
int val = Convert.ToInt32(value.Split(',')[i]);
var states = entities.States.Where(s => s.CountryId == val).ToList();
if (states.Count > 0)
{
foreach (var state in states)
{
items.Add(new ListItem { Text = state.StateName, Value = state.StateId.ToString() });
}
}
}
}
break;
case "StateId":
for (int i = 0; i < value.Split(',').Count(); i++)
{
if (!string.IsNullOrEmpty(value.Split(',')[i]))
{
int val = Convert.ToInt32(value.Split(',')[i]);
var cities = entities.Cities.Where(c => c.StateId == val).ToList();
if (cities.Count > 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 String) 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"
For i As Integer = 0 To value.Split(","c).Count() - 1
If Not String.IsNullOrEmpty(value.Split(","c)(i)) Then
Dim val As Integer = Convert.ToInt32(value.Split(","c)(i))
Dim states = entities.States.Where(Function(s) s.CountryId = val).ToList()
If states.Count > 0 Then
For Each state In states
items.Add(New ListItem With {.Text = state.StateName, .Value = state.StateId.ToString()})
Next
End If
End If
Next
Case "StateId"
For i As Integer = 0 To value.Split(","c).Count() - 1
If Not String.IsNullOrEmpty(value.Split(","c)(i)) Then
Dim val As Integer = Convert.ToInt32(value.Split(","c)(i))
Dim cities = entities.Cities.Where(Function(c) c.StateId = val).ToList()
If cities.Count > 0 Then
For Each city In cities
items.Add(New ListItem With {.Text = city.CityName, .Value = city.CityId.ToString()})
Next
End If
End If
Next
Case Else
Dim countries = entities.Countries.ToList()
If countries.Count > 0 Then
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
