- 首页
- 前端开发
- Ajax.BeginForm 不触发 AJAX 脚本,依赖回发
Ajax.BeginForm 不触发 AJAX 脚本,依赖回发
[英] Ajax.BeginForm doesn't fire AJAX script, falls back on postback
本文介绍了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屋!
查看全文