MVC - History API in ajax call

Question

I have an ajax call to move from one page to another one.(loading partial page content in div) I want to update an URL based on this ajax call so that user can use back/forward button. So i am using the history API.

E.g.

Search.cshtml

<input type="button" id="abc" />

js file

$('#abc').click(function (e) {
   $.ajax({
        type: "POST",
        url: "abccontroller/xyzaction",
        cache: false,
        datatype: "html",
        success: function (data) {
            window.history.pushState(
               'abccontroller/xyzaction',
               'Claim', // new page title
               'abccontroller/xyzaction' // new url
           )
            $("#divMainContainer").html(data);
        }
    });
});

This xyzaction returns a partial view and i am loading this html in div

Now this updates the URL and moving to the new page correctly.

But when i click on browser back button, it does not loads the previous page. it only changes the URL (shows previous page URL). Same issue with forward button of browser. It does not move to the new page. It only changes the URL

What am i doing wrong here?

Answer 1

maybe you can do something like this :

     $(window).bind('popstate', function(){
  window.location.href = window.location.href;
  });

it worked for me.

this code is taking location from the url and than redirects page to that.