MVC4 Ajax.BeginForm 不替换 UpdateTargetId答案

【问题标题】：MVC4 Ajax.BeginForm not replacing UpdateTargetIdMVC4 Ajax.BeginForm 不替换 UpdateTargetId
【发布时间】：2013-02-26 17:50:27
【问题描述】：

关于 Ajax.BeginForm 的问题有很多关于 Ajax.BeginForm 没有正确更新返回部分视图的目标元素的主题：
mvc4 ajax updating same page
ASP.NET MVC 4 - Ajax.BeginForm and html5
MVC 4 (razor) - Controller is returning a partialview but entire page is being updated
MVC 4 Ajax is not updating the PartialView within the page
但是，所有这些都可以通过手动写出 jQuery ajax 或包含丢失的 javascript 文件来解决。

  @using (Ajax.BeginForm("PostcardDetails", new AjaxOptions()
  {
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "details"
  }))
  {
    <div id="PostcardSearchResults">
      @{Html.RenderAction("PostcardSearchResults", Model);}
    </div>
  }
  <div id="details">
  </div>

相关控制器代码：

[AcceptVerbs(HttpVerbs.Post | HttpVerbs.Get)]
public ActionResult PostcardSearchResults(PostcardSearchFilter filter)
{
        PostcardSearchResults model = new PostcardSearchResults(filter);
        return PartialView("_PostcardSearchResults", model);
}

在我的布局中，我引用了这些 jQuery 文件。此外，我已验证该页面正在输出正确的路径，并且它找到了正确的文件。我尝试切换unobtrusive-ajax.min.js 和validate.min.js 的顺序，但没有成功。

<script type="text/javascript" src="@Url.Content("~/Scripts/globalize.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.9.1.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.10.0.custom.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

此外，在我网站的根 web.config 和我的 View 文件夹中的 web.config 中，我已经包含：

<add key="webpages:Version" value="2.0.0.0"/>
<add key="PreserveLoginUrl" value="true"/>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

我不知道还能去哪里找。没有抛出 javascript 错误，并且控制器被正确命中，返回 PartialViewResult。 HTML 中的 Form 元素填充了所有正确的 data- 属性。

【问题讨论】：

标签： c# ajax asp.net-mvc-4 ajax.beginform razor-2

【解决方案1】：

jquery.unobtrusive-ajax.min 和 JQuery 1.9 存在问题，因为 JQuery 1.9 不支持任何more 的 live() 方法。所以你应该使用JQuery migrate插件，并引用JQuery migrate js。

【讨论】：

有点迷茫，和OP问题有什么关系？你是说 .live 是 Ajax.Beginform 在后台使用的吗？
是的，Ajax Beginform 在后台使用实时
控制器被正确调用了吗？当你得到回报时你得到了什么？
您正在使用 MVC4，因此您不需要将 @Url.Content("~/Scripts/globalize.js") 仅使用 "~/Scripts/globalize.js" 的场景您所描述的通常发生在未正确引用脚本时
我最终将我的 jquery.unobtrusive-ajax.min.js 滚动回原始文件（这将它带回使用 live() 方法，并包括 jQuery 迁移插件。这个解决了这个问题。

【解决方案2】：

确保将 unobtrusive-ajax.js 包含到您已放置 ajax 表单的页面中。

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

【讨论】：

【解决方案3】：

我遇到了这个问题，我刚刚从 NuGet 安装了最新的不显眼的包并解决了这个问题

PM> 安装包 Microsoft.jQuery.Unobtrusive.Ajax

需要 JQ 1.8+

【讨论】：

【解决方案4】：

我不知道其他人是否会遇到这种情况，但就我而言，它似乎只是没有更新。我正在构建一个简单的编辑表单，您可以在其中从下拉列表中选择要编辑的项目，单击一个按钮，然后 AJAX 会为所选项目加载一个编辑表单。

它第一次工作，但在更改我在下拉列表中的选择并单击按钮后，没有任何表单值更改，即使我验证了我的服务器端代码正在将新项目加载到视图模型中.所以看起来替换不起作用。在逐步浏览 jquery.unobtrisive-ajax.js 之后，我发现它正在替换我的目标元素的内容，只是使用它已经拥有的相同视图标记，这与传递的模型不匹配去看风景！

那时我意识到，是 ModelState 吸引了我。我第二次单击加载按钮时，它提交了我的下拉选择以及我填写的编辑表单。编辑表单中的所有值都添加到ModelState（如您所料）。然后，我的控制器代码将提交的视图模型（模型绑定器从编辑表单值创建）替换为所选下拉值的视图模型，并将其传递给局部视图。但是，局部视图使用了一堆 Html.[X]For 辅助方法。这些忽略更新的视图模型并直接从ModelState 中提取它们的值。例如：

@Html.DisplayFor(m => m.Name)
@Model.Name

将显示两个不同的名称值；前者显示提交的名称，后者显示更新的名称。这是让 MVC 在（服务器端）验证错误后记住用户表单条目的机制。在这种情况下，因为这是部分页面加载并且我只是丢弃了所有提交的值，所以我不需要任何 ModelState 值，所以我只需调用 ModelState.Clear() 在返回我的更新视图之前查看模型。

    public ActionResult GetItemEditForm(EditItemsViewModel editItemsVM)
    {
        if (editItemsVM.SelectedItemID != null)
        {
            //Load the selected item
            ItemsModelManager.GetEditItemsVM(editItemsVM);

            //Clear the submitted form values
            ModelState.Clear();
        }

        return PartialView("_ItemsEditor", editItemsVM);
    }

【讨论】：

谢谢朋友。您的回答让我再次回顾代码，意识到之前的开发人员正在返回 Content(singleProperty) 而不是 PartialView(model)，这是我更新后的标记所期望的。

【解决方案5】：

我遇到了与您类似的问题 - 我已正确捆绑和加载所有脚本，并且所有代码均已正确实现。我检查了包管理器以查看是否需要更新任何脚本，而 jQuery 和 jquery.unobtrusive-ajax 确实需要。 jQuery 从 1.9 升级到 1.9.1。当我重建我的解决方案时，目标 DIV 已成功更新。尝试更新解决方案中的所有 JS，它可能会起作用。

【讨论】：

【解决方案6】：

以下内容需要出现在任何使用 ajax 的页面上。

@section Script {
    @Scripts.Render("~/bundles/jqueryval")
}

【讨论】：

【解决方案7】：

哇，这里有很多答案。我的问题是由于引导面板。它正在创建一个“嵌套”面板。我删除了面板标记，只使用了一个普通的旧 div，它就可以工作了。我认为 UpdateTargetId 必须是 AJAX 表单的直接父级。

这是说明问题的 html。

<div class="panel panel-default" id="notes-form">
  <div class="panel-body">
    @using (Ajax.BeginForm("EditNote", new { id = Model.Id }, new AjaxOptions { UpdateTargetId = "notes-form" }, htmlAttributes: new { @class = "form-horizontal" }))
    {
    }
  </div>
</div>

【讨论】：

【解决方案8】：

对于那些需要更多解释的人......

在Package Manager Console PM中输入这个> Install-Package jQuery.Migrate

在你的部分视图中引用这个：

script src="~/Scripts/jquery.unobtrusive-ajax.js">

祝大家编码愉快。

【讨论】：

【解决方案9】：

用户 xr280xr 对包含的回答

ModelState.Clear();

为我工作。我正在使用的应用程序位于较旧的 jQ (1.7.x) 上，因此 migrate 在我们的情况下不起作用。清除控制器中的模型状态正是我们预期的 BeginForm 所做的。

【讨论】：

【解决方案10】：

检查母版页或您的页面的脚本参考关于 jquery.unobtrusive-ajax.js 如果不添加关于这个 js 的参考：jquery.unobtrusive-ajax.js

【讨论】：

添加什么？这是一个不完整的答案。
关于此的参考：jquery.unobtrusive-ajax.js

【解决方案11】：

live() 方法在 jQuery 1.7 版中被弃用，并在 1.9 版中被删除。请改用 on() 方法。有关更多信息，请参阅：http://www.w3schools.com/jquery/event_live.asp

【讨论】：

【解决方案12】：

首先，从 NuGet 管理器安装“Microsoft.JQuery.Unobtrusive.Ajax”，然后包括“~/Scripts/jquery.unobtrusive " 在 "BundleConfig" 中包含 "jquery-{version}.js";这看起来类似于：

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

【讨论】：