In this article I will explain with an example, how to submit (post) a Form and send data from Razor Page to POST Handler method in ASP.Net Core.
This article will explain how to create Form Fields and then send data from Razor Page to POST Handler method using Model class in ASP.Net Core.
Note: For beginners in ASP.Net Core Razor Pages, please refer my article ASP.Net Core Razor Pages: Hello World Tutorial with Sample Program example.
 
 
Model
Following is a Model class named PersonModel with two properties i.e. FirstName and LastName.
public class PersonModel
{
    [BindProperty]
    public string FirstName { get; set; }
 
    [BindProperty]
    public string LastName { get; set; }
}
 
 

Razor PageModel (Code-Behind)
The PageModel consists of two Action Handler methods.
Handler method for handling GET operation
This Handler method handles the GET calls, for this particular example it is not required and hence left empty.
 
Handler method for handling Button Click and POST operation
This Handler method handles the POST call when the Submit Button is clicked and the Form is submitted.
The Handler method for POST operation accepts the values of First Name and Last Name sent from the Razor Page through PersonModel class object received as parameter.
Finally, the values are assigned to the Name property which is later displayed on the Razor Page.
public class IndexModel : PageModel
{
    public string Name { get; set; }
 
    public void OnGet()
    {
    }
 
    public void OnPostSubmit(PersonModel person)
    {
        this.Name = string.Format("Name: {0} {1}", person.FirstName, person.LastName);
    }
}
 
 
Razor Page (HTML)
The HTML of Razor Page consists of an HTML Form with two TextBox elements and a 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.
 
Finally, the value of the Name property is displayed using Razor syntax.
@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model Razor_Form_Submit.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>First Name: </td>
                <td><input type="text" id="txtFirstName" name="FirstName"/></td>
            </tr>
            <tr>
                <td>Last Name: </td>
                <td><input type="text" id="txtLastName" name="LastName"/></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Submit" asp-page-handler="Submit"/></td>
            </tr>
        </table>
        <hr/>
        @Model.Name
    </form>
</body>
</html>
 
 
Screenshot
ASP.Net Core Razor Pages:  Form Submit (Post) Example
 
 
Downloads