In this article I will explain with an example, how to disable
Browser Back Button after Logout using
jQuery in ASP.Net Core Razor Pages.
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. Logout and Home. After Logout, User is sent to Logout Razor Page and he will be prevented from going back to Home Razor Page from Logout Razor Page using Browser Back Button.
Disable Browser Back Button using jQuery
The following 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, Logout and Home and once User lands on the Logout Razor Page, you would not want him to go to Home Razor Pages. Thus, the following script must be placed inside the Home 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 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>
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 LogoutModel : PageModel
{
public void OnGet()
{
}
}
Disable Browser Back Button implementation
Razor Page (HTML)
Home Razor Page
Inside the HTML Markup, first the following script file is inherited.
1. jquery.min.js
The Home Razor Page consists of an HTML Anchor tag and its href property is set to name of Logout Razor Page.
Finally, the script to disable the Browser Back Button is placed inside the HEAD section.
@page
@model Disable_Browser_Back_Logout_Core_Razor.Pages.HomeModel
@{
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="/Logout">Logout</a>
</body>
</html>
Logout Razor Page
The Logout Razor Page consists of a H3 tag which displays the message that, this is Logout page.
@page
@model Disable_Browser_Back_Logout_Core_Razor.Pages.LogoutModel
@{
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 Razor Pages: Disable Browser Back Button after Logout using jQuery]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
