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

Last Reply 3 months ago By dharmendr

Posted 3 months 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

Posted 3 months 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