Issue with partial views and ajax submission : The Official Microsoft ASP.NET Forums

Reply

JohnLocke

Contributor

3216 Points

Issue with partial views and ajax submission

Feb 21, 2013 08:40 PM|LINK

I've got a View that renders a partial-view with a form. The partial view is nested inside a div container of the main View. The form is of type Ajax.BeginForm with AjaxOptions set to HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "MyPartialDiv".

The first time I submit, it posts correctly and the PartialViewResult action returns the partial-view back to the main View. It works as it should. The problem I'm having is if I submit the form again, the partial-view is now returned to a new page. The URL of the new page is now the PartialViewResult's action name (example: /Home/PartialViewUpdate). It's just a blank white page, but with my partial view included.

I've tried to trace why it's behaving this way with Firebug, but it doesn't show anything abnormal.

TL;DR: works properly after one submission. Re-submission sends partial view to new page.

Reply

RichardY

Star

8376 Points

1573 Posts

Re: Issue with partial views and ajax submission

Feb 21, 2013 09:02 PM|LINK

Hard to say without seeing your markup, but I do this all the time - so it should work.

Make certian that the MyPartialDiv is included in the Main View's markup and not the PartialView's.

Reply

JohnLocke

Contributor

3216 Points

710 Posts

Re: Issue with partial views and ajax submission

Feb 21, 2013 09:05 PM|LINK

I just left work, but will post some code tomorrow. The Div is in the main View -- that was the first thing I checked.

Reply

joelkronk@ho...

Member

639 Points

641 Posts

Re: Issue with partial views and ajax submission

Feb 21, 2013 10:02 PM|LINK

JohnLocke

I've tried to trace why it's behaving this way with Firebug, but it doesn't show anything abnormal.

Is your HTML when you re-render the partial view exactly the same?

better questions = better answers

Reply

JohnLocke

Contributor

3216 Points

710 Posts

Re: Issue with partial views and ajax submission

Feb 22, 2013 01:43 PM|LINK

It's exactly the same according to firebug (unless it's not updating properly).

Here's a rough markup:

View --

<div id="MyPartialDiv">
		    @Html.Partial("MyPartialView", Model.PartialViewData)
	    </div>

Partial View --

@model MyProject.Models.PartialViewModel

@using (Ajax.BeginForm("PartialViewUpdate", "Home", new AjaxOptions {
                    HttpMethod = "POST",
                    InsertionMode = InsertionMode.Replace,
                    UpdateTargetId = "MyPartialDiv" }))
{
     // some form elements
     <input type="submit" value="Update" />
}

PartialViewResult --

[HttpPost]
public PartialViewResult PartialViewUpdate(PartialViewModel model)
{
     // do stuff

     return PartialView("MyPartialView", model);
}

Here's what firebug looks like prior to submitting --

<div id="MyPartialDiv">
<form id="form0" method="post" data-ajax-update="#MyPartialDiv" data-ajax-mode="replace" data-ajax-method="POST" data-ajax="true" action="/Home/PartialViewUpdate">
</div>

Here's firebug after first submission --

<div id="MyPartialDiv">
<form id="form0" method="post" data-ajax-update="#MyPartialDiv" data-ajax-mode="replace" data-ajax-method="POST" data-ajax="true" action="/Home/PartialViewUpdate">
</div>

Identical. Now, if I hit submit again, it returns the PartialView to a new blank page (no ccs, layout, etc). The only thing I'm wondering is if PartialViewResult is the proper actionresult that I want. I mean... it works the first time, so I think it's correct, but maybe it's not the right actionresult for additional submissions.

edit: I do have

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

in my main View... is this something I should also include in the Partial? That seems clunky to me.

Edited by JohnLocke on Feb 22, 2013 01:45 PM
Edited by JohnLocke on Feb 22, 2013 01:47 PM
Edited by JohnLocke on Feb 22, 2013 02:12 PM

Reply

joeyneto90

Member

4 Points

3 Posts

Re: Issue with partial views and ajax submission

Feb 22, 2013 03:05 PM|LINK

Doesn't need the Form into de DIV... delete it, the is created when the ajax.BeginForm is readed...
thy already get a post method and include on div above...

the problem is: maybe there are two forms that make the same requisition to server, one is ajax form and call a partial view into a div... the other is that form into a div... the call a partial view, but no place to store the view.. so open a new page!

Reply

JohnLocke

Contributor

3216 Points

710 Posts

Re: Issue with partial views and ajax submission

Feb 22, 2013 03:29 PM|LINK

That's not the issue. And yes, you need to have the Div present around the form for ajax call to replace the old form.

I just tried a different method. I cut out the InsertMode option, and instead went with OnSuccess = "submitSuccess". Then created a function in the main View's script section

function submitSuccess(result)
{
  $("#MyPartialDiv").html(result);
}

First submit still works, second submit still gives new page with the partial view. Can anyone dig into this? InsertMode and the jquery .html() set produces the same results on submitting a 2nd time.