MVC 5 Ajax 表单

Question

我正在使用Ajax.BeginForm 助手。它运作良好，但我有一个小问题。

代码如下：

<div class="row" id="pdiv">
@using (Ajax.BeginForm("SomeAction","SomeController",new AjaxOptions{UpdateTargetId="pdiv"}))
{
.....
}
</div>

我已将 UpdateTargetId 设置为“pid”。

所以最初渲染的 HTML 看起来像：

<div class="row" id="pdiv">
<form action="/SomeController/SomeAction" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#pdiv" id="form0" method="post">
....

现在，当我提交时，它会将整个 pid div 放在 pid 中。即

<div class="row" id="pdiv">
    <div class="row" id="pdiv">
    <form action="/SomeController/SomeAction" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#pdiv" id="form0" method="post">
    .....
    }

我尝试设置 Ajax 选项 InsertionMode= InsertionMode.Replace 但没有成功。无论如何我可以用新获得的内容完成“pdiv”的替换？

Answer 1

根据StackOverflowSimon 的这篇帖子

好吧，过了一段时间，我遇到了同样的问题，现在我想弄清楚，所以我查看了 jquery.unobtrusive-ajax.js 和负责的函数：

function asyncOnSuccess(element, data, contentType) {
    var mode;

    if (contentType.indexOf("application/x-javascript") !== -1) {  // jQuery already executes JavaScript for us
        return;
    }

    mode = (element.getAttribute("data-ajax-mode") || "").toUpperCase();
    $(element.getAttribute("data-ajax-update")).each(function (i, update) {
        var top;
        switch (mode) {
            case "BEFORE":
                top = update.firstChild;
                $("<div />").html(data).contents().each(function () {
                    update.insertBefore(this, top);
                });
                break;
            case "AFTER":
                $("<div />").html(data).contents().each(function () {
                    update.appendChild(this);
                });
                break;
            default:
                // Changed this line because of generating duplicate IDs
                //$(update).html(data);
                $(update).html($(data).html());
                break;
        }
    });
}

正如您在默认部分中看到的那样，答案并没有替换 updatetargetid 而是用答案替换了它的内容。现在我采用答案的内部部分，一切正常！

Answer 2

您需要将您的 ajax 表单标记移动到一个单独的视图中，因此它不会有您在目标 id 中指定的 div 元素，那么您应该从您的 ajax 操作中提供新的部分视图。