Question

当我的页面的AJAX处理被触发而没有成功时，我一直在尝试触发Javascript函数。我的大部分时间都花在尝试使OnBegin AjaxOption值工作，但我也花时间使用全局JQuery .ajaxSend处理程序（我相信它可能与ASP.NET MVC不兼容），两者都没有成功。 / p>

我把页面简化为非常简单的东西。我的项目的Index.cshtml是：

@using SalePointWebItemInquiry.Controllers
@using System.Web.Mvc.Ajax

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

@Scripts.Render("~/bundles/jquery", "~/bundles/jqueryval")

<script type="text/javascript">
    function TestFunction() {
        alert("Calling testfunction.");
    }
</script>

@using (Ajax.BeginForm("PressButton", 
    "Home", 
    new AjaxOptions
        {
            OnBegin = "TestFunction"
        })) 
{
<div>
        <input class="btn btn-default" type="submit" id="1" name="buttonType" value="Enter" />
</div>
}

呈现的页面是：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet" />
    <link href="/Content/site.css" rel="stylesheet" />
    <script src="/Scripts/modernizr-2.6.2.js"></script>
  </head>

  <body>
    <div class="container body-content bordered">
      <script src="/Scripts/jquery-1.10.2.js"></script>
      <script src="/Scripts/jquery.validate.js"></script>
      <script src="/Scripts/jquery.validate.unobtrusive.js"></script>

      <script type="text/javascript">
        function TestFunction() {
          alert("Calling testfunction.");
        }
      </script>

      <form action="/Home/PressButton" data-ajax="true" data-ajax-begin="TestFunction" id="form0" method="post">
        <div>
          <input class="btn btn-default" type="submit" id="1" name="buttonType" value="Enter" />
        </div>
      </form>
      <footer>
        <div class="row">
          <div class="col-md-5">
            <p>&copy; 2015 - Application</p>
          </div>
          <div class="col-md-7 text-right">
            Version: Put version here
          </div>
        </div>
      </footer>
    </div>

    <script src="/Scripts/jquery-1.10.2.js"></script>

    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/respond.js"></script>

    <!-- Visual Studio Browser Link -->
    <script type="application/json" id="__browserLink_initializationData">
      {"appName":"Internet Explorer","requestId":"d2eef5342ac64f3db1545856102f4a6f"}
    </script>
    <script type="text/javascript" src="http://localhost:53954/45ae7332668647b5a3795d87cd6ba1a9/browserLink" async="async"></script>
    <!-- End Browser Link -->

  </body>

</html>

当我点击ENTER按钮时，有没有人想到为什么TestFunction（）Javascript函数没有触发？

解决方案： 谢谢您的帮助：）。我没有正确引用jquery.unobtrusive-ajax.js。我的问题的直接解决方案是使用Nuget在Nuget控制台上使用此命令检索非本地的Javascript包：安装包Microsoft.jQuery.Unobtrusive.Ajax

由于我本地没有jquery.unobtrusive-ajax.js，我在本地引用它的所有尝试都失败了。我可能已经尝试过一次或两次CDN参考，但这种情况从未解决过，而且我当时对于问题的原因有很多理论。

我甚至不需要更改代码。 BundleConfig.cs中的这段代码在我检索到文件后自动包含该文件：

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

Answer 1

You have duplicated

<script src="/Scripts/jquery-1.10.2.js"></script>

Remove the second one and then you also need to add jquery.unobtrusive-ajax.js in order for Ajax.BeginForm() to work (other wise you just making a normal submit - and therefore TestFunction() will never be called)

Answer 2

看起来你在加载JQuery之前加载你的脚本。脚本需要在正文标记之前和JQuery加载之后加载到页面底部。

请尝试

@section Scripts
{
<script type="text/javascript">
    function TestFunction() {
        alert("Calling testfunction.");
    }
</script>
}

这将在JQuery加载后放置脚本。

Ajax.BeginForm OnBegin没有触发（ASP.NET MVC5应用程序）

2 个答案: