Question

I have an MVC3 application that I am implementing pjax into . Everything is working well except what to do on the server side when an address gets loaded that doesn’t already have the main view on the client side. My Controller code looks like

public virtual ActionResult Details(Guid id)
    {
        var partDetail = new PartDetail(id);
        var partialView = PartialView("Details", partDetail);
        if(Request.Headers["X-PJAX"]!= null)
        {
            return partialView;
        }

        var mainView =  View("Index");
        // Stick Partial View into main view at #update_panel?
        return mainView;
    }

How can I stick the partial View into the main view so it inserts the partial view in the #update_panel?

Answer 1

Ok, without a major refactor, you could do the following.

(this assumes that you are able to set the @model on index.cshtml to PartDetail()).

in your controller action above, change:

var mainView =  View("Index");

to:

var mainView =  View("Index", partDetail);

then, inside your index.cshtml, add the following:

<div id="update_panel">@RenderPartial("Details", Model)</div>

As i said, this will ONLY work if the index @model is set to PartDetail(), otherwise, a little refactoring on the model in the index view will be required to include this PartDetail() model. this viewmodel might well look like the following:

public class IndexViewModel
{
    ModelForIndex Index{get; set;}
    PartDetail Details{get; set;}
}

this refactored viewmodel would be added to the index.cshtml as @model IndexViewModel and consumed by the partial as:

<div id="update_panel">@RenderPartial("Details", Model.Details)</div>

hope this makes sense.