C# MVC4 Ajax.BeginForm 不替换 UpdateTargetId
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15095870/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MVC4 Ajax.BeginForm not replacing UpdateTargetId
提问by drovani
There are so many topics on SO about issues with the Ajax.BeginForm not correctly updating the target element with the return partial view:
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
However, all of these are answered by either manually writing out the jQuery ajax, or including a missing javascript file.
关于 Ajax.BeginForm 没有正确更新具有返回部分视图的目标元素的问题有很多关于 SO 的主题：
mvc4 ajax updates same page
ASP.NET MVC 4 - Ajax.BeginForm 和 html5
MVC 4 (razor) - Controller is返回一个 partialview 但整个页面正在更新
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>
Relevant controller code:
相关控制器代码：
[AcceptVerbs(HttpVerbs.Post | HttpVerbs.Get)]
public ActionResult PostcardSearchResults(PostcardSearchFilter filter)
{
PostcardSearchResults model = new PostcardSearchResults(filter);
return PartialView("_PostcardSearchResults", model);
}
In my layout, I am referencing these jQuery files. Additionally, I've verified that the page is outputting the proper path, and that it finds the correct files. I've tried switching the ordering of unobtrusive-ajax.min.jsand validate.min.js, to no success.
在我的布局中，我引用了这些 jQuery 文件。此外，我已验证该页面是否正在输出正确的路径，并且它找到了正确的文件。我试过切换unobtrusive-ajax.min.jsand的顺序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>
Additionally, in my website's root web.config, and the web.config in my View folder, I have included:
此外，在我网站的根 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"/>
I'm at a loss for where else to look. There are no javascript errors being thrown, and the controller is being properly hit, returning a PartialViewResult. The Form element in the HTML is populating all the correct data-attributes.
我不知道还有什么地方可以看。没有抛出 javascript 错误，并且控制器被正确命中，返回 PartialViewResult。HTML 中的 Form 元素正在填充所有正确的data-属性。
采纳答案by Gabriel Monteiro Nepomuceno
There is a problem with jquery.unobtrusive-ajax.min and JQuery 1.9 because JQuery 1.9 doesn't support the live() method any more. So you should use the JQuery migrate plug-in, and reference the JQuery migrate js.
没有与jquery.unobtrusive-ajax.min和JQuery 1.9因为jQuery 1.9不支持直播（）方法的任何一个问题，更。所以你应该使用JQuery migrate插件，并参考JQuery migrate js。
回答by MattSull
I was having similar problems to you - I had all my scripts bundled and loading correctly, and had all code implemented correctly. I checked package manager to see if any scripts needed to be updated and jQuery and jquery.unobtrusive-ajax did. jQuery went from 1.9 to 1.9.1. When I rebuilt my solution the target DIV was updated successfully. Try and update all JS in your solution, it may work.
我遇到了与您类似的问题 - 我将所有脚本捆绑并正确加载，并且所有代码都正确实现。我检查了包管理器，看看是否有任何脚本需要更新，jQuery 和 jquery.unobtrusive-ajax 做了。jQuery 从 1.9 到 1.9.1。当我重建我的解决方案时，目标 DIV 已成功更新。尝试更新解决方案中的所有 JS，它可能会起作用。
回答by user3015361
The following needs to be on any page that uses ajax.
任何使用 ajax 的页面都需要以下内容。
@section Script {
@Scripts.Render("~/bundles/jqueryval")
}
回答by Andy
I had this problem, I just installed the latest unobtrusive package from NuGet and solved the problem
我遇到了这个问题，我刚刚从 NuGet 安装了最新的不显眼的包并解决了这个问题
PM> Install-Package Microsoft.jQuery.Unobtrusive.Ajax
PM> 安装包 Microsoft.jQuery.Unobtrusive.Ajax
Will need JQ 1.8+
需要 JQ 1.8+
回答by Cyrus
Make sure you include the unobtrusive-ajax.js to the page, which you have placed your ajax form.
确保将 unobtrusive-ajax.js 包含到已放置 ajax 表单的页面中。
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
回答by cyclical
For those that need a bit more explanation....
对于那些需要更多解释的人......
Type this in Package Manager Console PM> Install-Package jQuery.Migrate
在 Package Manager Console PM> Install-Package jQuery.Migrate 中输入
Reference this in your partialview:
在您的局部视图中引用此内容：
script src="~/Scripts/jquery.unobtrusive-ajax.js">
脚本 src="~/Scripts/jquery.unobtrusive-ajax.js">
Happy coding everyone.
祝大家编码愉快。
回答by xr280xr
I don't know if anyone else will run into this, but in my case, it only appeared to not be updating. I was building an simple edit form where you select the item you wish to edit from a dropdown, click a button, and it AJAX loads an edit form for the selected item.
我不知道其他人是否会遇到这种情况，但就我而言，它似乎只是没有更新。我正在构建一个简单的编辑表单，您可以在其中从下拉列表中选择要编辑的项目，单击一个按钮，然后 AJAX 会为所选项目加载一个编辑表单。
It worked the first time, but after changing my selection in the drop down list, and clicking the button, none of the form values changed, even though I verified my server-side code was loading the new item into the view model. So it appeared Replace was not working. After stepping through jquery.unobtrisive-ajax.js, I found that it wasreplacing the contents of my target element, just with the same view markup it already had, which did not match the model that was passed to the view!
它第一次工作，但在更改下拉列表中的选择并单击按钮后，没有任何表单值更改，即使我验证了我的服务器端代码正在将新项目加载到视图模型中。所以看起来 Replace 不起作用。在单步执行 jquery.unobtrisive-ajax.js 之后，我发现它正在替换我的目标元素的内容，只是使用它已经拥有的相同视图标记，这与传递给视图的模型不匹配！
That's when I realized, it was the ModelStatethat was getting me. The second time I clicked the load button, it submitted my dropdown selection but also my filled out edit form. All of the values in the edit form were added to ModelState(as you would expect). My controller code then replaced the submitted view model (that the model binder created from the edit form values) with the view model for the selected drop down value and passed it to the partial view. However, the partial view uses a bunch of the Html.[X]Forhelper methods. These ignore the updated view model and pull their values directly from the ModelState. For example:
那时我才意识到，正是它ModelState吸引了我。我第二次单击加载按钮时，它提交了我的下拉选择以及我填写的编辑表单。编辑表单中的所有值都添加到ModelState（如您所料）。我的控制器代码然后用选定下拉值的视图模型替换提交的视图模型（模型绑定器从编辑表单值创建的）并将其传递给局部视图。然而，局部视图使用了一堆Html.[X]For辅助方法。这些忽略更新的视图模型并直接从ModelState. 例如：
@Html.DisplayFor(m => m.Name)
@Model.Name
would display two different values for Name; the former displaying the submitted Name and the latter, the updated Name. This is the mechanism that lets MVC remember your user's form entries after a (server-side) validation error. In this case, because this is a partial page load and I'm just throwing out all of the submitted values, I don't need any of the ModelState values so I just call ModelState.Clear() before returning my view for the updated view 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);
}
回答by Jason Turnage
User xr280xr's answer for including
用户 xr280xr 的回答包括
ModelState.Clear();
ModelState.Clear();
worked for me. The app I'm working with is on an older jQ (1.7.x) so migrate wouldn't work in our situation. Clearing the model state in the controller did exactly what we expected BeginForm to do.
为我工作。我正在使用的应用程序是在较旧的 jQ (1.7.x) 上，因此 migrate 在我们的情况下不起作用。清除控制器中的模型状态正是我们期望 BeginForm 做的事情。
回答by Steven.Qiu
Check The Master Page OR Your Page's Scripts Reference about jquery.unobtrusive-ajax.js if not add Reference about this js :jquery.unobtrusive-ajax.js
如果没有添加有关此 js 的参考：jquery.unobtrusive-ajax.js，请检查母版页或您的页面的脚本参考关于 jquery.unobtrusive-ajax.js
回答by Madhusudhan V Indian
The live() method was deprecated in jQuery version 1.7, and removed in version 1.9. Use the on() method instead.For more info refer: http://www.w3schools.com/jquery/event_live.asp
live() 方法在 jQuery 1.7 版中被弃用，并在 1.9 版中被移除。改用 on() 方法。有关更多信息，请参阅：http: //www.w3schools.com/jquery/event_live.asp
