MVC Ajax.BeginForm 替换奇怪的行为

Posted

技术标签:

【中文标题】MVC Ajax.BeginForm 替换奇怪的行为【英文标题】:MVC Ajax.BeginForm Replace strange behaviour 【发布时间】:2012-02-24 23:58:47 【问题描述】:

在部分视图中,我正在使用 MVCs Ajax.Beginform,如下所示:

<div id="divToReplace">
    @using (Ajax.BeginForm("Action", "Controller,
                           new AjaxOptions
                           
                               InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace,
                               UpdateTargetId = "divToReplace"
                           ,
                           new
                           
                                id = "formID"
                           ))
    
        ...
</div>

提交表单时,我希望孔 div "divToReplace" 被答案替换(再次是部分视图)。但是div“divToReplace”的内部html被替换为答案,所以部分视图的开头看起来像这样:

<div id="divToReplace">
    <div id="divToReplace">
           ...

我做错了什么?

【问题讨论】:

【参考方案1】:

好吧,过了一段时间,我遇到了同样的问题,现在我想弄清楚,所以我查看了 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 而是用答案替换了它的内容。现在我采用答案的内部部分,一切正常!

【讨论】:

我以前也有过,但如果update 可能是一个 jQuery 对话框或其他类型的控件,它就会损坏。【参考方案2】:

除了之前的答案,你可以将自己的条件添加到 jquery.unobtrusive-

ajax.js:
case "REPLACEWITH":
$(update).replaceWith(data);
break;

并使用 HtmlAttributes 传递您自己的参数:

@using (Ajax.BeginForm("Action", "Controller", null, new AjaxOptions UpdateTargetId = "DivContainer" 
new  enctype = "multipart/form-data", data_ajax_mode = "replacewith" 

【讨论】:

以上是关于MVC Ajax.BeginForm 替换奇怪的行为的主要内容,如果未能解决你的问题,请参考以下文章

Ajax.BeginForm 不执行OnSuccess

MVC小系列Html.BeginForm与Ajax.BeginForm

Ajax.BeginForm 处理两个不同的 onSuccess 响应,MVC 5,C#

MVC中的Ajax.BeginForm上传文件

MVC 4 Ajax.BeginForm 绑定网格

如何为 Ajax.BeginForm MVC 刷新和重定向脚本