locked
please wait page prior to first index page for API controller RRS feed

  • Question

  • User-1176492134 posted

    I have an ASP MVC API that works fine and links to a third party  database which is slow to retrieve the data list that is subsequently displayed on the API controller index page. Therefore there is a long delay between calling the website and the index page being loaded/displayed.

    I would like to display a simple  web page showing 'Please wait loading data' prior the the data/index page so the user knows something is happening.

    Can anybody help please.

    Tuesday, March 9, 2021 4:47 PM

All replies

  • User475983607 posted

    There are a few ways to solve programming problem.  One is writing JavaScript/AJAX to populate the page content.  Another loading a page that has a self-submitting HTML Form (JavaScript) or windows.location = "theUrl.com" when the page loads.

    Can you share the code you've tried? 

    Tuesday, March 9, 2021 4:59 PM
  • User-1176492134 posted

    thanks for your reply.

    I haven't tried anything yet.  My first thoughts  are to create another function (called index2) in the main controller (beneath the edit function) which will duplicate the current index function and index view. Then replace the current  index code with a simple return view statement and change the index.vbhtml view to be the display 'Please wait loading' page which has a final line @Html.Action which calls the Index2 function.

    would this work?

    Wednesday, March 10, 2021 7:32 AM
  • User1686398519 posted

    Hi taggart, 

    If you use ajax to request your api, you can refer to my example below.

    • You can change the requested url according to your needs.

    Controller

        public class LoaderTestController : Controller
        {
            // GET: LoaderTest
            public ActionResult Index()
            {
                return View();
            }
            public ActionResult getdata()
            {
                return Json("testdata",JsonRequestBehavior.AllowGet);
            }
        }

    View

    <style>
        .loadingbackground {
            display: none;
            ;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 999;
            background-color: rgba(255,255,255,0.8);
        }
        body.loading {
            overflow: hidden;
        }
        body.loading .loadingbackground {
           display: block;
        }
        .loader {
            display: none;
            ;
            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;
        }
        /* Safari */
        @@-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }
        @@keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
    <button id="test">getdata</button>
    <div class="loadingbackground"><div class="loader"></div></div>
    @section scripts{
        <script>
            $("#test").click(function () {
               $.ajax({
                url: "@Url.Action("getdata", "LoaderTest")",
                type: "GET",
                dataType: "json",
                beforeSend: function () {
                    $("body").addClass("loading");
                    $(".loader").show();
                },
                success: function (data) {
                    setTimeout(function () {
                        $(".loader").hide();
                        $("body").removeClass("loading");
                    }, 1000);
                }
                });
            });
        </script>
    }

    Here is the result. 

    Best Regards,

    YihuiSun

    Wednesday, March 10, 2021 9:07 AM
  • User-1176492134 posted

    I tried what I suggested in my previous post and it almost worked.

    any idea how to get the Index page to show separately before the Index2 page?

    Wednesday, March 10, 2021 11:28 AM
  • User-1176492134 posted

    Thanks YihuiSun

    How would you modify your example to execute the loading image without a button.

    i need to show it as soon a the index page loads without the need to press a button.

    Taggart

    Wednesday, March 10, 2021 12:51 PM
  • User475983607 posted

    taggart

    How would you modify your example to execute the loading image without a button.

    i need to show it as soon a the index page loads without the need to press a button.

    For the second time!  Another option designing a self-submitting form or doing windows.location = "my url" when the page loads. 

    AJAX will work in a similar way.  Fire the AJAX function when the page loads.  The difference is you'll need to write JavaScript code to update the page when using AJAX.  My example refreshes the page when the content is ready.  The approach you select depends on your requirements.  

    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Main View</h2>
    
    <form method="post" action="MainContent">
        ...Loading
        <input id="Hidden1" type="hidden" name="value" value="Some Data" />
    </form>
    
    @section scripts 
    {
        <script>
            $('form').submit();
        </script>
    }
    {
        public class GeneralController : Controller
        {
            // GET: General
            [HttpGet]
            public ActionResult Index()
            {
                return View();
            }
    
            [HttpPost]
            public ActionResult MainContent(string value)
            {
                Thread.Sleep(3000);
                ViewBag.Value = value ?? "Empty string";
                return View();
            }
        }
    @{
        ViewBag.Title = "MainContent";
    }
    
    <h2>Main View</h2>
    
    <div>
        @ViewBag.Value
    </div>

    Wednesday, March 10, 2021 1:47 PM
  • User1686398519 posted

    Hi taggart, 

    The solution I gave before is that you need to use ajax to request data.

    I modified the example again, you can refer to it.

    • I combined ajax and partial views to meet your needs.
    • You only need to return the data to the partial view in getdata(), and then fill the html string on the Index view in the success function of ajax.

    Model

        public class LoaderTestModel
        {
            public int Id { get; set; }
            public string Name { get; set; }
        }

    Controller

        public class LoaderTestController : Controller
        {
            // GET: LoaderTest
            public ActionResult Index()
            {
                return View();
            }
            public ActionResult getdata()
            {
                List<LoaderTestModel> list = new List<LoaderTestModel> { new LoaderTestModel { Id=1,Name="Name1" }, new LoaderTestModel { Id = 2, Name = "Name2" } };
                //Request api to the data
                //I just wrote a simple test data here
                return PartialView("getdata", list);
            }
        }

    Index

    <style>
        .loadingbackground {
            display: none;
            ;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 999;
            background-color: rgba(255,255,255,0.8);
        }
        body.loading {
            overflow: hidden;
        }
        body.loading .loadingbackground {
           display: block;
        }
        .loader {
            display: none;
            ;
            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;
        }
        /* Safari */
        @@-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
        }
    
        @@keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
    <div id="showdata">
    
    </div>
    <div class="loadingbackground" style="text-align:center"><div class="loader"></div></div>
    @section scripts{
        <script>
               $.ajax({
                url: "@Url.Action("getdata", "LoaderTest")",
                type: "GET",
                beforeSend: function () {
                    $("body").addClass("loading");
                    $(".loader").show();
                },
                success: function (data) {
                    setTimeout(function () {
                        $(".loader").hide();
                        $("body").removeClass("loading");
                        $("#showdata").html(data);
                    }, 1000);
                },
                   error: function () {
                       setTimeout(function () {
                           $(".loader").hide();
                           $("body").removeClass("loading");
                           alert("has error");
                       }, 1000);
                 }
                });
        </script>
    }

    getdata

    @model IEnumerable<DailyMVCDemo3.Models.LoaderTestModel>
    <table class="table">
        <tr>
            <td>Id</td>
            <td>Name</td>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.Name</td>
            </tr>
        }
    </table>

    Here is the result. 

    Best Regards,

    YihuiSun

    Thursday, March 11, 2021 6:56 AM
  • User-1176492134 posted

    thanks. that worked.   

    Friday, March 12, 2021 8:38 AM
  • User-1176492134 posted

    thanks YihuiSun

    it worked perfectly.

    Friday, March 12, 2021 12:46 PM