Refresh only the content panel in master page on page navigation in asp.net mvc

Question

I have a master page with Header, Menu, Content and Footer panes in my asp.net mvc (C#) application.

I don't want the Header and Footer panes to refresh on each page navigation, only the Menu and Content panes should get refreshed.

How can i achieve it in the asp.net mvc application? any suggestions

Answer 1

A pure ajax load of the inside of the pages could be achieved by capturing link clicks in the navigation to something like:

$('a:not(.external)').each(function(){
  $(this).attr('href', '#'+this.href);
});

Then you could use the jQuery BBQ plugin to manage your back button and page loads with the 'onHashChange' event. This will allow you to ajax load each of the main portions of the page (likely with a $('#main-div').load(url); type call). The demo for BBQ does pretty much exactly what you'd like, with the added benefit that you don't ruin the back button, so I would suggest taking a hard look at that.

Answer 2

Make Ajax calls to the controller, like below and create the "*.ascx" PartialView you need

    $('#divMainContent').load("./LoadMainContent");



    [Authorize]
    public ActionResult LoadMainContent()
    {
        return PartialView("MainContent", sp);

    }