浏览器后退按钮不起作用

Question

I have this menubar-

When i load this page, by default page is redirect to dashboard, Dashboard has no content now.

Everything goes fine, until i click on back button of browser, This page is redirected to login page.

How can i keep history so everytime when i click back button of browser it should redirect to Dashboard Page? and then stop propagating for more clicks.

Take a look at HTML-

<li class="active"><a href="/Home/Dashboard" rel="tooltip" data-original-title="What is new?"
                            data-placement="bottom"><i class="icon-home icon-white"></i>&nbsp;Dashboard</a></li>

                       <li><a href="#" id="_Layout_Contact" rel="tooltip" data-original-title="Manage Contacts"
                            data-placement="bottom"><i class="icon-white icon-user"></i>&nbsp;Contact</a></li>

                        <li><a href="#" id="_Layout_Task" rel="tooltip" data-original-title="Task House"
                            data-placement="bottom"><i class="icon-white icon-tasks"></i>&nbsp;Task</i></a></li>

                        <li><a href="#" id="_Layout_Appointment" rel="tooltip" data-original-title="Handle Appointments"
                            data-placement="bottom"><i class="icon-white icon-calendar"></i>&nbsp;Appointment</a></li>

                        <li><a href="#" id="_Layout_Project" rel="tooltip" data-original-title="Explore Projects"
                            data-placement="bottom"><i class="icon-white icon-briefcase"></i>&nbsp;Project</a></li>

                        <li><a href="#" id="_Layout_Sales" rel="tooltip" data-original-title="Check Sales"
                            data-placement="bottom"><i class="icon-white icon-barcode"></i>&nbsp;Sales</a></li>

                  <li><a href="#" title="" onclick="showDialog('/Opportunity/_Create' , 'Add Opportunity')"
                                    id="_Layout_AddOpportunityLink">Add Opportunity</a> </li>

I tried-

I read javascript helps us keeping history, so i tried it with hyper-reference as-

Ex. with contact page-

<li><a href="javascript:history.go(-1)" id="_Layout_Contact" rel="tooltip" data-original-title="Manage Contacts"
                                data-placement="bottom"><i class="icon-white icon-user"></i>&nbsp;Contact</a></li>

But it kept loading the page, nothing happened. Help?

I am using MVC4 razor view engine.

Answer 1

For newer browsers, you can use the HTML5 History API .

history.pushState(null, null, $(window).attr("href"));
$(window).on("popstate", function (e) {
    e.preventDefault();
    alert("dashboard");
    //load dashboard
});

If you need to support older browsers, you can use history.js .