Ajax.BeginForm 不触发 AJAX 脚本,依赖回发 [英] Ajax.BeginForm doesn't fire AJAX script, falls back on postback

查看:24
本文介绍了Ajax.BeginForm 不触发 AJAX 脚本,依赖回发的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我将用解决方案更新这个问题,我想包括我的问题和解决方案,因为我无法在 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 包括:

我的观点:

@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="验证">@Html.ValidationMessageFor(m => m.FirstName)

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

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

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

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

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

}

我的控制器操作(未完成):

[HttpPost]public ActionResult Contact(ContactViewModel viewModel, String formName = ""){如果 (Request.IsAjaxRequest()){返回新的 EmptyResult();}返回新的 EmptyResult();}

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

在 Microsoft CDN 上,它们具有以下部分:

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

ASP.NET MVC 5.0http://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.jshttp://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.min.jsASP.NET MVC 4.0http://ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.jshttp://ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.jsASP.NET MVC 3.0http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.jshttp://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.jshttp://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.jshttp://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.jshttp://ajax.aspnetcdn.com/ajax/mvc/3.0/MicrosoftMvcAjax.jshttp://ajax.aspnetcdn.com/ajax/mvc/3.0/MicrosoftMvcAjax.debug.jsASP.NET MVC 2.0http://ajax.aspnetcdn.com/ajax/mvc/2.0/MicrosoftMvcAjax.jshttp://ajax.aspnetcdn.com/ajax/mvc/2.0/MicrosoftMvcAjax.debug.jsASP.NET MVC 1.0http://ajax.aspnetcdn.com/ajax/mvc/1.0/MicrosoftMvcAjax.jshttp://ajax.aspnetcdn.com/ajax/mvc/1.0/MicrosoftMvcAjax.debug.js

他们似乎认为 MVC5 需要的唯一脚本是 jquery.validate.unobtrusive.

解决方案

自从我在布局中包含以下脚本后,一切都开始了:

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

在 Microsoft CDN 上,该脚本似乎是特定于 MVC3 的.

如果可能,请随意贡献更好的方法,或回答以下问题:为什么此脚本未包含在 MVC 项目模板 (VS2013) 中?"

I will update this problem with the solution, I wanted to include my problem and solution as I wasn't able to find it on Stackoverflow. If you want to jump in with the solution, feel free.

I have a newly created 'Empty' MVC5 project created using Visual Studio 2013. I needed a from and wanted AJAX behavior if possible. Using Ajax.BeginForm was always straight-forward in MVC3 so I thought it would be in MVC5 also.

However none of the javascript functions I've specified in OnBegin, OnFailure or OnSuccess inside the AjaxOptions are invoked when I click the submit button. Instead an Ajaxless post is sent to the server, this has shown to be true by examining Request.IsAjaxRequest which returns false.

I have concluded that for some reason, then, ajax isn't being used at all. I've checked a number of things such as web.config, my layout scripts, etc.

My layout includes the following scripts:

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

My web.config includes:

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

My view:

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

My controller action (unfinished):

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

    return new EmptyResult();
    }

I have checked some other posts on this problem, and couldn't find a solution. Though some hinted at the possible solution, I was confused by the Microsoft CDN (http://www.asp.net/ajaxlibrary/cdn.ashx).

On the Microsoft CDN they have the following section:

The following ASP.NET MVC JavaScript files are hosted on this 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 

They would seem to suggest the only script you'll need for MVC5 is jquery.validate.unobtrusive.

解决方案

Everything has started working since I included the following script in my layout:

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

On the Microsoft CDN it looks as though this script is MVC3-specific.

Feel free to contribute better ways if possible, or answer the question: "Why isn't this script included in the MVC project template (VS2013)?"

这篇关于Ajax.BeginForm 不触发 AJAX 脚本,依赖回发的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆