asp.net mvc - MVC Ajax.BeginForm Reemplazar comportamiento extraño

asp.net-mvc replace

Question

En una vista parcial, estoy usando MVC Ajax.Beginform como seguido:

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

Al enviar el formulario, esperaría que el agujero div "divToReplace" se sustituya por la respuesta (la vista parcial nuevamente). Pero en su lugar, el html interno del div "divToReplace" se reemplaza por la respuesta, por lo que el comienzo de la vista parcial se ve así:

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

¿Qué estoy haciendo mal?

Answer 1

Bueno, después de cierto tiempo, me encontré con el mismo problema y ahora quería dejarlo en claro, así que eché un vistazo a jquery.unobtrusive-ajax.js y la función responsable:

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

Como puede ver en la parte predeterminada, la respuesta no reemplazó al updatetargetid sino que reemplazó su contenido con la respuesta. Ahora tomo la parte interna de la respuesta y todo funciona bien.

Answer 2

Solo además de la respuesta anterior, puede agregar su propia condición a jquery.unobtrusive-

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

y pase su propio parámetro usando HtmlAttributes:

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