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

asp.net-mvc ajax partial-views
pupeno picture pupeno · May 31, 2009 · Viewed 15.7k times · Source

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

Jeroen picture Jeroen · Dec 14, 2011

The unobtrusive Ajax library that ships with .NET MVC 3 uses callbacks that are based on the four callbacks from jQuery.ajax. However, the InsertionMode = InsertionMode.Replace from the Ajax.BeginForm method does not result in jQuery's replaceWith being called. Instead, .html(data) is used to replace the contents of the target element (and not the element itself).

I have described a solution to this problem on my blog: http://buildingwebapps.blogspot.com/2011/11/jquerys-replacewith-and-using-it-to.html

Related questions

Rendering a simple ASP.NET MVC PartialView using JQuery Ajax Post call

I have the following code in my MVC controller: [HttpPost] public PartialViewResult GetPartialDiv(int id /* drop down value */) { PartyInvites.Models.GuestResponse guestResponse = new PartyInvites.Models.GuestResponse(); guestResponse.Name = "this was generated from this ddl id:"; return PartialView("MyPartialView", guestResponse); } Then …

Read More
Update partial view after submit Ajax.Beginform

I am new at .NET mvc. In a view "DisplayThings" I have something like: @foreach (var thing in Model) { @Html.Partial("DisplayPartial", thing) } In the partial view "DisplayPartial" I have @using (Ajax.BeginForm("Afunc", new AjaxOptions ())) { @Html.EditorFor(model => …

Read More
How to handle model state errors in ajax-invoked controller action that returns a PartialView

I have a POST controller action that returns a partial view. Everything seems really easy. but. I load it using $.ajax(), setting type as html. But when my model validation fails I thought I should just throw an error with …

Read More