Ajax.BeginForm 不触发 AJAX 脚本，回退答案

【问题标题】：Ajax.BeginForm doesn't fire AJAX script, falls back on postbackAjax.BeginForm 不触发 AJAX 脚本，回退
【发布时间】：2014-03-16 21:20:08
【问题描述】：

我将使用解决方案更新此问题，我想包含我的问题和解决方案，因为我无法在 Stackoverflow 上找到它。如果您想加入解决方案，请随意。

我有一个使用 Visual Studio 2013 创建的新创建的“空”MVC5 项目。如果可能，我需要一个 from 并且想要 AJAX 行为。在 MVC3 中使用 Ajax.BeginForm 总是很简单，所以我认为在 MVC5 中也可以。

但是，当我单击提交按钮时，我在 AjaxOptions 内的 OnBegin、OnFailure 或 OnSuccess 中指定的任何 javascript 函数都不会被调用。而是将 Ajaxless 帖子发送到服务器，通过检查返回 false 的 Request.IsAjaxRequest 证明这是真的。

我得出的结论是，由于某种原因，根本没有使用 ajax。我检查了很多东西，例如 web.config、我的布局脚本等。

我的布局包括以下脚本：

<script src="~/Scripts/jquery-1.5.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

我的 web.config 包括：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>
</configuration>

我的看法：

@model ContactEnquiryViewModel

@{
AjaxOptions ContactOptions = new AjaxOptions()
{
    OnBegin = "OnConactFormBegin()",    
    OnSuccess = "OnContactFormSuccess()",
    OnFailure = "OnContactFormFailure()"
    };
}

<div id="EnquiryFormContainer">

@using (Ajax.BeginForm("Contact", "Home", new { formName = "EnquiryForm" }, ContactOptions))
    {
    @Html.HiddenFor(m => m.Subject)

    <div class="field">
        @Html.LabelFor(m => m.FirstName)
        @Html.TextBoxFor(m => m.FirstName)
        <div class="validation">
            @Html.ValidationMessageFor(m => m.FirstName)
        </div>
    </div>

    <div class="field">
        @Html.LabelFor(m => m.LastName)
        @Html.TextBoxFor(m => m.LastName)
        <div class="validation">
            @Html.ValidationMessageFor(m => m.LastName)
        </div>
    </div>

    <div class="field">
        @Html.LabelFor(m => m.Email)
        @Html.TextBoxFor(m => m.Email)
        <div class="validation">
            @Html.ValidationMessageFor(m => m.Email)
        </div>
    </div>

    <div class="field">
        @Html.LabelFor(m => m.PhoneNumber)
        @Html.TextBoxFor(m => m.PhoneNumber)
        <div class="validation">
            @Html.ValidationMessageFor(m => m.PhoneNumber)
        </div>
    </div>

    <div class="field">
        @Html.LabelFor(m => m.Comments)
        @Html.TextAreaFor(m => m.Comments)
        <div class="validation">
            @Html.ValidationMessageFor(m => m.Comments)
        </div>
    </div>

    <div id="submitButtonContainer">
        <input type="submit" value="Submit" name="submit" />
    </div>
    }
</div>

我的控制器动作（未完成）：

[HttpPost]
public ActionResult Contact(ContactViewModel viewModel, String formName = "")
    {
    if (Request.IsAjaxRequest())
        {
        return new EmptyResult();               
        }

    return new EmptyResult();
    }

我查看了有关此问题的其他一些帖子，但找不到解决方案。尽管有些人暗示了可能的解决方案，但我对 Microsoft CDN (http://www.asp.net/ajaxlibrary/cdn.ashx) 感到困惑。

在 Microsoft CDN 上有以下部分：

以下 ASP.NET MVC JavaScript 文件托管在此 CDN 上：

ASP.NET MVC 5.0

http://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.js
http://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.min.js

ASP.NET MVC 4.0

http://ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.js
http://ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js

ASP.NET MVC 3.0

http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.js
http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js
http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js
http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js
http://ajax.aspnetcdn.com/ajax/mvc/3.0/MicrosoftMvcAjax.js
http://ajax.aspnetcdn.com/ajax/mvc/3.0/MicrosoftMvcAjax.debug.js 

ASP.NET MVC 2.0

http://ajax.aspnetcdn.com/ajax/mvc/2.0/MicrosoftMvcAjax.js
http://ajax.aspnetcdn.com/ajax/mvc/2.0/MicrosoftMvcAjax.debug.js 

ASP.NET MVC 1.0

http://ajax.aspnetcdn.com/ajax/mvc/1.0/MicrosoftMvcAjax.js
http://ajax.aspnetcdn.com/ajax/mvc/1.0/MicrosoftMvcAjax.debug.js

他们似乎建议 MVC5 需要的唯一脚本是 jquery.validate.unobtrusive。

【问题讨论】：

我猜OnBegin = "OnConactFormBegin()";线上有错字
是的，这是一个错字，方法应该是 OnContactFormBegin。
正如 RitchieD 所指出的，通过使用 NuGet，您可以通过获取适当的库轻松克服这些问题。如果您遇到上述问题，可能是由于缺少库或使用了不兼容的库。

标签： ajax asp.net-mvc-5

【解决方案1】：

获取本地副本作为 MVC 项目的一部分” 在 VS2013 中，右键单击您的 MVC 5 项目，选择“管理 NuGet 包”。选择“在线”并搜索“jquery.unobtrusive-ajax”，然后安装“Microsoft.jQuery.Unobtrusive.Ajax”。

【讨论】：

然后添加库
或者在包管理器控制台中键入 Install-Package Microsoft.jQuery.Unobtrusive.Ajax。不要忘记引用上面提到的已安装脚本。

【解决方案2】：

我在一个虚拟 MVC5 项目中遇到了同样的问题。

将此添加到您的 BundleConfig

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

将此添加到您的 layout.cshtml

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

我没有在我的项目中添加任何新文件，所以如果您有一个 MVC 4 或 5 Web 项目，我怀疑您是否需要添加任何额外的 js 文件。

它解决了我的问题。我希望它能解决你的问题。

【讨论】：

当您将文件放在本地时，这可以正常工作，但我非常喜欢使用 Microsoft、jQuery 等提供的内容交付网络。它分散了带宽使用，而且用户可以使用本地分布网络靠近其所在地，如果许多网站从同一位置引用相同的脚本，我认为缓存保存将发挥作用。
具体来说，我们需要jquery.unobtrusive-ajax.js。我需要在 Nuget 中搜索 Ajax。
这是正确的解决方案，因为MVC4和5确实默认添加了这个，效果是页面中插入了'jquery.unobtrusive-ajax.js'脚本。

【解决方案3】：

自从我在布局中包含以下脚本后，一切都开始工作了：

<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js"></script>

在 Microsoft CDN 上，这个脚本看起来好像是 MVC3 特定的。

如果可能，请随意贡献更好的方法，或回答以下问题：“为什么 MVC 项目模板 (VS2013) 中不包含此脚本？”

【讨论】：

它适用于您，因为您使用的是过时版本的 jQuery。如果您使用包含在 MVC 5 中的 jQuery，它将无法正常工作。由于您包含的脚本是 MVC 3 特定的。 stackoverflow.com/a/15373173/368065 这是 MVC 5 的正确解决方案。
我在使用 VS.2013 创建的解决方案中使用 MVC 5 和 jQuery 1.10，AJAX 与 jquery.unobtrusive-ajax.*.js 以及验证脚本一起使用。

【解决方案4】：

您是否检查过您的 web.config 文件是否包含

<appSettings>
    <!-- this one is for client side validation -->
    <add key="ClientValidationEnabled" value="true" />

    <!-- this is for unobtrusive ajax -->
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

【讨论】：

【解决方案5】：

我遇到了同样的问题，解决方案实际上是确保脚本引用的顺序正确（特别是 @Scripts.Render("~/bundles/jquery") 出现在 @Scripts.Render("~/bundles/jqueryval") 之前）

由于某种原因，在创建新项目并添加 nuget 包时默认情况下它不是这样

【讨论】：

【解决方案6】：

添加对 javascript 文件 jquery.unobtrusive-ajax.js 的引用对我有用。

【讨论】：

【解决方案7】：

对我来说，这有点奇怪和违反直觉。

页面是从带有自定义路由属性的控制器显示的：

[Route("contact")]
[HttpGet]
public ActionResult Contact()
{
    return this.View();
}

但处理 AjaxRequest 的 POST 操作没有 [Route("contact")] 属性，这就是它不起作用的原因。

【讨论】：

【解决方案8】：

对我来说，这是我发布表单的方式：更改<a href="#" onclick="$('form')[0].submit(); return false;">Submit</a> 进入<button type="submit" value="">Submit</button> 解决了我的问题。

【讨论】：