Question

MVC4互联网项目

我正在使用Ajax.BeginForm通过验证进行回发，它会回发整个页面而不仅仅是UpdateTargetID。我已经查看了SO上的其他帖子，但没有找到答案。我已经构建了一个新的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>

初步观点是： enter image description here

提交后： enter image description here

提交后的正文源代码：

        <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

可能会导致此行为的一些事情会出现：

在您的问题中，您已展示了捆绑注册，但实际上是否已将其包含在视图或布局中？确保您在视图或布局中首先包含jquery.js，然后jquery.unobtrusive-ajax.js（按此顺序）：
```
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
```
jquery.unobtrusive-ajax.js脚本与jquery 1.9及更高版本不兼容，因为它依赖于.live() removed in jQuery 1.9。所以，如果由于某种原因你已经将你的jQuery版本升级到1.9或更高版本，那将无效。你应该降级。
如果控制器操作返回JSON，则在onSuccess回调中，您将重定向到URL。你有没有证实情况并非如此？因为当使用window.location.href进行重定向时，您可以获得整页重新加载而不是部分更新

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

Answer 2

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) 
    <span>
        @Html.EditorFor(m => m.FirstName)              @Model.EnrollmentDate.ToShortDateString()
    </span> 
    <input type="submit" value="Submit" />                                                                                                     
}

主要观点：

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

Controller Post Action：

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

Answer 3

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

这个JS是使Ajax工作的原因。

Answer 4

其他一些事情需要注意。

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

<强> 2。确保正确关闭所有分区，包括包含Ajax.BeginForm和主视图的视图。另外，如果您在主视图中或在包含Ajax.BeginForm的视图内部有@ Html.Raw（），那么也要谨慎。

在这里发帖以节省一天头部刮伤。

Answer 5

确保您的捆绑包配置包含此

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

bundles.Add（new ScriptBundle（＆＃34;〜/ bundles / jqueryval＆＃34;）。包括（＆＃34;〜/脚本/ jquery.validate *＆＃34））;

Answer 6

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

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

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

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

如果仍然没有效果，请确保不引人注目的js文件与当前的jQuery版本兼容，无论您使用的jQuery版本是什么，可以在以下URL找到：

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

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

6 个答案: