How to add loader in mvc?

Sunil Singh 2864 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>

1 Answers

Sushant Mishra 27 Jun 2017

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>

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

forum

How to add loader in mvc?

Can you answer this question?

1 Answers