让 MVC AJAX 部分负载工作的问题

Question

我正在按照here 中的示例在 MVC 中实现 AJAX 面板。我使用的是 VB.NET，但转换非常简单。但是，我似乎无法让它工作，而且我对为什么没有想法。这是我的代码：

家庭控制器：

Function Index() As ActionResult
    Return View()
End Function

Function Archive() As ActionResult
    Threading.Thread.Sleep(5000)
    Return View()
End Function

Archive.ascx（部分视图）：

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl" %>
Hello World

Index.aspx（视图）：

<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexContent" ContentPlaceHolderID="body" runat="server">
    <% Using Ajax.BeginForm("Archive", "Home", Nothing, New AjaxOptions With {.UpdateTargetId = "resultDiv"}, New With {.id = "reportFormOne"})%>
    <% End Using%>
    <div id="resultDiv">
        <img src="../../Content/images/ajax-loader.gif" alt="" />
    </div>

    <script type="text/javascript" src='<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>'></script>

    <script type="text/javascript">

        $get("reportFormOne").onsubmit();

    </script>

</asp:Content>

当我运行它时，我看到的只是无尽的 ajax-loader 动画。当我在调试模式下运行它时，它似乎永远不会触发存档操作。谁能看到我错过了什么？

更新：感谢@Joseph 指出没有加载jQuery。现在是，但我在 $get 调用中得到“预期对象”。

更新 2：下面是 Index.aspx 现在的“文档就绪”代码的样子。这个配置给了我一个“对象不支持这个属性或方法”的错误。

<script type="text/javascript" src='<%= Url.Content("~/Scripts/jquery-1.3.2.min.js") %>'></script>
<script type="text/javascript" src='<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>'></script>
<script type="text/javascript" src='<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>'></script>

<script type="text/javascript">

    $(document).ready(function() {
        $("#reportFormOne").submit();
    });

</script>

<% Using Ajax.BeginForm("Archive", "Home", Nothing, New AjaxOptions With {.UpdateTargetId = "resultDiv"}, New With {.id = "reportFormOne"})%>
<% End Using%>
<div id="resultDiv">
    <img src="../../Content/images/ajax-loader.gif" alt="" />
</div>

更新 3：意识到它在“onsubmit”时窒息。将其更改为“提交”并且它起作用了。但是，将延迟更改为 5 秒后，动画 gif 并没有旋转 - 它只是保持静止 5 秒，然后整个页面被“Hello World”替换，而不是仅仅替换 div 中的动画 gif。啊啊啊啊啊！

更新 4：在更新 2 的代码中添加了缺少的 AJAX 库。这仍然无法正常工作，但如果我不使用 jQuery 提交，而是将提交按钮添加到形式，它工作正常。为什么？

Answer 1

如果您在局部有任何表单，请尝试删除它们。如果它有效，则意味着它们没有被正确调用。

同样的事情发生在我身上两次。也可能是你的问题...

Answer 2

AjaxHelper 类 (Ajax.BeginForm()) 使用 Microsoft AJAX 库。看起来你没有引用它们。将它们添加到您的母版页

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

或者，您可以使用jQuery Form 插件。用Html.BeginForm() 替换您的Ajax.BeginForm() 并执行类似的操作。在这种方法中，我们将动态加载ajax图像，因此从resultDiv中取出<img>标签。

    <script type="text/javascript" src="/path/to/jquery.form.js"></script>
    $(function(){

 $("#reportFormOne").ajaxForm({
  target: "#resultDiv",
  resetForm: true,
  beforeSubmit: function() {
     $("<img>").attr("src", "../../Content/images/ajax-loader.gif").appendTo("#resultDiv");
  },
  success: function(data) {
     $("#resultDiv").hide().html(data).fadeIn("fast");
  }
 }); 

});

此外，您应该确保它是存档操作中的 AJAX 请求。 （我的VB生锈了。你只需要检查Request.IsAjaxRequest()）

Function Archive() As ActionResult
    Threading.Thread.Sleep(5000)

    If(Request.IsAjaxRequest())
      Return PartialView()
    End If 

    Return View()
End Function

Answer 3

你确定你已经加载了 jquery 吗？如果不是，那么您将永远不会调用您的网络方法。

如果您确实加载了它，我会尝试将您的脚本放入 document.ready() 以确保它在正确的时间执行。

类似这样的：

$(document).ready(function () {
    $("#reportFormOne").submit();
});