How to add loader in mvc?

Sunil Singh 2722 24-Jun-2017

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>

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

@{
    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>

forum

How to add loader in mvc?

Sunil Singh

Can you answer this question?

1 Answers

Liked By