Question

我按照here列出的示例来实现MVC中的AJAX面板。我正在使用VB.NET，但转换非常简单。但是，我似乎无法让它发挥作用，而且我的想法已经没有了。这是我的代码：

HomeController中：

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动画。当我在调试模式下运行它时，似乎永远不会触发存档操作。谁能看到我错过的东西？

UPDATE ：感谢@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。 AAARRRGGGHHH！

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

Answer 1

你确定你加载了jquery吗？如果没有，那么你永远不会打电话给你的网络方法。

如果你确实加载了它，我会尝试将你的脚本放在document.ready（）中，以确保它在正确的时间执行。

类似的东西：

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

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插件。将Ajax.BeginForm()替换为Html.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

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

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

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

3 个答案: