In this article I will explain with an example, how to open Page (View) in New Tab (Window) on
Button Click in (.Net Core 8)
Razor Pages.
Button cannot be used to open Page (View) in New Tab (Window) and hence using
JavaScript’s window.open function, the Page (View) will be opened in New Tab (Window) on
Button Click in (.Net Core 8)
Razor Pages.
Razor PageModel (Code-Behind)
The PageModel consists of following Handler methods.
Handler method for handling GET operation for Index
This Handler method, is left empty as it is not required.
Index
public class IndexModel : PageModel
{
public void OnGet()
{
}
}
About
public class AboutModel : PageModel
{
public void OnGet()
{
}
}
Razor Page (HTML)
HTML Markup
The Razor Page consists of an
HTML Button assigned with an
OnClick event handler.
When the
Button is clicked, the
About Page is opened in New Tab (Window) using
window.open function of
JavaScript.
Index
@page
@model Button_Open_New_Tab_Core_Razor.Pages.AboutModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>About</title>
</head>
<body>
<input type="button" value="Open" onclick="window.open('@Url.Page("/Home/About")')" />
</body>
</html>
About
@page
@model Button_Open_New_Tab_Core_Razor.Pages.IndexModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<input type="button" value="Open" onclick="window.open('@Url.Page("/About")')" />
</body>
</html>
Screenshot
![ASP.Net Razor Pages: Open Page (View) in New Tab (Window) on Button Click]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Downloads
