Multiple Select (Multi-select) Cascading ListBox with Check Uncheck All using AngularJS in ASP.Net

Hi telldurges,

Check this example. Now please take its reference and correct your code.

Database

For this example i have used Countries, States tables. You can download the database table SQL from the below article.

Implement Cascading Autocomplete TextBoxes from database using jQuery in ASP.Net

HTML

<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope, $http) {
        $scope.Countries = [];
        $scope.States = [];
        PopulateAllCountries($scope, $http);
        $scope.CheckUncheckAllCountries = function () {
            for (var i = 0; i < $scope.Countries.length; i++) {
                $scope.Countries[i].Selected = $scope.IsAllCountryChecked;
            }
        };

        $scope.CheckUncheckAllCountry = function () {
            $scope.IsAllCountryChecked = true;
            for (var i = 0; i < $scope.Countries.length; i++) {
                if (!$scope.Countries[i].Selected) {
                    $scope.IsAllCountryChecked = false;
                    break;
                }
            };

            var selectedCountries = new Array();
            for (var i = 0; i < $scope.Countries.length; i++) {
                if ($scope.Countries[i].Selected) {
                    selectedCountries.push($scope.Countries[i].Value);
                }
            }
            PopulateAllStates($scope, $http, selectedCountries);
        };

        $scope.CheckUncheckAllStates = function () {
            for (var i = 0; i < $scope.States.length; i++) {
                $scope.States[i].Selected = $scope.IsAllStateChecked;
            }
        };
        $scope.CheckUncheckAllState = function () {
            $scope.IsAllStateChecked = true;
            for (var i = 0; i < $scope.States.length; i++) {
                if (!$scope.States[i].Selected) {
                    $scope.IsAllStateChecked = false;
                    break;
                }
            };
        };
    });

    function PopulateAllCountries($scope, $http) {
        $http.post("Default.aspx/GetAllCountries", { headers: { 'Content-Type': 'application/json'} })
        .then(function (response) {
            $scope.Countries = response.data.d;
        });
    }

    function PopulateAllStates($scope, $http, CountryId) {
        $http.post("Default.aspx/GetAllStates", { countryId: CountryId }, { headers: { 'Content-Type': 'application/json'} })
        .then(function (response) {
            $scope.States = response.data.d;
        });
    }
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <div class="widget-body">
        <div class="widget-main">
            <div class="row">
                <div class="col-xs-6 col-sm-4">
                    <label for="ddlselectstate">
                        Select Country<span class="required red">*</span>
                    </label>
                    <div style="width: 100%; height: 100%" class="form-control">
                        <input type="checkbox" ng-model="IsAllCountryChecked" ng-change="CheckUncheckAllCountries();CheckUncheckAllCountry();" />
                        <span ng-if="Countries != ''">All</span>
                        <div ng-repeat="x in Countries">
                            <input id="ddlCountries" type="checkbox" ng-model="x.Selected" ng-change="CheckUncheckAllCountry()" />
                            {{x.Text}}
                        </div>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-4">
                    <label for="ddlselectdistt">
                        Select State<span class="required red">*</span>
                    </label>
                    <div style="width: 100%; height: 100%; min-height: 100px" class="form-control">
                        <input type="checkbox" ng-model="IsAllStateChecked" ng-change="CheckUncheckAllStates();"
                            ng-show="States !=''" />
                        <span ng-show="States != ''">All</span>
                        <div ng-repeat="x in States">
                            <div ng-if="x.Value != ''">
                                <input id="ddlStates" type="checkbox" ng-model="x.Selected" ng-change="CheckUncheckAllState()" />
                                {{x.Text}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Namespaces

C#

using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services;
using System.Web.UI.WebControls;

VB.Net

Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Services
Imports System.Web.UI.WebControls

Code

C#

[WebMethod]
public static List<ListItem> GetAllCountries()
{
    string query = "SELECT CountryId,CountryName FROM Countries";
    return GetData(query, "CountryId", "CountryName");
}

[WebMethod]
public static List<ListItem> GetAllStates(int[] countryId)
{
    if (countryId.Length > 0)
    {
        string query = "SELECT StateId,StateName FROM States WHERE CountryId IN (" + string.Join(",", countryId) + ")";
        return GetData(query, "StateId", "StateName");
    }
    else
    {
        return new List<ListItem>();
    }
}

private static List<ListItem> GetData(string query, string value, string text)
{
    List<ListItem> listItems = new List<ListItem>();
    using (SqlConnection con = new SqlConnection())
    {
        con.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand(query))
        {
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                if (sdr.HasRows)
                {
                    while (sdr.Read())
                    {
                        listItems.Add(new ListItem { Value = sdr[value].ToString(), Text = sdr[text].ToString(), Selected = false });
                    }
                }
            }
            con.Close();
        }

        return listItems;
    }
}

VB.Net

<WebMethod()>
Public Shared Function GetAllCountries() As List(Of ListItem)
    Dim query As String = "SELECT CountryId,CountryName FROM Countries"
    Return GetData(query, "CountryId", "CountryName")
End Function

<WebMethod()>
Public Shared Function GetAllStates(ByVal countryId As Integer()) As List(Of ListItem)
    If countryId.Length > 0 Then
        Dim query As String = "SELECT StateId,StateName FROM States WHERE CountryId IN (" & String.Join(",", countryId) & ")"
        Return GetData(query, "StateId", "StateName")
    Else
        Return New List(Of ListItem)()
    End If
End Function

Private Shared Function GetData(ByVal query As String, ByVal value As String, ByVal text As String) As List(Of ListItem)
    Dim listItems As List(Of ListItem) = New List(Of ListItem)()
    Using con As SqlConnection = New SqlConnection()
        con.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using cmd As SqlCommand = New SqlCommand(query)
            cmd.Connection = con
            con.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                If sdr.HasRows Then
                    While sdr.Read()
                        listItems.Add(New ListItem With {
                            .Value = sdr(value).ToString(),
                            .Text = sdr(text).ToString(),
                            .Selected = False
                        })
                    End While
                End If
            End Using
            con.Close()
        End Using

        Return listItems
    End Using
End Function

Screenshot