Self-AJAX-updating partial-view/controller in ASP.Net MVC and the duplicating div

Question

I have a partial view in MVC that goes something like:

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

Inside that div there's a form that calls a controller using AJAX and gets back that same partial view. The problem is that the results of calling the view replaces the contents of the div, not the whole div, and I end up with:

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

The only solution I can think about with my week of experience in ASP.Net MVC and AJAX is to put the div outside the partial view and make the partial view only contain the inside part, but then the form would refer to an id outside the view where the form is located breaking the little encapsulation I have left there. Is there any better solution?

Answer 1

Are you using an AjaxHelper.Form or jQuery. If you are using jQuery, have you tried using replaceWith()? Using AjaxHelper are you using AjaxOptions { InsertionMode = InsertionMode.Replace }? I would think that using either you would be able to replace the entire DIV with the results from the partial view.

Answer 2

Your should try with jQuery too (from my answer on 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

Using

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

should replace the whole content of '#myDiv' element, as tvanfosson says. Your problem is where is '#myDiv' located. Here's an example:

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

where MyPartialView is:

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

If you include '#myDiv' div inside the partial view, it will be rendered right after receiving the response (together with its content), and then it's content will be replace with the response which is the same partial view (including its own '#myDiv' div), and that's why you always end up with 2 nested divs.

You should always use a container for your partial views and then set the UpdateTargetId to the container id.

Edit: I updated the code to represent the exact situation you describe in your question.

Answer 4

Thanks for the site. In this article visitor can that by using AJAX there is s form that calls a control.