Self-AJAX-aggiornamento parziale vista/regolatore in ASP.Net MVC e il div duplicazione

Question

ho una vista parziale in MVC che va qualcosa come:

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

All'interno che div c'è una forma che richiama un controller che utilizza AJAX e recupera la stessa vista parziale. Il problema è che i risultati della chiamata la vista sostituisce il contenuto del div, non l'intero div, e io alla fine con:

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

L'unica soluzione che posso pensare con la mia settimana di esperienza in ASP. Net MVC e AJAX consiste nel mettere il div all'esterno della vista parziale e fare in modo che la vista parziale contenga solo la parte interna, ma la forma si riferirebbe a un id all'esterno della vista in cui si trova il form rompendo il piccolo incapsulamento che ho lasciato lì. C'è una soluzione migliore?

Answer 1

Si sta utilizzando un AjaxHelper.Form o jQuery. Se stai usando jQuery, hai provato a usare replaceWith()? Usando AjaxHelper stai usando AjaxOptions { InsertionMode = InsertionMode.Replace }? Penserei che usando entrambi si sarebbe in grado di sostituire l'intero DIV con i risultati della vista parziale.

Answer 2

vostro dovrebbe provare con jQuery troppo (dal mio risposta su MS MVC form AJAXifying techniques):

<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> 

Answer 3

Utilizzando

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

dovrebbe sostituire l'intero contenuto di un elemento '#myDiv', come dice tvanfosson. Il tuo problema è dove si trova '#myDiv'. Ecco un esempio:

<div id="myDiv"> 
    <% Html.RenderPartial("MyPartialView"); %> 
</div> 

dove MyPartialView è:

<div id="comments"> 
    <% using (Ajax.BeginForm(new AjaxOptions() { UpdateTargetId = "myDiv", InsertionMode = InsertionMode.Replace })) {%>   
    ... 
    <input type="submit" value="Submit comment" /> 
    <% } %> 
</div> 

Se si include div '#myDiv' all'interno della vista parziale, sarà reso a destra dopo aver ricevuto la risposta (insieme al suo contenuto) , e quindi il suo contenuto sarà sostituito con la risposta che è la stessa vista parziale (incluso il proprio div '#myDiv'), ed è per questo che finisci sempre con 2 div nidificati.

È consigliabile utilizzare sempre un contenitore per le viste parziali e quindi impostare UpdateTargetId sull'ID contenitore.

Modifica: Ho aggiornato il codice per rappresentare l'esatta situazione descritta nella domanda.

Answer 4

La libreria Ajax non invadente fornita con .NET MVC 3 utilizza i callback basati sui quattro callback di jQuery.ajax. Tuttavia, InsertionMode = InsertionMode.Replace dal metodo Ajax.BeginForm fa non nella sostituzione di jQuery con il nome. Invece, .html (dati) viene utilizzato per sostituire il contenuto dell'elemento di destinazione (e non l'elemento stesso).

ho descritto una soluzione a questo problema sul mio blog: http://buildingwebapps.blogspot.com/2011/11/jquerys-replacewith-and-using-it-to.html

Answer 5

Forse avete risolto il problema?Ho avuto lo stesso problema, ma ho trovato questo:

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

Spero che ti aiuta.

Answer 6

Ho avuto questo stesso problema in Asp.Net MVC 5.

non volevo il PartialView di avere qualche conoscenza di ciò che div potrebbe essere contenuto all'interno, quindi non ho accettato che il lavoro intorno.

Poi, ho notato che le altre risposte si riferiscono a ReplaceWith e trovato la soluzione semplice:

InsertionMode = InsertionMode.ReplaceWith 

Ora, la vista parziale MVC può sostituire completamente se stesso con gli helper Ajax senza avere dipendenze da nomi fuori di sé.