在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当用户点击按钮。这工作正常。问题在于，在睡眠1秒钟完成后，“divLoading”不会消失。所以屏幕就像加载时一样，它应该恢复正常。

是这样的：

return View() 

线[HTTP]正常工作？或者是这条线：

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

某处它不承认视图被返回，它不应该显示divLoading。

Answer 1

刚刚意识到如果要调用和做Ajax请求，你很可能不希望返回查看你somethink像

 [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);  
});