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。这很好用。问题是“睡眠1秒钟后”“divLoading”永远不会消失。因此，当屏幕应该恢复正常时，屏幕就像加载一样。

这是：

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”不存在，因此服务器正在回答“错误500 ”，这样做javascript中的函数没有被调用。

Answer 3

您的代码应该没有任何问题。由于您在回调函数中隐藏了进度条，因此一旦从服务器操作方法收到响应，它就会被执行。

我可以看到这一点的唯一原因是，您的操作方法中出现了一些服务器错误，并且您收到了 500内部服务器错误作为对您的ajax调用的响应。确保您的操作方法正在执行而没有任何错误。您可以在操作方法中放置一些断点，看看那里发生了什么。

如果您的操作方法没有正确的视图文件，则会抛出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);    
});

等待屏幕在MVC 4中

3 个答案: