11

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

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

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

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

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

4

6 回答 6

6

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

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

于 2011-12-14T10:21:36.873 回答
3

使用

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

正如 tvanfosson 所说，应该替换 '#myDiv' 元素的全部内容。您的问题是“#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。

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

于 2009-05-31T22:49:32.740 回答
3

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

于 2009-05-31T01:23:20.987 回答
2

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

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

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

InsertionMode = InsertionMode.ReplaceWith

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

于 2015-01-28T17:20:56.200 回答
1

您也应该尝试使用 jQuery（来自我对MS MVC 表单 AJAXifying 技术的回答）：

<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>
于 2009-05-31T10:24:15.527 回答
0

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

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

我希望它对你有帮助。

于 2012-07-12T11:20:42.310 回答