In this article I will explain with an example, how to disable Browser Back Button after Logout using jQuery in ASP.Net Core MVC.
Note: For beginners in ASP.Net Core (.Net Core 7), please refer my article ASP.Net Core 7: Hello World Tutorial with Sample Program example.
 
One cannot disable the Browser Back Button functionality only thing that can be done is prevent them.
 
 

Concept

In this article, two Views are used i.e. Logout and Home. After Logout, User is sent to Logout View and he will be prevented from going back to Home View from Logout View using Browser Back Button.
 
 

Disable Browser Back Button using jQuery

The following function must be placed inside the View where you want to prevent the User from coming back using Browser Back Button.
For example, consider two Views, Logout and Home and once User lands on the Logout View, you would not want him to go to Home View. Thus, the following script must be placed inside the Home View.
Inside the preventBack function, the window.history.forward() method is called which navigates the browser forward one step in their history. Whenever Browser Back Button is clicked, this function immediately moves it one step forward.
The setTimeout method schedules the execution time of the preventBack function with delay of 0 (zero) milliseconds.
Finally, the window.onunload function of jQuery returns NULL.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
    function preventBack() {
        window.history.forward();
    }
    setTimeout("preventBack()", 0);
    $(window).on("unload", function () {
        null;
    });
</script>
 
 

Controller

The Controller consists of following Action methods.

Action method for handling Home GET operation

This Action method gets called when Home View is refreshed.
 

Action method for handling Logout GET operation

This Action method gets called when the Anchor Link of Home View is clicked or Logout View is refreshed.
public class HomeController : Controller
{
    public IActionResult Home()
    {
        return View();
    }
 
    public IActionResult Logout()
    {
        return View();
    }
}
 
 

Disable Browser Back Button implementation

HTML Markup

Home View

The Home View consists of an HTML Anchor tag and its href property is set to name of Logout View.
 
Inside the HTML Markup, first the following script file is inherited.
1. jquery.min.js
Finally, the script to disable the Browser Back Button is placed inside the HEAD section.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Home</title>
    <script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        function preventBack() {
            window.history.forward();
        }
        setTimeout("preventBack()", 0);
        $(window).on("unload", function () {
            null;
        });
    </script>
</head>
<body>
    <h3>Home</h3>
    <hr />
    <a href="/Home/Logout">Logout</a>
</body>
</html>
 

Logout View

The Logout View consists of a H3 tag which displays the message that, this is Logout page.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Logout</title>
</head>
<body>
    <h3>Logout</h3>
</body>
</html>
 
 

Screenshot

ASP.Net Core: Disable Browser Back Button after Logout using jQuery
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge  FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code


Other available versions