MVC Ajax.BeginForm Replace strange behaviour

Question

In a partial view, I am using MVCs Ajax.Beginform like followed:

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

When submitting the form, I would expect that the hole div "divToReplace" is replaced by the answer (the partial view again). But instead the inner html of the div "divToReplace" is replaced by the answer, so the beginning of the partial view looks like this:

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

What am I doing wrong?

Answer 1

Well, after a certain time, I ran into the same problem and now I wanted to make it clear so I had a look in jquery.unobtrusive-ajax.js and the responsable function:

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;
        }
    });
}

As you can see in the default part, the answer was not replacing the updatetargetid but replaced its content with the answer. Now I take the inner part of the answer and everything works fine!

Answer 2

Just addition to previous answer, you can add your own condition to jquery.unobtrusive-

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

and pass your own parameter using HtmlAttributes:

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