Implement Multiselect Cascading (Dependent) ListBox with CheckBox using ADO.Net in ASP.Net MVC

Hi onais,

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 from the below article.

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

StoredProcedure and Function

CREATE FUNCTION [dbo].[SplitString]
(    
      @Input NVARCHAR(MAX),
      @Character CHAR(1)
)
RETURNS @Output TABLE (
      Item NVARCHAR(1000)
)
AS
BEGIN
      DECLARE @StartIndex INT, @EndIndex INT
 
      SET @StartIndex = 1
      IF SUBSTRING(@Input, LEN(@Input) - 1, LEN(@Input)) <> @Character
      BEGIN
            SET @Input = @Input + @Character
      END
 
      WHILE CHARINDEX(@Character, @Input) > 0
      BEGIN
            SET @EndIndex = CHARINDEX(@Character, @Input)
           
            INSERT INTO @Output(Item)
            SELECT SUBSTRING(@Input, @StartIndex, @EndIndex - 1)
           
            SET @Input = SUBSTRING(@Input, @EndIndex + 1, LEN(@Input))
      END
 
      RETURN
END
GO
CREATE PROCEDURE [dbo].[GetCountries]
AS
BEGIN
      SELECT CountryId,CountryName 
	  FROM Countries
END
GO
CREATE PROCEDURE [dbo].[GetStates]
	@CountryIds VARCHAR(100)
AS
BEGIN
      SELECT StateId,StateName 
	  FROM States
      WHERE CountryId IN(
            SELECT CAST(Item AS INTEGER)
            FROM dbo.SplitString(@CountryIds, ',')
      )
END
GO
CREATE PROCEDURE [dbo].[GetCities]
      @StateIds VARCHAR(100)
AS
BEGIN
      SELECT CityId, 
	         CityName 
	  FROM Cities
      WHERE StateId IN(
            SELECT CAST(Item AS INTEGER)
            FROM dbo.SplitString(@StateIds, ',')
      )
END

Namespaces

using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Mvc;

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        SqlCommand cmd = new SqlCommand();
        string query = "GetCountries";
        cmd.CommandText = query;
        cmd.CommandType = CommandType.StoredProcedure;
        List<SelectListItem> CountryList = GetItems(cmd);
        ViewBag.CountryList = CountryList;
        return View();
    }

    [HttpPost]
    public ActionResult Index(FormCollection formCollection)
    {
        string selectedCountries = formCollection["Country"];
        string selectedStates = formCollection["State"];
        string selectedCities = formCollection["City"];
        // Code to insert selected values into database.
        return new EmptyResult();
    }

    public JsonResult GetStates(string id)
    {
        SqlCommand cmd = new SqlCommand();
        string query = "GetStates";
        cmd.Parameters.AddWithValue("@CountryIds", id);
        cmd.CommandText = query;
        cmd.CommandType = CommandType.StoredProcedure;
        List<SelectListItem> statesList = GetItems(cmd);

        return Json(statesList, JsonRequestBehavior.AllowGet);
    }

    public JsonResult GetCities(string id)
    {
        SqlCommand cmd = new SqlCommand();
        string query = "GetCities";
        cmd.Parameters.AddWithValue("@StateIds", id);
        cmd.CommandText = query;
        cmd.CommandType = CommandType.StoredProcedure;
        List<SelectListItem> citiesList = GetItems(cmd);

        return Json(citiesList, JsonRequestBehavior.AllowGet);
    }

    private List<SelectListItem> GetItems(SqlCommand cmd)
    {
        List<SelectListItem> listItems = new List<SelectListItem>();
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            cmd.Connection = conn;
            conn.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    listItems.Add(new SelectListItem { Text = sdr[1].ToString(), Value = sdr[0].ToString() });
                }
            }
            conn.Close();
        }

        return listItems;
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            $('#Country').multiselect({
                selectAllValue: 'multiselect-all',
                enableCaseInsensitiveFiltering: true,
                enableFiltering: true,
                maxHeight: '300',
                buttonWidth: '235',
                numberDisplayed: 2,
                nonSelectedText: 'Select Country',
            });

            $('#State').multiselect({
                selectAllValue: 'multiselect-all',
                enableCaseInsensitiveFiltering: true,
                enableFiltering: true,
                maxHeight: '300',
                buttonWidth: '235',
                numberDisplayed: 2,
                nonSelectedText: 'Select State',
            });

            $('#City').multiselect({
                selectAllValue: 'multiselect-all',
                enableCaseInsensitiveFiltering: true,
                enableFiltering: true,
                maxHeight: '300',
                buttonWidth: '235',
                numberDisplayed: 2,
                nonSelectedText: 'Select City',
            });
            $("#Country").change(function () {
                var countryId = $("#Country").val();
                $.ajax({
                    type: 'GET',
                    url: '/Home/GetStates/' + countryId,
                    success: function (result) {
                        $("#State").empty();
                        $("#City").empty();
                        $('#State').multiselect('destroy');

                        $.each(result, function (i, state) {
                            $("#State").append('<option value="' + state.Value + '">' + state.Text + '</option>');
                        });
                        $('#State').multiselect({
                            selectAllValue: 'multiselect-all',
                            enableCaseInsensitiveFiltering: true,
                            enableFiltering: true,
                            maxHeight: '300',
                            buttonWidth: '235',
                            numberDisplayed: 2,
                            nonSelectedText: 'Select State',
                        });
                    }
                });
            });

            $("#State").change(function () {
                $.ajax({
                    type: 'GET',
                    url: '/Home/GetCities/' + $("#State").val(),
                    success: function (result) {
                        $("#City").empty();
                        $('#City').multiselect('destroy');

                        $.each(result, function (i, state) {
                            $("#City").append('<option value="' + state.Value + '">' + state.Text + '</option>');
                        });
                        $('#City').multiselect({
                            selectAllValue: 'multiselect-all',
                            enableCaseInsensitiveFiltering: true,
                            enableFiltering: true,
                            maxHeight: '300',
                            buttonWidth: '235',
                            numberDisplayed: 2,
                            nonSelectedText: 'Select City',
                        });
                    }
                });
            });
        });
    </script>

</head>
<body>
    <div align="center">
        <h3>Example For Cascading DropdownList...</h3>
        @using (Html.BeginForm("Index", "Home", FormMethod.Post))
        {
            <p>
                <label>Select Country : @Html.ListBox("Country", ViewBag.CountryList as List<SelectListItem>, "---Select---") </label>
            </p>
            <p>
                <label>
                    Select State : @Html.ListBox("State", new SelectList(new string[] { }), "---Select---")
                </label>
            </p>
            <p>
                <label>Select City : @Html.ListBox("City", new SelectList(new string[] { }), "---Select---") </label>
            </p>
            <br />
            <input id="btnSubmit" type="submit" value="Submit" />
        }
    </div>
</body>
</html>

Screenshot

Form Selection

Selected Values After Submit Button click