Loader Page

Question

Respected All,

please see below image i want to put loading page before Mvc Actionresult return view.

so can u please suggest me how to do it ??

Answer 1

please see below image i want to put loading page before Mvc Actionresult return view. so can u please suggest me how to do it ??

If I understand correctly you want to display an a loading notification while the browser is waiting for a response. Use JavaScript to toggle the display property which shows or hides a "Loading..." message or gif. The action response refreshes the page which either resets the HTML content (this example) or replaces the content if a redirect is done.

        [HttpGet]
        public IActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public IActionResult Index(string submit)
        {
            Thread.Sleep(5000);
            return View();
        }

Index View

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<form id="form" method="post">
    <button type="submit" name="submit" class="btn btn-primary">Submit</button>
</form>
<div id="loading" style="display:none">
    Loading...
</div>

@section scripts {
    <script>
        const form = document.getElementById("form");
        form.addEventListener("submit", showLoading);

        function showLoading() {
            document.getElementById("loading").style.display = "block";
        }
    </script>
}

Also, your flow is not technically correct. The processing within the action and before returning an MVC ActionResult unless a JavaScript application is handling the processing

Answer 2

displaying a loader page is a separate request. there are two common approaches.

1. the requesting page uses javascript to display a loading message before any page requests (links, submit). above example.
2. the requested action returns the loading page. this loading page has a hidden form with the postback data, and does an auto post via javascript to the action that will perform the actual processing. the processing action has a different name, or uses a form value to know its not the splash screen.