CODEWITHSUNDEEP
jqueryajaxasp.net-mvchtml5-historyhistory.js
omkar patade
omkar patade

Reputation: 1591

MVC - History API in ajax call

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?

Upvotes: 0

Views: 258

Answers (1)

AlexiAmni
AlexiAmni

Reputation: 402

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.

Upvotes: 1

Related Questions