In this article I will explain with an example, how to use multiple Submit Buttons inside Razor Pages in ASP.Net Core.
Multiple Submit Buttons will be placed inside a single Form and each Button will call a different Handler Method in ASP.Net Core Razor Pages.
Razor PageModel (Code-Behind)
The PageModel consists of the following three Handler methods.
Handler method for handling GET operation
This Handler method is left empty as it is not required.
Save Handler method for handling POST operation – Button 1
This Handler method gets called on the click of the first button i.e. Save button. It sets a string message in ViewData object indicating that the Save button was clicked.
Cancel Handler method for handling POST operation – Button 2
This Handler method gets called on the click of the second button i.e. Cancel button. It sets a string message in ViewData object indicating that the Cancel button was clicked.
public class IndexModel : PageModel
{
public void OnGet()
{
}
public void OnPostSave()
{
ViewData["Message"] = "You clicked Save!";
}
public void OnPostCancel()
{
ViewData["Message"] = "You clicked Cancel!";
}
}
Razor Page (HTML)
The HTML of Razor Page consists of an HTML Form consisting two Submit Buttons.
The Submit Buttons has been set with the POST Handler method using the asp-page-handler attribute.
When the Submit Buttons are clicked, the Form gets submitted.
At the end, there’s a JavaScript method that displays the ViewData object message using JavaScript Alert Message Box.
@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model Multiple_Submit_Razor_Core.Pages.IndexModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<form method="post">
<table>
<tr>
<td><input type="submit" id="btnSave" value="Save" asp-page-handler="Save"/></td>
<td><input type="submit" id="btnCancel" value="Cancel" asp-page-handler="Cancel"/></td>
</tr>
</table>
</form>
@if (ViewData["Message"] != null)
{
<script type="text/javascript">
window.onload = function () {
alert('@ViewData["Message"]');
};
</script>
}
</body>
</html>
Screenshot
![ASP.Net Core: Using Multiple Submit Buttons in Razor Pages]()
Downloads
