ASP.Net MVC 和复制 div 中的自 AJAX 更新部分视图/控制器答案

【问题标题】：Self-AJAX-updating partial-view/controller in ASP.Net MVC and the duplicating divASP.Net MVC 和复制 div 中的自 AJAX 更新部分视图/控制器
【发布时间】：2015-01-29 01:20:56
【问题描述】：

我在 MVC 中有一个部分视图，类似于：

<div id="comments">
    ...
</div>

在该 div 内部有一个表单，它使用 AJAX 调用控制器并返回相同的局部视图。问题是调用视图的结果是替换了div的内容，而不是整个div，我最终得到：

<div id="comments">
    <div id="comments">
        ...
    </div>
</div>

凭借我在 ASP.Net MVC 和 AJAX 方面的一周经验，我能想到的唯一解决方案是将 div 放在局部视图之外，并使局部视图仅包含内部部分，但随后表单将引用id 在表单所在的视图之外，打破了我留在那里的小封装。有没有更好的解决方案？

【问题讨论】：

标签： asp.net-mvc ajax partial-views

【解决方案1】：

.NET MVC 3 附带的不显眼的 Ajax 库使用基于 jQuery.ajax 的四个回调的回调。但是，Ajax.BeginForm 方法中的 InsertionMode = InsertionMode.Replace 确实 not 会导致调用 jQuery 的 replaceWith。相反，.html(data) 用于替换目标元素（而不是元素本身）的 contents。

我已经在我的博客上描述了这个问题的解决方案： http://buildingwebapps.blogspot.com/2011/11/jquerys-replacewith-and-using-it-to.html

【讨论】：

此解决方案完美运行。我必须承认，我被绑定到不显眼的 Ajax 库的编辑版本让我感到害怕。如果我将来允许 nuget 升级，那么我的应用程序将会崩溃。我希望微软将来会添加这个功能。这确实是行内编辑订单项的唯一解决方案。

【解决方案2】：

您使用的是 AjaxHelper.Form 还是 jQuery。如果您使用 jQuery，您是否尝试过使用 replaceWith()？使用 AjaxHelper 你在使用AjaxOptions { InsertionMode = InsertionMode.Replace } 吗？我认为使用任何一种方法都可以将整个 DIV 替换为部分视图的结果。

【讨论】：

我正在使用 AjaxHelper.Form 而 InsertionMode.Replace 是默认设置。我没有尝试检查它，因为替代方案是之前和之后，这绝对不是我想要的。也许我应该尝试使用 jQuery，但我首先必须学习如何。

【解决方案3】：

使用

AjaxOptions { UpdateTargetId = "myDiv", InsertionMode = InsertionMode.Replace }

应该替换 '#myDiv' 元素的全部内容，正如 tvanfosson 所说。您的问题是“#myDiv”在哪里。这是一个例子：

<div id="myDiv">
    <% Html.RenderPartial("MyPartialView"); %>
</div>

MyPartialView 在哪里：

<div id="comments">
    <% using (Ajax.BeginForm(new AjaxOptions() { UpdateTargetId = "myDiv", InsertionMode = InsertionMode.Replace } )) {%>        
    ...
    <input type="submit" value="Submit comment" />
    <% } %>
</div>

如果你在局部视图中包含'#myDiv' div，它将在收到响应后立即渲染（连同它的内容），然后它的内容将被替换为相同的局部视图的响应（包括它自己的 '#myDiv' div），这就是为什么你总是以 2 个嵌套 div 结束。

您应该始终为局部视图使用容器，然后将 UpdateTargetId 设置为容器 ID。

编辑：我更新了代码以代表您在问题中描述的确切情况。

【讨论】：

局部视图什么时候需要一些数据？如何将最新数据发送到局部视图？

【解决方案4】：

我在 Asp.Net MVC 5 中遇到了同样的问题。

我不希望 PartialView 知道它可能包含在哪个 div 中，所以我不接受这种解决方法。

然后，我注意到其他关于 ReplaceWith 的答案并找到了简单的解决方案：

InsertionMode = InsertionMode.ReplaceWith

现在，mvc 部分视图可以完全用 ajax 助手替换自己，而无需依赖于自身之外的名称。

【讨论】：

不知道你是怎么做到的。我对 MVC 5 做同样的事情，没有任何东西被替换。一旦我添加了 UpdateTargetId，它就可以工作了。

【解决方案5】：

您也应该尝试使用 jQuery（来自我对 MS MVC form AJAXifying techniques 的回答）：

<script type="text/javascript">
    $(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();
                    }
                }
            );
        });
    }
</script>

【讨论】：

【解决方案6】：

问题解决了吗？我有同样的问题，但我发现了这个：

http://buildingwebapps.blogspot.ro/2011/11/jquerys-replacewith-and-using-it-to.html

希望对你有帮助。

【讨论】：