ASP.NET MVC 4 + jQuery address plugin = rendering issue

Question

I am trying to setup a new website in MVC4, avoiding full page refresh under any circumstances. The goal is to have a media player on the main layout that will be intact during user's navigation to the site.

I decided to use the jquery address plugin to be able to use deep linking. I set up a rule to my controllers to return a partial view instead of a full view if the action was called through ajax. I also set up the address plugin to prevent the request, do an ajax request instead, and serve the result inside a div.

Server Side

return Request.IsAjaxRequest() ? (ActionResult) PartialView() : View();

Client Side

    $.address.state('/').init(function (event) {
        $('a').address();
    });

    $.address.change(function (event) {
        $.ajax({
            cache: false,
            url: event.value,
            success: ajaxSuccess
        });
    });

    function ajaxSuccess(data, status) {
        $("#mainContent").html(data);
    }

The problem: I can't render any @section inside my views, when a view is served as partial.

PS: I would like to use the plugin as unobtrusive, so anyone that hasn't got javascript would still be able to navigate to the website even though the media player would refresh.

Answer 1

You should look to redesign the page to have the swappable content in a separate action, that's always a partial view. that way, the content that changes is outside of the main content. The main content can have the sections, and the child content is the content that gets replaced as any requests occur.