MVC4 Ajax.BeginForm not replacing UpdateTargetId

Question

在so上有很多关于Ajax问题的主题。BeginForm没有正确地使用返回的部分视图更新目标元素:
Mvc4 ajax更新同一页面
ASP。. NET MVC 4 - Ajax。BeginForm和html5
MVC 4 (razor) -控制器返回一个局部视图，但整个页面正在更新
MVC 4 Ajax没有更新页面内的PartialView
然而，所有这些问题都可以通过手动编写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。配置和web。在我的View文件夹中，我包含了:

<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-属性。

Answer 1

jquery.unobtrusive-ajax有一个问题。因为JQuery 1.9不再支持live()方法了。因此，您应该使用JQuery迁移插件，并引用JQuery迁移js。

Answer 2

请确保在您放置ajax表单的页面中包含了unobtrusious -ajax.js。

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

Answer 3

我遇到了这个问题，我刚刚从NuGet安装了最新的不引人注目的包并解决了这个问题

PM> Install-Package microsoft . jquery . unobusive . ajax

将需要JQ 1.8+

Answer 4

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

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

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

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

将显示两个不同的Name值;前者显示提交的Name，后者显示更新后的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);
    }

Answer 5

我有类似的问题，你-我有我所有的脚本捆绑和加载正确，并有所有的代码实现正确。我检查包管理器，看看是否有脚本需要更新和jQuery和jQuery。unobtrusive-ajax。jQuery从1.9升级到1.9.1。当我重新构建我的解决方案时，目标DIV已成功更新。尝试和更新所有的JS在你的解决方案，它可能工作。

Answer 6

任何使用ajax的页面都需要以下内容

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

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

Answer 8

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

在Package Manager Console PM> Install-Package jQuery中输入这个。迁移

在你的partialview中引用:

脚本src = " ~/脚本/jquery.unobtrusive-ajax.js ">

祝大家编码愉快。

Answer 9

用户xr280xr对包含

的回答

ModelState.Clear();

对我有用。我正在使用的应用程序是在一个较旧的jQ (1.7.x)上，所以迁移不会在我们的情况下工作。清除控制器中的模型状态正是我们期望BeginForm所做的。

Answer 10

查看母版页或您的页面的脚本参考jquery.unobtrusive-ajax.js

Answer 11

live()方法在jQuery 1.7版本中已弃用，并在1.9版本中删除。请使用on()方法。欲了解更多信息，请参阅:http://www.w3schools.com/jquery/event_live.asp

Answer 12

首先，安装'Microsoft.JQuery.Unobtrusive。Ajax'从NuGet管理器和以后包括' ~/Scripts/jquery。不引人注目的"在" BundleConfig"后包括" jquery - {version} . js ";它看起来像这样:

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