In this article I will explain with an example, how to disable Submit Button after click in ASP.Net Core Razor Pages
Note: For beginners in ASP.Net Core 7 Razor Pages, please refer my article ASP.Net Core 7 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.
        System.Threading.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: Disable Submit Button after click
 
 
Demo
View Demo
 
 
Downloads
Download Code