Display (Show) Loading GIF Image when populating cascading ListBox in ASP.Net MVC

Last Reply one year ago By dharmendr

Posted one year ago

hello,

Implement Cascading (Dependent) ListBox in ASP.Net MVC 

i am using this snippet on each post back how to show a modal popup to user to wait while its process so user know that some thing is processing

You are viewing reply posted by: dharmendr one year ago.
Posted one year ago

Hi nauna,

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

Refering the below article i have created the example.

Implement Cascading (Dependent) DropDownLists without jQuery in ASP.Net MVC

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

Model

public class CascadingModel
{
    public CascadingModel()
    {
        this.Countries = new List<SelectListItem>();
        this.States = new List<SelectListItem>();
        this.Cities = new List<SelectListItem>();
    }

    public List<SelectListItem> Countries { get; set; }
    public List<SelectListItem> States { get; set; }
    public List<SelectListItem> Cities { get; set; }

    public int[] CountryId { get; set; }
    public int[] StateId { get; set; }
    public int[] CityId { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        Cascading_ddlEntities entities = new Cascading_ddlEntities();
        CascadingModel model = new CascadingModel();
        foreach (var country in entities.Countries)
        {
            model.Countries.Add(new SelectListItem { Text = country.CountryName, Value = country.CountryId.ToString() });
        }
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(int? countryId, int? stateId, int? cityId)
    {
        CascadingModel model = new CascadingModel();
        Cascading_ddlEntities entities = new Cascading_ddlEntities();
        foreach (var country in entities.Countries)
        {
            model.Countries.Add(new SelectListItem { Text = country.CountryName, Value = country.CountryId.ToString() });
        }

        if (countryId.HasValue)
        {
            var states = (from state in entities.States
                            where state.CountryId == countryId.Value
                            select state).ToList();
            foreach (var state in states)
            {
                model.States.Add(new SelectListItem { Text = state.StateName, Value = state.StateId.ToString() });
            }

            if (stateId.HasValue)
            {
                var cities = (from city in entities.Cities
                                where city.StateId == stateId.Value
                                select city).ToList();
                foreach (var city in cities)
                {
                    model.Cities.Add(new SelectListItem { Text = city.CityName, Value = city.CityId.ToString() });
                }
            }
        }

        return View(model);
    }
}

View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<_Cascading_ListBox_MVC.Models.CascadingModel>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
    <style type="text/css">
        .modalBackground
        {
            position: fixed;
            top: 0;
            left: 0;
            background-color: black;
            z-index: 99;
            opacity: 0.8;
            filter: alpha(opacity=80);
            -moz-opacity: 0.8;
            min-height: 100%;
            width: 100%;
        }
        .loading
        {
            font-family: Arial;
            font-size: 10pt;
            border: 5px solid #67CFF5;
            width: 200px;
            height: 100px;
            display: none;
            position: fixed;
            background-color: White;
            z-index: 999;
        }
    </style>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#divProcessing").hide();
            if ($("#StateId option").length > 1) {
                $("#StateId").removeAttr("disabled");
            }
            if ($("#CityId option").length > 1) {
                $("#CityId").removeAttr("disabled");
            }
            $('#btnSubmit').on('click', function () {
                if ($("#CountryId").val() != "" && $("#StateId").val() != "" && $("#CityId").val() != "") {
                    var message = "Country: " + $("#CountryId option:selected").text();
                    message += "\nState: " + $("#StateId option:selected").text();
                    message += "\nCity: " + $("#CityId option:selected").text();
                    alert(message);
                }
            });
            var submit = false;
            $("form").on("submit", function (e) {
                var modal = $('<div />');
                modal.addClass("modalBackground");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({ top: top, left: left });
                setTimeout(function () {
                    submit = true;
                    $(".loading").hide();
                    $('form').submit();
                }, 1000);
                if (!submit) {
                    e.preventDefault();
                }
            });
        });
    </script>
</head>
<body>
    <div class="loading" align="center">
        Loading. Please wait.<br /><br />
        <img alt="" src="../../loader.gif" />
    </div>
    <center>
        <%using (Html.BeginForm("Index", "Home", FormMethod.Post))
          { %>
        Country : <%:Html.ListBoxFor(m => m.CountryId, Model.Countries, new { @class = "form-control", onchange = "$('form').submit();" })%><br />
        State : <%:Html.ListBoxFor(m => m.StateId, Model.States, new { @class = "form-control", onchange = "$('form').submit();", disabled = "disabled" })%><br />
        City : <%:Html.ListBoxFor(m => m.CityId, Model.Cities, new { @class = "form-control", disabled = "disabled" })%><br />
        <input id="btnSubmit" type="submit" value="Submit" class="btn btn-primary" />
        <% }%>
    </center>
</body>
</html>

Screenshot