How to add loader in mvc?

Total Post:45

Points:323
 1105  View(s)
Ratings:
Rate this:

I want to show Loader when button is clicked before data is displayed. 

Below is my view code I don’t know what should be the controller code and jquery.

Please help me.

<body>
    @using (Ajax.BeginForm("Loader", "Home", new AjaxOptions { HttpMethod = "POST",}))
    {
        <input type="submit" value="Please click" />
    }
 
    <div id="divLoading">
           </div>
 
    <div id="target">
           </div>
</body>

  1. Post:19

    Points:135
    Re: How to add loader in mvc?

          Controller code

     

           public ActionResult Ajax()
            {
                return View();
            }
            public ActionResult Loader()
            {
                System.Threading.Thread.Sleep(5000);
                return PartialView("PartialView");
            }

     View code 

    @{
        Layout = null;
    }
     
    <!DOCTYPE html>
     
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Ajax</title>
     
        <script src="~/Scripts/jquery-3.1.1.min.js"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
        <script type="text/javascript">
            function onBegin() {
                $("#divLoading").html('<image src="../Images/loader.gif" alt="Loading, please wait" />');
            }
            function onComplete() {
                $("#divLoading").html("mindstick software");
            }
        </script>
    </head>
    <body>
        @using (Ajax.BeginForm("Loader", "Home", new AjaxOptions { UpdateTargetId = "target", OnBegin = "onBegin", OnComplete = "onComplete" }))
        {
            <input type="submit" value="Please click" />
        }
     
        <div id="divLoading">
          
        </div>
     
        <div id="target">
          
        </div>
    </body>
    </html>

     

      Modified On Apr-11-2018 11:03:06 PM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!