MVC 4 中的等待屏幕

Question

我想在用户单击按钮执行操作时显示加载屏幕，因为该操作需要 10 秒才能运行。

我在我的家庭控制器中有一个简单的 HTTP 帖子：

[HttpPost]
public ActionResult PostMethod()
{
    System.Threading.Thread.Sleep(1000);
    return View(); 
}

在我看来，我有：

@{
    ViewBag.Title = "Home Page";
}

@section featured {
    <div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001; opacity: .8; filter: alpha(opacity=70);display:none">
        <p style="position: absolute; top: 30%; left: 45%; color: White;">
            Loading, please wait...<img src="../../Content/themes/base/images/ajax-loading.gif">
        </p>
    </div>

    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
        </div>
    </section>
}

<button onclick="JavascriptFunction();">HTTPPost Button</button>

<script type="text/javascript" language="javascript">
    function JavascriptFunction() {
        var url = '@Url.Action("PostMethod", "Home")';
        $("#divLoading").show();
        $.post(url,function (res) {
            $("#content-wrapper").html(res);
            $("#divLoading").fadeOut(100);
        });
    }
</script>

基本上，当用户点击按钮时，Javascript 函数会显示“divLoading”div。这工作正常。问题是“divLoading”在睡眠 1 秒后永远不会消失。因此，当它应该恢复正常时，屏幕仍然保持加载状态。

这是：

return View() 

[HTTP] 行是否正常工作？或者是这条线的东西：

$.post(url, null, function () {
    //$("#PID")[0].innerHTML = data;
    $("#divLoading").hide();
});

在某个地方，它无法识别视图已返回，并且不应再显示 divLoading。

Answer 1

刚刚意识到，如果您正在调用并执行 ajax 请求，您很可能不想返回视图，请像

        [HttpPost]
        public ActionResult PostMethod()
        {
            System.Threading.Thread.Sleep(1000);
            return Content(""); 
        }

Answer 2

所有代码都很好，但问题是视图“PostMethod”不存在，所以服务器正在回答“Error 500”，这确实javascript中的函数没有被调用。

Answer 3

您的代码应该可以正常工作，没有任何问题。由于您将进度条隐藏在回调函数中，因此一旦您收到来自服务器操作方法的响应，它将执行。

我可以看到这不起作用的唯一原因是，您在操作方法中遇到了一些服务器错误，并且您收到 500 Internal server error 作为对 ajax 调用的响应。确保您的操作方法正在执行且没有任何错误。你可以在你的 action 方法中设置一些断点，看看那里发生了什么。

如果你的操作方法没有合适的视图文件，它会抛出 500 错误。

建议： 我总是将我的事件代码包装在 jquery 文档就绪函数中。此外，我个人更喜欢使用非公开验证。

此外，由于您正在进行 ajax 调用，因此您的操作方法的更好输出是 JSON 结构。

[HttpPost]
public ActionResult PostMethod()
{
    try
    {
        System.Threading.Thread.Sleep(1000);
        return Json( new { Status="Success"});
    }
    catch(Exception ex)
    {
       //log error
       return Json( new { Status="Error"});
    }
}

您可以在您的客户端中验证以查看是否一切正常

$(function(){
    $("#SomeButtonID").click(function(e){
       e.preventDefault();
       $.post(url,function(res){
          if(res.Status==="Success")
          {
             alert("Everything went fine");
             //Do whatever you want here
          }
       });
    });
});

而不是JSON，如果要返回，变化不大。只需返回您的视图而不是 JSON。

[HttpPost]
public ActionResult PostMethod()
{
   System.Threading.Thread.Sleep(1000);
   return View(); 
   //assuming you have the PostMethod.cshtml 
   //present in ~/Views/YourControllerName`directory
}

在您的回调中，您可以使用此响应（本质上是 HTML 标记）在页面的某些部分显示它。

$.post(url,function(res){
    $("#YourAnotherDivId").html(res);
    $("#divLoading").fadeOut(100);    
});