Loading progress or Please Wait Pop-Up in MVC View DropDown List[Answered] RSS

• • Reply
  Golia

  Member

  57 Points

  116 Posts

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

  Dec 28, 2020 03:37 PM|Golia|LINK

  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>                                               

• • Reply
  bruce (sqlwo...

  All-Star

  57874 Points

  15507 Posts

  Re: Loading progress or Please Wait Pop-Up in MVC View DropDown List

  Dec 28, 2020 09:20 PM|bruce (sqlwork.com)|LINK

  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.

  bruce (sqlwork.com)
• • Reply
  YihuiSun

  Contributor

  2400 Points

  690 Posts

  Re: Loading progress or Please Wait Pop-Up in MVC View DropDown List

  Dec 29, 2020 09:30 AM|YihuiSun|LINK

  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 {
      position: absolute;
      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 {
      position: relative;
      -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

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.