Multi-Select Cascading DropDownList using AngularJS in ASP.Net

Last Reply 5 months ago By dharmendr

Posted 5 months ago Modified on 5 months ago

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