asp.net-mvc - 如何在 MVC 5 中的表单帖子上显示请等待消息，直到 Controller 返回 View

Question

在 MVC 5.2.2 中，我需要通过将值从表单发送到 Web 服务来处理数据。这样做需要一些时间才能从 Web 服务获取状态并返回到新 View 。同时我需要展示请稍等，以免用户重复提交。

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

我在我的 Controller 中使用以下代码检查了它:

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

第 4 步:

您可以根据需要应用 css 来加载内容。我做了以下事情:

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