7

MVC4 互联网项目

我正在使用 Ajax.BeginForm 进行带有验证的回发，它回发整个页面而不仅仅是 UpdateTargetID。我查看了关于 SO 的其他帖子，但没有找到答案。我构建了一个新的 MVC4 Internet 项目，仅用于测试（VS 2012 已更新为“ASP.NET 和 Web 工具 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>

最初的看法是： 在此处输入图像描述

提交后： 在此处输入图像描述

提交后body的源代码：

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

谁能看到我的代码有什么问题？

谢谢你。

4

6 回答 6

11

想到可能导致此行为的几件事：

  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 代码。您会惊讶于这些工具会为您提供多少有关您的代码可能遇到的潜在问题的信息。

于 2013-03-07T21:54:12.190 回答
9

UpdateTargetID 的内容必须在局部视图中，并且需要从 Controller Post Action 调用该局部视图。达林通过电子邮件回复了我（谢谢达林）。您需要使用部分视图。我已尝试两次更新他的答案，但版主没有这样做或解释原因，所以我发布我自己的答案以供他人受益。

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

控制器发布操作：

  ModelState.AddModelError(string.Empty, "AJAX Post");
  return PartialView("_MyForm", vM);
于 2013-03-19T00:47:23.110 回答
1

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

这个 JS 是 Ajax 工作的原因。

于 2013-12-20T07:43:46.380 回答
1

需要注意的其他几件事。

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

2. 确保所有的 div 标记都正确关闭，包括包含 Ajax.BeginForm 的视图和主视图。此外，如果您在主视图或包含 Ajax.BeginForm 的视图中有 @Html.Raw() ，也要小心。

在这里发帖以节省一天的头疼。

于 2014-03-31T23:12:12.303 回答
1

确保你有你的包配置包括这个

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

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.validate*"));

于 2016-02-10T18:43:51.583 回答
0

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

@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

于 2013-12-31T17:31:06.080 回答