In this article I will explain with an example, how to prevent user from navigate to previous page using Back Button of the Browser or the Back option in the Context Menu using AngularJS 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.
 
 

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
{
    publicvoid OnGet()
    {
    }
}
 

Login

The PageModel consists of the following Handler methods.

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 HTML Markup of Login Razor Page consists of:
div -  For applying ng-app and ng-controller AngularJS directives.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
The Login Razor Page also consists of an HTML Anchor tag and its href property is set to name of Home Razor Page.
 

Disabling Browser Back Button Script

Inside the HTML Markup, first the following script file is inherited.
1. angular.min.js
Inside the AngularJS Controller, the timeout function is called which schedules the execution time with delay of 0 (zero) milliseconds.
Inside the timeout 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.
Note: For more details on how to use $timeout service, please refer my article Using $timeout service in AngularJS.
 
Finally, the unload event handler is attached to the window using addEventListener method which returns NULL to disable (prevent) the Browser Back Button.
@page
@model Disable_Browser_Back_AngularJS_Core_Razor.Pages.LoginModel
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <title>Login</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", []);
        app.controller("MyController", function ($scope, $window, $timeout) {
            $timeout(function () {
                $window.history.forward();
            }, 0);
 
            $window.addEventListener('unload', function () {
                null;
            });
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <h3>Login</h3>
        <hr />
        <a href="/Home">Redirect to Home</a>
    </div>
</body>
</html>
 

Home Razor Page

The HTML Markup of Home Razor Page consists of:
div -  For applying ng-app and ng-controller AngularJS directives.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
The HTML Markup of Home Razor Page also 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.
 
Inside the HTML Markup, first the following script file is inherited.
1. angular.min.js
The AngularJS Controller left empty as it is not required.
@page
@model Disable_Browser_Back_AngularJS_Core_Razor.Pages.HomeModel
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <title>Home</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", []);
        app.controller("MyController", function ($scope, $window) {
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <h3>Home</h3>
        <hr />
        <a href="/Login">Redirect to Login</a>
    </div>
</body>
</html>
 
 

Screenshot

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

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