Wednesday, January 15, 2014

MVC Ajax Loading Icon when navigating to a new page/action method

Answered by Chad LaCroix on Stackoverflow

I kept the link on my menu.cshtml page as an @Html.ActionLink rather than an ajax link. But I added an onclick html attribute that called the javacript to show the spinner.
    ViewBag.Title = "Menu";
    Layout = "~/Views/Shared/_Layout.cshtml";

<div class="container" style="text-align:center">
        @Html.ActionLink("Orders", "Index", "Orders", null, new { id = "OrderLink", onclick="showPageLoadingSpinner()" })
I have the scipt for the spinner in my _Layout.cshtml partial view. which is referenced in my menu.cshtml view: Layout = "~/Views/Shared/_Layout.cshtml";
Below is my full _Layout.cshtml page including the ajax div and script references.
    @Content.Script("jquery-1.5.1.min.js", Url)
    @Content.Script("jquery.unobtrusive-ajax.min.js", Url)

    <div id="ajaxLoaderDiv" style="position:fixed; top:40%; left:45%; z-index:1234; display:none;">
    <div class="container">

<script type="text/javascript">
function showPageLoadingSpinner() {
                '<img src="@Url.Content("~/Images/AjaxLoaderImg.gif")" alt="Loading..."class="ajax-loader" />'

 function hidePageLoadingSpinner() {
     setTimeout(function () {
     }, 20000);


No comments:

Post a Comment