Self-AJAX-Aktualisierung Teilansicht/Controller in ASP.Net MVC und das Vervielfältigen div

Question

ich eine Teilansicht in MVC haben, dass so etwas geht:

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

Innerhalb dass div gibt es ein Formular, das ein ruft Controller mit AJAX und ruft die gleiche Teilansicht zurück. Das Problem ist, dass die Ergebnisse die Ansicht ruft den Inhalt des div ersetzt, nicht die ganze div, und ich am Ende mit:

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

Die einzige Lösung, die ich über meine Woche Erfahrung in ASP denken kann. Net MVC und AJAX soll das div außerhalb der Teilansicht platzieren und die Teilansicht nur den inneren Teil enthalten, aber dann würde sich das Formular auf eine ID außerhalb der Ansicht beziehen, wo sich das Formular befindet und die kleine Verkapselung bricht, die ich dort gelassen habe. Gibt es eine bessere Lösung?

Answer 1

Verwenden Sie ein AjaxHelper.Form oder jQuery. Wenn Sie jQuery verwenden, haben Sie versucht, replaceWith() zu verwenden? Mit AjaxHelper verwenden Sie AjaxOptions { InsertionMode = InsertionMode.Replace }? Ich würde denken, dass die Verwendung von Ihnen in der Lage wäre, den gesamten DIV durch die Ergebnisse aus der Teilansicht zu ersetzen.

Answer 2

Sie sollte auch mit jQuery versuchen (aus meiner Antwort auf 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

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

Verwendung sollte den ganzen Inhalt von '#myDiv' Elemente ersetzen, wie tvanfosson sagt. Dein Problem ist, wo sich '#myDiv' befindet. Hier ein Beispiel:

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

wo MyPartialView ist:

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

Wenn Sie ‚#myDiv‘ div innerhalb der Teilansicht sind, wird es gemacht unmittelbar nach Erhalt der Antwort (zusammen mit seinem Inhalt) und dann wird der Inhalt durch die Antwort ersetzt, die die gleiche Teilansicht ist (einschließlich seines eigenen '#myDiv' div), und deshalb enden Sie immer mit 2 verschachtelten divs.

Sie sollten immer einen Container für Ihre Teilansichten verwenden und dann die UpdateTargetId auf die Container-ID setzen.

Bearbeiten: Ich aktualisierte den Code, um die genaue Situation darzustellen, die Sie in Ihrer Frage beschreiben.

Answer 4

Die unauffällige Ajax-Bibliothek, die mit .NET MVC 3 geliefert wird, verwendet Rückrufe, die auf den vier Rückrufen von jQuery.ajax basieren. Der InsertionMode = InsertionMode.Replace aus der Ajax.BeginForm-Methode führt jedoch nicht Ergebnis in jQuery replaceWith aufgerufen werden. Stattdessen wird .html (Daten) verwendet, um den Inhalt des Zielelements (und nicht das Element selbst) zu ersetzen.

Ich habe eine Lösung für dieses Problem auf meinem Blog beschrieben: http://buildingwebapps.blogspot.com/2011/11/jquerys-replacewith-and-using-it-to.html

Answer 5

Haben Sie das Problem gelöst?Ich hatte das gleiche Problem, aber ich fand dies:

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

Ich hoffe, dass es Ihnen hilft.

Answer 6

Ich hatte das gleiche Problem in Asp.Net MVC 5.

ich nicht die PartialView über einige Kenntnisse wollen, hatte, was div es innerhalb enthalten sein könnten, so dass ich nicht, dass die Arbeit um akzeptieren.

Dann bemerkte ich die anderen Antworten auf ReplaceWith bezieht und fand die einfache Lösung:

InsertionMode = InsertionMode.ReplaceWith 

nun die mvc Teilansicht selbst mit den Ajax-Helfer vollständig ersetzen können alle Abhängigkeiten von Namen außerhalb selbst ohne.