locked
Loading progress or Please Wait Pop-Up in MVC View DropDown List RRS feed

  • Question

  • User1151703306 posted

    Hello all,

    I have developed a web application using MVC architecture. 

    I populate a child dropdown list depending on each new value as values are selected in the parent's DropDown List.

    I want a Loading/Please-wait kind of pop-up to be shown and exited automatically when the ActionResult returns the view. 

    Please can you help me?

    My code follow

           <script src="Scripts/jquery-1.10.2.js"></script>
    
            <script type="text/javascript">
    
               $(function () {
                    $("select").each(function () {
                        if ($(this).find("option").length <= 1) {
                            $(this).attr("disabled", "disabled");
                        }
                    });
    
                    $("select").change(function () {
                        var value = 0;
                        if ($(this).val() != "") {
                            value = $(this).val();
                        }
                        var id = $(this).attr("id");
    
                        $.ajax({
                            type: "POST",
                            url: "/Home/AjaxMethod",
                            data: '{type: "' + id + '", value: "' + value + '"}',
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (response) {
                                var dropDownId;
                                var list;
                                switch (id) {
    
                                    case "CountryId":
                                        list = response.States;
    
                                        DisableDropDown("#TicketId");
                                        DisableDropDown("#StateId");
                                        DisableDropDown("#CityId");
    
                                        PopulateDropDown("#StateId", list);
    
                                        dropDownId = "#TicketId";
                                        list = response.Ticket;
                                        PopulateDropDown("#TicketId", list);
    
                                        break;
    
                                    case "StateId":
                                        dropDownId = "#CityId";
                                        list = response.Cities;
                                        DisableDropDown("#CityId");
                                        PopulateDropDown("#CityId", list);
    
                                        dropDownId = "#CityId2";
                                        list = response.Cities2;
                                        PopulateDropDown("#CityId2", list);
    
                                        $("#GPS").val(response.GPS);
    
                                        break;
                                }
    
                            },
                            failure: function (response) {
                                alert(response.responseText);
                            },
                            error: function (response) {
                                alert(response.responseText);
                            }
                        });
                    });
                });
    
                function DisableDropDown(dropDownId) {
                    $(dropDownId).attr("disabled", "disabled");
                    $(dropDownId).empty().append('<option selected="selected" value="">[ ===  select === ]</option>');
                }
    
                function PopulateDropDown(dropDownId, list) {
                    if (list != null && list.length > 0) {
                        $(dropDownId).removeAttr("disabled");
                        $.each(list, function () {
                            $(dropDownId).append($("<option></option>").val(this['Value']).html(this['Text']));
                        });
                    }
                }   
    
            </script>                                               

    Monday, December 28, 2020 3:37 PM

Answers

  • User1686398519 posted

    Hi Golia, 

    According to your needs, I wrote an example, you can refer to it.

    1. To facilitate the test, I simulated some data, you can modify it according to your actual situation.
    2. You can customize a Loader and then display it in the ajax request.
      • You can create a css file in the Content directory, and then reference it on the view.
      • I set a delay to display Loader. You can also show and hide Loader immediately.
      • You can also click this link to view: How TO-CSS Loader.

    Controller

        public class SpinnersTestController : Controller
        {
            // GET: SpinnersTest
            public ActionResult Index()
            {
                List<SelectListItem> itemlist = new List<SelectListItem>();
                for(int i = 0; i < 3; i++)
                {
                    itemlist.Add(new SelectListItem {Text="Text"+i.ToString(),Value=i.ToString() });
                }
                ViewBag.Parent = new SelectList(itemlist, "Value","Text");
                return View();
            }
            public ActionResult getchildren(int value=1)
            {
                List<SelectListItem> itemlistchildren = new List<SelectListItem>();
                //You can fill itemlistchildren based on query data from the database
                for (int i = value; i < value+3;i++)
                {
                    itemlistchildren.Add(new SelectListItem { Text = "Textchild" + i.ToString(), Value =i.ToString() });
                }
                return Json(itemlistchildren,JsonRequestBehavior.AllowGet);
            }
        }

    View

    <link href="~/css/CustomLoader.css" rel="stylesheet" />
    <div id="loader" style="display:none"></div>
    @Html.DropDownList("Parent", ViewBag.Parent as SelectList, new { @class = "form-control", id = "parent" })
    <select id="children" class="form-control"></select>
    @section scripts{
        <script>
            $(function () {
                changechildren();
            });
            $("#parent").change(function () {
                changechildren();
            });
            function changechildren() {
                $.ajax({
                    url: "@Url.Action("getchildren")",
                    data: { value: $("#parent").val() },
                    beforeSend: function () {
                        $("#loader").show();
                    },
                    success: function (data) {
                        $("#children").empty();
                        setTimeout(function () {
                            $.each(data, function (index, value) {
                                $("#children").append($("<option></option>").val(value.Value).html(value.Text));
                            });
                        }, 2000);
                    },
                    complete: function () {
                        setTimeout(function () {
                            $("#loader").hide();
                        }, 2000);
                    },
                });
            }
        </script>
    }

    CustomLoader.css

    #loader {
        ;
        left: 50%;
        top: 50%;
        z-index: 1;
        width: 120px;
        height: 120px;
        margin: -76px 0 0 -76px;
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #3498db;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }
    
        100% {
            -webkit-transform: rotate(360deg);
        }
    }
    
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
    
        100% {
            transform: rotate(360deg);
        }
    }
    /* Add animation to "page content" */
    .animate-bottom {
        ;
        -webkit-animation-name: animatebottom;
        -webkit-animation-duration: 1s;
        animation-name: animatebottom;
        animation-duration: 1s
    }
    
    @-webkit-keyframes animatebottom {
        from {
            bottom: -100px;
            opacity: 0
        }
    
        to {
            bottom: 0px;
            opacity: 1
        }
    }
    
    @keyframes animatebottom {
        from {
            bottom: -100px;
            opacity: 0
        }
    
        to {
            bottom: 0;
            opacity: 1
        }
    }

    Here is the result. 

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 29, 2020 9:30 AM

All replies

  • User-474980206 posted

    I’d move the disable to before the ajax call, and change the selected item text to loading.... you don’t identify which css framework you are using, so don’t know which pop up to suggest. Just call it before the ajax call, and dismiss on success or failure.

    Monday, December 28, 2020 9:20 PM
  • User1686398519 posted

    Hi Golia, 

    According to your needs, I wrote an example, you can refer to it.

    1. To facilitate the test, I simulated some data, you can modify it according to your actual situation.
    2. You can customize a Loader and then display it in the ajax request.
      • You can create a css file in the Content directory, and then reference it on the view.
      • I set a delay to display Loader. You can also show and hide Loader immediately.
      • You can also click this link to view: How TO-CSS Loader.

    Controller

        public class SpinnersTestController : Controller
        {
            // GET: SpinnersTest
            public ActionResult Index()
            {
                List<SelectListItem> itemlist = new List<SelectListItem>();
                for(int i = 0; i < 3; i++)
                {
                    itemlist.Add(new SelectListItem {Text="Text"+i.ToString(),Value=i.ToString() });
                }
                ViewBag.Parent = new SelectList(itemlist, "Value","Text");
                return View();
            }
            public ActionResult getchildren(int value=1)
            {
                List<SelectListItem> itemlistchildren = new List<SelectListItem>();
                //You can fill itemlistchildren based on query data from the database
                for (int i = value; i < value+3;i++)
                {
                    itemlistchildren.Add(new SelectListItem { Text = "Textchild" + i.ToString(), Value =i.ToString() });
                }
                return Json(itemlistchildren,JsonRequestBehavior.AllowGet);
            }
        }

    View

    <link href="~/css/CustomLoader.css" rel="stylesheet" />
    <div id="loader" style="display:none"></div>
    @Html.DropDownList("Parent", ViewBag.Parent as SelectList, new { @class = "form-control", id = "parent" })
    <select id="children" class="form-control"></select>
    @section scripts{
        <script>
            $(function () {
                changechildren();
            });
            $("#parent").change(function () {
                changechildren();
            });
            function changechildren() {
                $.ajax({
                    url: "@Url.Action("getchildren")",
                    data: { value: $("#parent").val() },
                    beforeSend: function () {
                        $("#loader").show();
                    },
                    success: function (data) {
                        $("#children").empty();
                        setTimeout(function () {
                            $.each(data, function (index, value) {
                                $("#children").append($("<option></option>").val(value.Value).html(value.Text));
                            });
                        }, 2000);
                    },
                    complete: function () {
                        setTimeout(function () {
                            $("#loader").hide();
                        }, 2000);
                    },
                });
            }
        </script>
    }

    CustomLoader.css

    #loader {
        ;
        left: 50%;
        top: 50%;
        z-index: 1;
        width: 120px;
        height: 120px;
        margin: -76px 0 0 -76px;
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #3498db;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }
    
        100% {
            -webkit-transform: rotate(360deg);
        }
    }
    
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
    
        100% {
            transform: rotate(360deg);
        }
    }
    /* Add animation to "page content" */
    .animate-bottom {
        ;
        -webkit-animation-name: animatebottom;
        -webkit-animation-duration: 1s;
        animation-name: animatebottom;
        animation-duration: 1s
    }
    
    @-webkit-keyframes animatebottom {
        from {
            bottom: -100px;
            opacity: 0
        }
    
        to {
            bottom: 0px;
            opacity: 1
        }
    }
    
    @keyframes animatebottom {
        from {
            bottom: -100px;
            opacity: 0
        }
    
        to {
            bottom: 0;
            opacity: 1
        }
    }

    Here is the result. 

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 29, 2020 9:30 AM