How to show please wait message on form post in MVC 5 till the controller returns view

Question

In MVC 5.2.2,I need to process data by sending the values from form to web-service.While doing so it takes some time to get the status from web service and return to new view .In the mean time i need to show please wait in order to prevent the user from repeated submissions.

public ActionResult PopulateHistory(HistoryModel history)
{
    try
    {
      string policyNumber = history.product.Split(',')[0];
      string productCode = history.product.Split(',')[1];
      string startDate = code;
      string endDate = (DateTime.UtcNow).ToString("yyyy-MM-dd");
      Container historyContainer =_History.CreateBusinessObject_History
      (policyNumber,productCode,endDate,startDate);
      //Getting history from webservice
      DataTable historyGridview =_History.GethistoryValues
      (historyContainer);
      return View(historyGridview);
   }
    catch (Exception ex)
    {
      SemanticLogger.Log.Error(ex.ToString());
      return View(ex.ToString());
    }
}

Answer 1

If you are concerned only with showing the ajax wait message, i think you can do in following manner:

Step 1: Include following scripts:

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

Step 2: Check following keys in web.config:

<add key="webpages:Enabled" value="false" />
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

Step 3: Now you are good to use the following code:

  @using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", LoadingElementId = "please-wait" }))
    {                
        <div id="please-wait" style="display: none;">
            <div class="modal"></div>
            <div class="spinner">Loading...</div>
        </div>
        <input type="submit" value="Submit" />
    }

I checked it by using the following code in my controller:

        [HttpPost]
        public ActionResult Index()
        {
            Thread.Sleep(3000);
            return View();
        }

Step 4:

You can apply the css to loading content as per your requirement. I did the following:

 <style>
            #please-wait {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }

                #please-wait .modal {
                    z-index: 1999;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    opacity: 0.5;
                    -moz-opacity: 0.5;
                    background-color: black;
                    margin-left: 0;
                }

                #please-wait .spinner {
                    z-index: 2000;
                    position: absolute;
                    padding-top: 20px;
                    padding-left: 20px;
                    background: #E5E5E5 no-repeat 15px center;
                    width: 120px;
                    height: 40px;
                    border: 2px solid #666;
                    font-weight: bold;
                    text-align: center;
                    margin-left: auto;
                    margin-right: auto;
                    top: 35%;
                    display: block;
                }
     </style>