Multi-Select Cascading DropDownList using AngularJS in ASP.Net

Last Reply one year ago By dharmendr

Posted one year ago Modified on one year 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