title: How to show loader image until controller method completes in ASP.NET MVC?
body: <p>I have an <code>Index</code> page like below and on button click I have some code to save data into database and then it goes on details page.</p>
  
  <p>But I the code should go to the details page only after completing the database save operation; I want to show a loader image until then; how can I do this?</p>
  
  <p>Currently I'm using begin post to post method and bind all model not using any ajax call. How can I show loader image and render before process complete to details page?</p>
  
  <p>Index.cshtml</p>
  
  <pre><code>@model Dev.Models.DeviceReg
  @using (Html.BeginForm("AddAsync", "Home", FormMethod.Post))
  {
      &lt;div class="panel panel-primary"&gt;
          &lt;div class="panel-body"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;h4 id="aa"&gt;Name&lt;/h4&gt;
                      &lt;label&gt;Select&lt;/label&gt;
                      &lt;table&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  @Html.DropDownListFor(m =&gt; m.Name, (SelectList)ViewBag.Name, "---Select Name---")
                              &lt;/td&gt;                           
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;h4 id="aa"&gt;Model&lt;/h4&gt;
                      &lt;label&gt;Select&lt;/label&gt;
                      &lt;table&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  @Html.DropDownListFor(m =&gt; m.Type, (SelectList)ViewBag.TypeName, "---Select Type---")
                              &lt;/td&gt;                          
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;              
          &lt;/div&gt;
          &lt;div class="panel-footer" align="left"&gt;
              &lt;button type="submit" id="save" class="btn btn-success"&gt;
                  &lt;span class="glyphicon glyphicon-arrow-right"&gt;&lt;/span&gt; save 
              &lt;/button&gt;
          &lt;/div&gt;       
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>HomeController.cs</p>
  
  <pre><code>public async Task&lt;ActionResult&gt; AddAsync(DeviceReg deviceRegistration)
  {        
  
          foreach (var deviceId in collection)
          {
                  // save device information into database
                  Models.Device newDevice = new Models.Device()
                  {
                      Id = Guid.NewGuid(),
                      DeviceTypeId = deviceRegistration.DeviceType,
                      PlatformId = deviceRegistration.PlatformType,
                      DeviceId = deviceId,
                  };
  
                  _repository.InsertDevice(newDevice);
                  _repository.Save();
          }
      return View("Details", deviceRegistration);
  }
  </code></pre>
  
  <p>Details.cshml</p>
  
  <pre><code>@model Dev.Models.DeviceReg
  
  &lt;body style="background-color:black"&gt;
      &lt;div class="panel panel-primary"&gt;
  
          &lt;div class="panel-heading" align="center"&gt;
              &lt;h2 class="panel-title"&gt;Details&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;h3&gt;&lt;label&gt;Current Data&lt;/label&gt;&lt;/h3&gt;
                      &lt;br /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;h4 id="aa"&gt;Name&lt;/h4&gt;
                      &lt;label&gt;@Model.Name&lt;/label&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;h4 id="aa"&gt;Type&lt;/h4&gt;
                      &lt;label&gt;@Model.TypeName&lt;/label&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;hr /&gt;
              &lt;br /&gt;
              &lt;label&gt;Your process is running.&lt;/label&gt;
              &lt;br /&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;h3&gt;&lt;label&gt;Status&lt;/label&gt;&lt;/h3&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;div style="clear: both"&gt;
                          &lt;h2 style="float: left"&gt;10&lt;/h2&gt;
                          &lt;h6 style="float: right"&gt;Active Number&lt;/h6&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
          &lt;/div&gt;
  
  
      &lt;/div&gt;
  
  &lt;/body&gt; 
  </code></pre>