如何顯示請等待MVC 5中的表單發送消息，直到控制器返回視圖

Question

在MVC 5.2.2中，我需要通過將表單中的值發送到Web服務來處理數據。雖然這樣做需要一些時間從網絡服務獲取狀態並返回到新視圖。同時我需要顯示請等待，以防止用戶重複提交。

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

如果你只關心展示AJAX等待消息，我覺得你可以在下面的方式做：

第1步： 包括以下腳本：

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

步驟2： 檢查web.config中的以下按鍵：

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

第3步： 現在你是好使用下面的代碼：

@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" /> 
    } 

我用在我的控制器下面的代碼檢查的話：

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

第4步：

您可以將css應用於加載內容爲p呃你的要求。我做了以下：

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