Self-AJAX-обновление частичного представления / контроллера в ASP.Net MVC и дублирующем div

Question

У меня есть частичное представление в MVC, которое выглядит примерно так:

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

Внутри этого div есть форма, которая вызывает контроллер с использованием AJAX и возвращает тот же частичный вид. Проблема в том, что результаты вызова представления заменяют содержимое div, а не весь div, и в итоге я получаю:

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

Единственное решение, которое я могу придумать, имея опыт работы в ASP.Net MVC и AJAX за неделю, - это поместить div вне частичного представления и сделать так, чтобы частичное представление содержало только внутреннюю часть, но тогда форма будет ссылаться на id вне представления, где находится форма, нарушая небольшую инкапсуляцию, которую я там оставил. Есть ли лучшее решение?

Answer 1

Ненавязчивая библиотека Ajax, поставляемая с .NET MVC 3, использует обратные вызовы, основанные на четырех обратных вызовах из jQuery.ajax. Однако InsertionMode = InsertionMode.Replace из метода Ajax.BeginForm делает , а не , что приводит к вызову replaceQith из jQuery. Вместо этого .html (данные) используется для замены содержимого целевого элемента (а не самого элемента).

Я описал решение этой проблемы в своем блоге: http://buildingwebapps.blogspot.com/2011/11/jquerys-replacewith-and-using-it-to.html

Answer 2

Использование

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

должно заменить все содержимое элемента '#myDiv', как говорит tvanfosson. Ваша проблема в том, где находится «#myDiv». Вот пример:

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

где MyPartialView:

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

Если вы включите div "#myDiv" в частичное представление, оно будет отображено сразу после получения ответа (вместе с его содержимым), а затем его содержимое будет заменено ответом, который является тем же частичным представлением ( свой собственный div "#myDiv"), и поэтому вы всегда получаете 2 вложенных div.

Вы должны всегда использовать контейнер для частичных представлений, а затем установить UpdateTargetId в качестве идентификатора контейнера.

Редактировать: Я обновил код, чтобы представить точную ситуацию, которую вы описываете в своем вопросе.

Answer 3

Используете ли вы AjaxHelper.Form или jQuery. Если вы используете jQuery, пробовали ли вы использовать replaceWith () ? Используя AjaxHelper вы используете AjaxOptions { InsertionMode = InsertionMode.Replace }? Я думаю, что с помощью любого из них вы сможете заменить весь DIV результатами частичного просмотра.

Answer 4

У меня была такая же проблема в Asp.Net MVC 5.

Я не хотел, чтобы у PartialView было какое-то знание о том, в каком div он может содержаться, поэтому я не принял эту работу.

Затем я заметил другие ответы, относящиеся к ReplaceWith, и нашел простое решение:

InsertionMode = InsertionMode.ReplaceWith

Теперь частичное представление mvc может полностью заменить себя помощниками ajax без каких-либо зависимостей от имен вне себя.

Answer 5

Вы должны попробовать также jQuery (из моего ответа на MS MVC формы AJAXifying ):

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

Вы решили проблему? У меня была такая же проблема, но я нашел это:

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

Надеюсь, это поможет вам.