Question

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

我有一个使用Visual Studio 2013创建的新创建的“空”MVC5项目。如果可能，我需要一个来自并且需要AJAX行为。在MVC3中使用Ajax.BeginForm始终是直接的，所以我认为它也将在MVC5中。

但是当我单击提交按钮时，我在AjaxOptions中的OnBegin，OnFailure或OnSuccess中指定的javascript函数都没有被调用。而是将一个无Ajax的帖子发送到服务器，通过检查返回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();
    }

我已经检查了一些关于此问题的其他帖子，但找不到解决方案。虽然有人暗示可能的解决方案，但我对微软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。

Answer 1

将本地副本作为MVC项目的一部分“ 从VS2013开始，右键单击MVC 5项目，选择“Manage NuGet Packages”。选择“在线”并搜索“jquery.unobtrusive-ajax”，然后安装“Microsoft.jQuery.Unobtrusive.Ajax”。

Answer 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文件。

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

Answer 3

因为我在我的布局中包含了以下脚本，所以一切都已经开始了：

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

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

如果可能，请随意提供更好的方法，或回答问题：“为什么MVC项目模板（VS2013）中不包含此脚本？”

Answer 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>

Answer 5

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

出于某种原因，在创建新项目和添加nuget包

时，默认情况下不是这样

Answer 6

对我而言，它有点奇特且反直觉。

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

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

但处理AjaxRequest的POST操作没有[Route（“contact”）]属性，这就是为什么它不起作用。

Answer 7

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

Answer 8

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

Ajax.BeginForm不会触发AJAX脚本，而是回退回发

8 个答案: