我在MVC中有一个局部视图,类似于:
...
在该div内,存在一种使用AJAX调用控制器并返回相同的局部视图的表单。 问题在于,调用视图的结果将替换div的内容,而不是整个div,而我最终得到:
...
我用一周的 MVC和AJAX经验可以想到的唯一解决方案是将div放在部分视图的外面,并使部分视图仅包含内部部分,但是该形式将引用ID到外部。 查看表单所在的位置,打破了我留在那里的小封装。 有更好的解决方案吗?
.NET MVC 3附带的不引人注目的Ajax库使用基于jQuery.ajax的四个回调的回调。但是,Ajax.BeginForm方法中的InsertionMode = InsertionMode.Replace不会导致调用jQuery的replaceWith。而是使用.html(data)替换目标元素的内容(而不是元素本身)。
我已经在我的博客中描述了此问题的解决方案:
//11/jquerys-replacewith-and-using-it-to.html
该解决方案完美地工作。 我必须承认,这让我感到惊讶,因为我绑定到不引人注目的Ajax库的编辑版本。 如果我将来允许nuget升级,则我的应用程序将崩溃。 我希望Microsoft将来添加此功能。 对于订单项的内联编辑,这确实是唯一的解决方案。
使用
AjaxOptions { UpdateTargetId ="myDiv", InsertionMode = InsertionMode.Replace }
正如tvanfosson所说,应该替换" #myDiv"元素的全部内容。您的问题是" #myDiv"在哪里。这是一个例子:
其中MyPartialView是:
...
如果您在部分视图中包含" #myDiv" div,则它将在收到响应(及其内容)后立即呈现,然后将其内容替换为与该部分视图相同的响应(包括其自己的" #myDiv'div),这就是为什么您总是以2个嵌套div结束的原因。
您应该始终对部分视图使用容器,然后将UpdateTargetId设置为容器ID。
编辑:我更新了代码以表示您在问题中描述的确切情况。
您能这么友善并显示一些控制器代码吗?
局部视图需要一些数据时该怎么办? 如何将最新数据发送到局部视图?
您正在使用AjaxHelper.Form还是jQuery。如果您使用的是jQuery,是否尝试使用replaceWith()?使用AjaxHelper是否使用AjaxOptions { InsertionMode = InsertionMode.Replace }?我认为无论使用哪种方法,都可以用部分视图中的结果替换整个DIV。
我使用AjaxHelper.Form和InsertionMode.Replace是默认设置。 我没有尝试检查它,因为替代方案在之前和之后,这绝对不是我想要的。 也许我应该尝试使用jQuery,但是我首先必须学习如何做。
我在 MVC 5中遇到了同样的问题。
我不希望PartialView对其可能包含的div有一些了解,所以我不接受这种解决方法。
然后,我注意到涉及ReplaceWith的其他答案,并找到了简单的解决方案:
InsertionMode = InsertionMode.ReplaceWith
现在,mvc部分视图可以完全用ajax帮助器替换自身,而不必依赖于自身外部的名称。
为什么这不是公认的答案?
您也应该尝试使用jQuery(根据我对MS MVC表单AJAXifying技术的回答):
$(document).ready(function() {
ajaxify($('div#comments'));
});
function ajaxify(divWithForm) {
var form = $('form', divWithForm);
$(':submit', form).click(function (event) {
event.preventDefault();
$.post(form.attr('action'), form.serialize(),
function(data, status) {
if(status == 'success') {
var newDivWithForm = $(data);
ajaxify(newDivWithForm);
divWithForm.after(newDivWithForm).remove();
}
}
);
});
}
您解决问题了吗?我有同样的问题,但是我发现了这一点:
http://buildingwebapps.blogspot.ro//11/jquerys-replacewith-and-using-it-to.html
希望对您有帮助。