MVC 4 Ajax.beginform提交 - 导致完全回发

Question

MVC4互联网项目

我使用Ajax.BeginForm做验证回发和回发整个页面，而不仅仅是UpdateTargetID。我查看过其他文章，并没有找到答案。我为测试构建了一个新的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"; } 
<script src="~/Scripts/jquery-1.8.2.js"></script> 
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 
<script type="text/javascript"> var onSuccess = function (result) 
{ 
    if (result.url) { window.location.href = result.url; } 
} 
    // when server returns JSON object containing an url property redirect the browser </script> 
<h1>@ViewBag.Title</h1> 
<div id="IDXForm"> 
@using (Ajax.BeginForm("Index", new AjaxOptions() { UpdateTargetId = "IDXForm", OnSuccess = "onSuccess", HttpMethod = "Post" })) 
{ 
    @Html.AntiForgeryToken() @Html.ValidationSummary(true) 
    <span>@Html.EditorFor(m => m.FirstName) @Model.EnrollmentDate.ToShortDateString()</span> <input type="submit" value="Submit" />     
} 
</div> 

最初的观点是：

送审后：送件后身体

的源代码：

 <div id="body"> 

      <section class="content-wrapper main-content clear-fix"> 

<script src="/Scripts/jquery-1.8.2.js"></script> 
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script> 
<script type="text/javascript"> var onSuccess = function (result) { if (result.url) { window.location.href = result.url; } } 
    // when server returns JSON object containing an url property redirect the browser </script> 
<h1>Student</h1> 
<div id="IDXForm"> 
<form action="/" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-success="onSuccess" data-ajax-update="#IDXForm" id="form0" method="post"><input name="__RequestVerificationToken" type="hidden" value="vkCszJu-fKT6zUr5ys2StOTPF6a9pZdj5k1MyaAZKo8MPweS53dUuni0C9B17NjL_GVydHa7-jI1H0F9HrYEdKxeCWq9mCeER3ebaZYLxIs1" /><span><input class="text-box single-line" id="FirstName" name="FirstName" type="text" value="Carson" /> 9/1/2005</span> <input type="submit" value="Submit" />                          
</form></div> 

任何人都可以看到什么是错我的代码？

谢谢。

Answer 1

UpdateTargetID的内容必须位于局部视图中，并且需要从Controller Post Action调用局部视图。 Darin通过电子邮件回复我（谢谢Darin）。您需要使用部分视图。我试着更新他的答案两次，主持人没有做到或提供了解释，为什么我发布自己的答案为他人带来好处。

_MyForm查看：

@model AJAX_Test.Models.Student 

@using (Ajax.BeginForm("Index", new AjaxOptions { UpdateTargetId = "IDXForm", OnSuccess = "onSuccess" })) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true) 
    <span> 
     @Html.EditorFor(m => m.FirstName)    @Model.EnrollmentDate.ToShortDateString() 
    </span> 
    <input type="submit" value="Submit" />                          
} 

主视图：

<div id="IDXForm"> 
    @Html.Partial("_MyForm") 
</div> 

控制器POST操作：

ModelState.AddModelError(string.Empty, "AJAX Post"); 
    return PartialView("_MyForm", vM); 

Answer 2

一对夫妇的事情，想到这可能会导致此行为：

1. 在你的问题，你已经证明你的捆绑注册，但你实际上包括他们在您的视图或布局？请确保您的视图或布局已首次列入jquery.js然后jquery.unobtrusive-ajax.js（按顺序）：

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

2. 的jquery.unobtrusive-ajax.js脚本不使用jQuery 1.9和更高版本兼容，因为它依赖于.live()这一直removed in jQuery 1.9。所以，如果由于某种原因，你已经升级你的jQuery版本到1.9或更高版本，将无法正常工作。你应该降级。

3. 在您的onSuccess回调中，如果控制器操作返回JSON，则您将重定向到url。你有没有证实，情况并非如此？因为当一个重定向发生使用window.location.href这是非常正常的，你得到一个完整的页面重载，而不是局部更新

在所有情况下使用JavaScript调试工具，看看究竟发生了什么。如果您使用的是Firefox，那么您可以使用FireBug。如果您使用Google Chrome，则可以使用Chrome开发人员工具栏。查看控制台，了解可能存在的JavaScript错误。查看网络选项卡，查看是否所有JavaScript都已成功加载，并且您没有404错误。学习如何使用工具来调试您的JavaScript代码。您会惊讶地发现您的代码中可能存在的潜在问题，这些工具将为您提供多少信息。

Answer 3

使用：<script src="../Scripts/jquery.unobtrusive-ajax.js"></script>

这个js是什么使阿哈x工作。

Answer 4

至少，你需要这两个包括：

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

如果仍然没有帮助，请在web.config中，并确保不显眼的启用：

<add key="UnobtrusiveJavaScriptEnabled" value="true" /> 

如果仍然没有效果，确保不显眼的js文件与当前的jQuery版本，无论jQuery的版本使用的是，它可以在以下网址找到兼容：

http://www.nuget.org/packages?q=unobtrusive

Answer 5

其他几个要注意的事项。

1. jquery.unobtrusive-ajax.js现在支持JQuery 1.9。我已经安装了jquery.unobtrusive-ajax.js版本3.0.0，它正在与jQuery 1.9

2.确保所有的div每日新闻正确关闭，包括其中包含Ajax.BeginForm和视图主视图。此外，如果你有@ Html.Raw（）在主视图或包含Ajax.BeginForm谨慎对待，太多的视图内。

张贴在这里保存头一天划伤。

Answer 6

请确保你有你的包的配置包括此

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery.unobtrusive*", 
        "~/Scripts/jquery-{version}.js")); 

bundles.Add（新ScriptBundle（ “〜/包/ jqueryval”）。包括（ “〜/脚本/ jquery.validate *”） ）;