In this article I will explain with an example, how to prevent user from navigate to previous page using Back Button or the Back option in the Context Menu using JavaScript in ASP.Net Core Razor Pages.
Note: For beginners in ASP.Net Core Razor Pages (.Net Core 7), please refer my article ASP.Net Core 7 Razor Pages: 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 Razor Pages are used i.e. Login and Home. After Login, User is sent to Home Razor Page and he will be prevented from going back to Login Razor Page from Home Razor Page using Browser Back Button.
 
 

Disable Browser Back Button using JavaScript function

The following JavaScript function must be placed inside the Razor Page where you want to prevent the User from coming back using Browser Back Button.
For example, consider two Razor Pages, Login and Home and once User lands on the Home Razor Page, you would not want him to go to Login Razor Page. Thus, the following script must be placed inside the Login Razor Page.
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 returns NULL.
<script type="text/javascript">
    function preventBack() {
        window.history.forward();
    }
    setTimeout("preventBack()", 0);
    window.onunload = function () {
        null;
    };
</script>
 
 

Razor PageModel (Code-Behind)

Home

The PageModel consists of the following Handler method.

Handler method for handling Home GET operation

This Handler method is left empty as it is not required.
public class HomeModel : PageModel
{
    public void OnGet()
    {
    }
}
 

Login

The PageModel consists of the following Handler method.

Handler method for handling Login GET operation

This Handler method is left empty as it is not required.
public class LoginModel : PageModel
{
    public void OnGet()
    {
    }
}
 
 

Disable Browser Back Button implementation

Razor Page (HTML)

Login Razor Page

The Login Razor Page consists of an HTML Anchor tag and its href property is set to name of Home Razor Page.
Finally, the script to disable the Browser Back Button is placed inside the HEAD section.
@page
@model Disable_Browser_Back_Core_Razor.Pages.LoginModel
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Login</title>
    <script type="text/javascript">
        function preventBack() {
            window.history.forward();
        }
        setTimeout("preventBack()", 0);
        window.onunload = function () {
            null;
        };
    </script>
</head>
<body>
    <h3>Login</h3>
    <hr />
    <a href="/Home">Redirect to Home</a>
</body>
</html>
 

Home Razor Page

The Home Razor Page consists of an HTML Anchor tag and its href property of the Anchor link is set to name of Login Razor Page.
Note: HTML Anchor link is added to illustrate that the Login Razor Page will be prevented only using Browser Back Button and not when accessed using other means.
 
@page
@model Disable_Browser_Back_Core_Razor.Pages.HomeModel
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Home</title>
</head>
<body>
    <h3>Home</h3>
    <hr />
    <a href="/Login">Redirect to Login</a>
</body>
</html>
 
 

Screenshot

ASP.Net Core Razor Pages: Disable Browser Back Button using JavaScript
 
 

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