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
jQuery in ASP.Net MVC.
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. Login and Home. After Login, User is sent to Home View and he will be prevented from going back to Login View from Home View using Browser Back Button.
Disable Browser Back Button using JavaScript function
The following
jQuery 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, Login and Home and once User lands on the Home View, you would not want him to go to Login View. Thus, the following script must be placed inside the Login 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.onload function 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 the Anchor Link of Login View is clicked or Home View is refreshed.
Action method for handling Login GET operation
This Action method gets called when the Anchor Link of Home View is clicked or Login View is refreshed.
public class HomeController : Controller
{
// GET: Home
public ActionResult Home()
{
return View();
}
// GET: Login
public ActionResult Login()
{
return View();
}
}
Disable Browser Back Button implementation
HTML Markup
Login View
The Login View consists of an HTML Anchor tag and its href property is set to name of Home 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>Login</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>Login</h3>
<hr />
<a href="/Home/Home">Redirect to Home</a>
</body>
</html>
Home View
The Home View consists of an HTML Anchor tag and its href property of the Anchor link is set to name of Login View.
Note: HTML Anchor link is added to illustrate that the Login View will be prevented only using Browser Back Button and not when accessed using other means.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Home</title>
</head>
<body>
<h3>Home</h3>
<hr />
<a href="/Home/Login">Redirect to Login</a>
</body>
</html>
Screenshot
![ASP.Net MVC: Disable Browser Back Button using jQuery]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
