In this article I will explain with an example, how to prevent double click of Submit button in ASP.Net Core (.Net Core 8) Razor Pages.
Note: For beginners in ASP.Net Core (.Net Core 8) Razor Pages, please refer my article ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example.
 
 

Razor PageModel (Code-Behind)

The PageModel consists of the following Handler methods.

Handler method for handling GET operation

This Handler method is left empty as it is not required.
 

Handler method for handling POST operation

This Handler method gets called, when the Submit Button is clicked.
Inside this Handler method, the Thread.Sleep function is used to delay the process.
Note: Thread.Sleep function is used to simulate a long running process. Thus, it must be removed when programming in actual project.
 
Finally, a message is set into a ViewData object.
public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
 
    public void OnPostSubmit(string name)
    {
        //Added to simulate long running process.
        //Remove before publishing.
        Thread.Sleep(5000);
 
        ViewData["Message"] = "Form submitted.";
    }
}
 
 

Razor Page (HTML)

Inside the Razor Page, the ASP.Net TagHelpers is inherited.
The HTML of Razor Page consists of an HTML Form.
Inside the Form there is an HTML INPUT TextBox and an HTML INPUT Submit Button.
The Submit Button has been set with the POST Handler method using the asp-page-handler attribute.
Note: In the Razor PageModel, the Handler method name is OnPostSubmit but here it will be specified as Submit when calling from the Razor HTML Page.
 

Form Submitting

When Form is submitted, the message is displayed using ViewData object.
Note: For more details in Form Submission in ASP.Net Core Razor Pages, please refer ASP.Net Core Razor Pages: Form Submit (Post) Example.
 

Disabling Submit button after click

For disabling Submit button after Click using JavaScript, please refer my article Disable Submit button after click using JavaScript and jQuery.
@page
@addTagHelper*,Microsoft.AspNetCore.Mvc.TagHelpers
@model Razor_Disable_Button.Pages.IndexModel
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <form method="post">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th colspan="2" align="center">Details</th>
            </tr>
            <tr>
                <td>Name:</td>
                <td><input type="text" name="name" value="" /></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Submit" asp-page-handler="Submit" /></td>
            </tr>
        </table>
        <b style="color:green">@ViewData["Message"]</b>
    </form>
 
    <script type="text/javascript">
        window.onbeforeunload = function () {
            var inputs = document.getElementsByTagName("INPUT");
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].type == "button" || inputs[i].type == "submit") {
                    inputs[i].disabled = true;
                }
            }
        };
    </script>
</body>
</html>
 
 

Screenshot

ASP.Net Core Razor Pages: Prevent double click of Submit Button
 
 

Demo

View Demo
 
 

Downloads

Download Code