back button history in asp.net 4.5 MVC

Question

User-1098042928 posted

Hi,

I am working on a website using ASP.net 4.5 MVC and I navigate across pages using Ajax.ActionLink which would update a common section I put in Layout page. Now my back button does not work as I update my common section with partial views as I navigate across pages.

Can anyone suggest a solution for preserving history with browser's back/forward button. I found the following solutions  on internet but are not working for MVC website.

1) I saw javascript history (http://blogs.gokulnath.com/2012/02/26/EnableBrowserBackforwardButtonsAndBookmarkMVCAjaxActions.aspx), But this is not considering the <controller>/<action method/ in the URL.

2) I see asp.net history control but it does not work in as I deal with views.

Let me know if there is any solution specific to asp.net 4.5 mvc for this back button history problem.

Thanks,

Praveen

Answer 1

User724169276 posted

There is no such readymade way to handle this behaviour , one workaround that you can follow is to refresh the partial view on ready event of jquery.

$(document).ready(function() {
   // refresh your partial view here.
});

Answer 2

User1644755831 posted

Hello praveenb,

You could try to use history.js plugin for this. you will need to implement this on the client side. Here is a demo for this http://browserstate.github.io/history.js/demo/. You could when browser refreshed using back button check what the history is using this plugin. 

Here is an example

(function(window,undefined){

    // Bind to StateChange Event
    History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
        var State = History.getState(); // Note: We are using History.getState() instead of event.state
    });

    // Change our States
    History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
    History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
    History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
    History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
    History.back(); // logs {state:3}, "State 3", "?state=3"
    History.back(); // logs {state:1}, "State 1", "?state=1"
    History.back(); // logs {}, "Home Page", "?"
    History.go(2); // logs {state:3}, "State 3", "?state=3"

})(window);

Hope this helps.

With Regards,

Krunal Parekh