MVC 4 Ajax.beginform提交 – 导致完全回发
MVC4互联网项目
我正在使用Ajax.BeginForm进行回传validation,它回发整个页面而不仅仅是UpdateTargetID。 我已经查看了SO上的其他post,但没有找到答案。 我已经构建了一个新的MVC4 Internet项目,仅用于测试(VS 2012已经使用’ASP.NET和Web Tools 2012.2’进行了更新)。
这是我的代码
调节器
public ActionResult Index() { var vM = _db.Students.FirstOrDefault(); return View(vM); } [HttpPost] [ValidateAntiForgeryToken] public ActionResult Index(Student vM) { if (ModelState.IsValid) { //code if Model valid return Json(new { url = Url.Action("About", "Controller") }); } ModelState.AddModelError(string.Empty, "AJAX Post"); return PartialView("Index", vM); }
视图
@model AJAX_Test.Models.Student @{ ViewBag.Title = "Student"; } var onSuccess = function (result) { if (result.url) { window.location.href = result.url; } } // when server returns JSON object containing an url property redirect the browser @ViewBag.Title
@using (Ajax.BeginForm("Index", new AjaxOptions() { UpdateTargetId = "IDXForm", OnSuccess = "onSuccess", HttpMethod = "Post" })) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) @Html.EditorFor(m => m.FirstName) @Model.EnrollmentDate.ToShortDateString() }
初步观点是:
提交后:
提交后正文的源代码:
var onSuccess = function (result) { if (result.url) { window.location.href = result.url; } } // when server returns JSON object containing an url property redirect the browser Student
任何人都可以看到我的代码有什么问题吗?
谢谢。
我想到的一些可能导致此行为的事情:
-
在您的问题中,您已经显示了捆绑注册,但实际上是否已将它们包含在您的视图或布局中? 确保在您的视图或布局中首先包含jquery.js
,然后是jquery.unobtrusive-ajax.js
( jquery.unobtrusive-ajax.js
顺序):
@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryval")
-
jquery.unobtrusive-ajax.js
脚本与jquery 1.9及更高版本不兼容,因为它依赖removed in jQuery 1.9
已removed in jQuery 1.9
的.live()
。 所以,如果由于某种原因你已经将你的jQuery版本升级到1.9或更高版本,那将无效。 你应该降级。
-
在onSuccess回调中,如果控制器操作返回JSON,则重定向到url。 你有没有证实情况并非如此? 因为当使用window.location.href
重定向时,你得到一个完整页面重新加载而不是部分更新是很正常的
在所有情况下,使用javascript调试工具来查看到底发生了什么。 如果您使用的是Firefox,那么您可以使用FireBug。 如果您使用的是谷歌浏览器,则可以使用Chrome开发者工具栏。 查看控制台,了解您可能遇到的潜在JavaScript错误。 查看网络选项卡以查看是否已成功加载所有javascripts,并且您没有404错误。 了解如何使用工具调试JavaScript代码。 您会惊讶地发现有关这些工具将为您提供的代码可能存在的潜在问题的信息。
UpdateTargetID的内容必须位于部分视图中,并且需要从Controller Post Action调用部分视图。 达林通过电子邮件回复了我(谢谢达林)。 你需要使用一个parital视图。 我试图两次更新他的答案,主持人没有这样做或提供解释为什么所以我发布我自己的答案给别人的好处。
_MyForm查看:
@model AJAX_Test.Models.Student @using (Ajax.BeginForm("Index", new AjaxOptions { UpdateTargetId = "IDXForm", OnSuccess = "onSuccess" })) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) @Html.EditorFor(m => m.FirstName) @Model.EnrollmentDate.ToShortDateString() }
主要观点:
@Html.Partial("_MyForm")
控制器发布动作:
ModelState.AddModelError(string.Empty, "AJAX Post"); return PartialView("_MyForm", vM);
使用:
这个JS是使Ajax工作的原因。
确保你的捆绑包配置包括这个
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle(“〜/ bundles / jqueryval”)。Include(“〜/ Scripts / jquery.validate *”));
至少,你需要这两个包括:
@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryval")
如果仍然没有帮助,请检查web.config并确保启用unobtrusive:
如果仍然没有效果,请确保不引人注目的js文件与当前的jQuery版本兼容,无论您使用的jQuery版本是什么,可以在以下URL找到:
要注意的其他事情夫妇。
- jquery.unobtrusive-ajax.js现在支持JQuery 1.9。 我已经安装了jquery.unobtrusive-ajax.js 3.0.0版,它正在使用JQuery 1.9
2.确保正确关闭所有分区,包括包含Ajax.BeginForm和主视图的视图。 另外,如果您在主视图中或在包含Ajax.BeginForm的视图内部有@ Html.Raw(),那么也要谨慎。
在这里张贴以节省一天的头部刮伤。
Interesting Posts