Post
Ask Question

How To Start/Stop Loader On Every AJAX Call

Introduction

In this article, we’ll learn how to put AJAX loader for all AJAX calls from all pages which extend from your layout page in MVC. Here, we will create a simple MVC project and call AJAX function from view. For beginners who are new to AJAX, AJAX is Asynchronous JavaScript and XML, it's a front-end web technology that calls web-server asynchronously. It will load your content without loading or leaving your currunt page.

Recommended Prerequisites

  • Visual Studio 
  • ASP.NET MVC
Step 1

Open Visual Studio and select “File” >> "New". Then, click on Project.

Step 2

Select “Templates” >> Visual C# >> Web then ASP.NET Web Application (.NET Framework), and put appropriate project name.

  • And click the “OK” button.
 

Step 3

And, from here select MVC project (you can select the project as per your requirement).

 

Step 4

Now, go to your layout page and put the below code as per the below instruction.

Copy the below CSS, Div, and Script and put in your layout (please see below image for reference).


Loader CSS
  1. <style>  
  2.         /*!  
  3.         // 3. Loader  
  4.         // --------------------------------------------------*/  
  5.         .loader {  
  6.             top: 0;  
  7.             left: 0;  
  8.             position: fixed;  
  9.             opacity: 0.8;  
  10.             z-index: 10000000;  
  11.             background: Black;  
  12.             height: 100%;  
  13.             width: 100%;  
  14.             margin: auto;  
  15.         }  
  16.   
  17.         .strip-holder {  
  18.             top: 50%;  
  19.             -webkit-transform: translateY(-50%);  
  20.             -ms-transform: translateY(-50%);  
  21.             transform: translateY(-50%);  
  22.             left: 50%;  
  23.             margin-left: -50px;  
  24.             position: relative;  
  25.         }  
  26.   
  27.         .strip-1,  
  28.         .strip-2,  
  29.         .strip-3 {  
  30.             width: 20px;  
  31.             height: 20px;  
  32.             background: #0072bc;  
  33.             position: relative;  
  34.             -webkit-animation: stripMove 2s ease infinite alternate;  
  35.             animation: stripMove 2s ease infinite alternate;  
  36.             -moz-animation: stripMove 2s ease infinite alternate;  
  37.         }  
  38.   
  39.         .strip-2 {  
  40.             -webkit-animation-duration: 2.1s;  
  41.             animation-duration: 2.1s;  
  42.             background-color: #23a8ff;  
  43.         }  
  44.   
  45.         .strip-3 {  
  46.             -webkit-animation-duration: 2.2s;  
  47.             animation-duration: 2.2s;  
  48.             background-color: #89d1ff;  
  49.         }  
  50.   
  51.         @@-webkit-keyframes stripMove {  
  52.             0% {  
  53.                 transform: translate3d(0px, 0px, 0px);  
  54.                 -webkit-transform: translate3d(0px, 0px, 0px);  
  55.                 -moz-transform: translate3d(0px, 0px, 0px);  
  56.             }  
  57.   
  58.             50% {  
  59.                 transform: translate3d(0px, 0px, 0px);  
  60.                 -webkit-transform: translate3d(0px, 0px, 0px);  
  61.                 -moz-transform: translate3d(0px, 0px, 0px);  
  62.                 transform: scale(4, 1);  
  63.                 -webkit-transform: scale(4, 1);  
  64.                 -moz-transform: scale(4, 1);  
  65.             }  
  66.   
  67.             100% {  
  68.                 transform: translate3d(-50px, 0px, 0px);  
  69.                 -webkit-transform: translate3d(-50px, 0px, 0px);  
  70.                 -moz-transform: translate3d(-50px, 0px, 0px);  
  71.             }  
  72.         }  
  73.   
  74.         @@-moz-keyframes stripMove {  
  75.             0% {  
  76.                 transform: translate3d(-50px, 0px, 0px);  
  77.                 -webkit-transform: translate3d(-50px, 0px, 0px);  
  78.                 -moz-transform: translate3d(-50px, 0px, 0px);  
  79.             }  
  80.   
  81.             50% {  
  82.                 transform: translate3d(0px, 0px, 0px);  
  83.                 -webkit-transform: translate3d(0px, 0px, 0px);  
  84.                 -moz-transform: translate3d(0px, 0px, 0px);  
  85.                 transform: scale(4, 1);  
  86.                 -webkit-transform: scale(4, 1);  
  87.                 -moz-transform: scale(4, 1);  
  88.             }  
  89.   
  90.             100% {  
  91.                 transform: translate3d(50px, 0px, 0px);  
  92.                 -webkit-transform: translate3d(50px, 0px, 0px);  
  93.                 -moz-transform: translate3d(50px, 0px, 0px);  
  94.             }  
  95.         }  
  96.   
  97.         @@keyframes stripMove {  
  98.             0% {  
  99.                 transform: translate3d(-50px, 0px, 0px);  
  100.                 -webkit-transform: translate3d(-50px, 0px, 0px);  
  101.                 -moz-transform: translate3d(-50px, 0px, 0px);  
  102.             }  
  103.   
  104.             50% {  
  105.                 transform: translate3d(0px, 0px, 0px);  
  106.                 -webkit-transform: translate3d(0px, 0px, 0px);  
  107.                 -moz-transform: translate3d(0px, 0px, 0px);  
  108.                 transform: scale(4, 1);  
  109.                 -webkit-transform: scale(4, 1);  
  110.                 -moz-transform: scale(4, 1);  
  111.             }  
  112.   
  113.             100% {  
  114.                 transform: translate3d(50px, 0px, 0px);  
  115.                 -webkit-transform: translate3d(50px, 0px, 0px);  
  116.                 -moz-transform: translate3d(50px, 0px, 0px);  
  117.             }  
  118.         }  
  119.     </style>  
Loader Div 
  1. <div class="loader" id="AjaxLoader" style="display:none;">  
  2.        <div class="strip-holder">  
  3.            <div class="strip-1"></div>  
  4.            <div class="strip-2"></div>  
  5.            <div class="strip-3"></div>  
  6.        </div>  
  7.    </div>  
Loader Script  
  1. <script>  
  2.     $(document)  
  3.         .ajaxStart(function () {  
  4.             $('#AjaxLoader').show();  
  5.         })  
  6.         .ajaxStop(function () {  
  7.             $('#AjaxLoader').hide();  
  8.         });  
  9. </script>  
The above script will call on every AJAX call, so we don't need to call loader function for each AJAX call. 

Step 5

Now, we are going to create an AJAX function and sleep system for a few seconds so we can see the loader.

On Home Controller, create a new Action (put the below code).

 
  1. public JsonResult CallingAjaxFunction()  
  2.        {  
  3.            System.Threading.Thread.Sleep(7000);  
  4.            return Json(true,JsonRequestBehavior.AllowGet);  
  5.        }  
On Index page, we are going to call this method.
 
Index.cshtml  
  1. @{  
  2.     ViewBag.Title = "Home Page";  
  3. }  
  4.   
  5. <div class="jumbotron">  
  6.     <h1>ASP.NET</h1>  
  7.     <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>  
  8.     <p><a class="btn btn-primary btn-lg" id="ajaxCall" onclick="CallMe()">Call Me »</a></p>  
  9. </div>  
  10.   
  11. <div class="row">  
  12.     <div class="col-md-4">  
  13.         <h2>Getting started</h2>  
  14.         <p>  
  15.             ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that  
  16.             enables a clean separation of concerns and gives you full control over markup  
  17.             for enjoyable, agile development.  
  18.         </p>  
  19.         <p><a href="https://asp.net" class="btn btn-default">Learn more »</a></p>  
  20.     </div>  
  21.     <div class="col-md-4">  
  22.         <h2>Get more libraries</h2>  
  23.         <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>  
  24.         <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>  
  25.     </div>  
  26.     <div class="col-md-4">  
  27.         <h2>Web Hosting</h2>  
  28.         <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>  
  29.         <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>  
  30.     </div>  
  31. </div>  
  32. <script>  
  33.     function CallMe() {  
  34.         $.ajax({  
  35.             type: "GET",  
  36.             url: '@Url.Action("CallingAjaxFunction", "Home")',  
  37.             contentType: "application/json; charset=utf-8",  
  38.             dataType: "json",  
  39.             success: function (recData) { alert('Success'); },  
  40.             error: function () { alert('A error'); }  
  41.         });  
  42.     }  
  43. </script>  
HomeController.cs  
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace AjaxDemo.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         public ActionResult Index()  
  12.         {  
  13.             return View();  
  14.         }  
  15.   
  16.         public ActionResult About()  
  17.         {  
  18.             ViewBag.Message = "Your application description page.";  
  19.   
  20.             return View();  
  21.         }  
  22.   
  23.         public ActionResult Contact()  
  24.         {  
  25.             ViewBag.Message = "Your contact page.";  
  26.   
  27.             return View();  
  28.         }  
  29.   
  30.         public JsonResult CallingAjaxFunction()  
  31.         {  
  32.             System.Threading.Thread.Sleep(7000);  
  33.             return Json(true,JsonRequestBehavior.AllowGet);  
  34.         }  
  35.   
  36.     }  
  37. }  
And that's all. Now, whenever you call any AJAX function from any page, the loader will show while loading/executing your content and hide when it's done/complete.
 
Output 
 
 
You can download this demo from here.


Similar Articles