Asp.Net Core Razor Page Form Example

Razor page application is a new addition to asp.net core framework, Razor page application is best suitable for single page application, architecture wise it looks very similar to MVC, here every page comes with a model definition, if you are familiar with MVC, then you may find it very easy to implement.

Here we learn about how to work with form in Asp.Net Razor Pages, PageModel, Handler Methods, Leveraging Model Binding, Handler method parameters etc.

1. Using simple html form tag
2. Using MVC form syntax

With both type of form tag we can work using model and non-model.
Here we learn both form tag and with & without Model

Razor Page Form without Model Example

Example 1 .cshtml:
here is a simple html form tag without Model with three fields, the way we used to write in classic asp, php etc

<form method="post">
<div>Name: <input name="FullName" /> </div>
<div>Email: <input name="Email" /> </div>
<div>Mobile: <input name="ContactNumbers" /> </div>
<div> <input type="submit" /> </div>
</form>

Example 2 .cshtml:
here is an example Using MVC form without Model syntax with three fields.

@using (Html.BeginForm(FormMethod.Post))
{
    <div class="s1">
    <div>Full Name</div>
    @Html.TextBox("FullName", new { @class = "searchTxt" })
       
    </div>
    <div class="s1">
    <div>Contact Numbers</div>
    @Html.TextBox("ContactNumbers", new { @class = "searchTxt"})
    </div>
    <div class="s1">
    <div>Email</div>
    @Html.TextBox("Email", new { @class = "searchTxt" })      
    </div>
    <div>
    <input type="submit" value="Contact" />
    </div>
}

Now this you may find little different than earlier approach, for every form element there is tag we can define inside form tag, this is also known as form with tag helper in razor page. apart from controller and action we also can define asp-area, asp-route, asp-route-returnurl="@ViewData["ReturnUrl"]" etc.

<form asp-controller="acct" asp-action="login" method="post">
	<!-- all input fields goes here-->
	<input type="submit" />
</form>

Razor Page Form with Model Example

Let's learn how to create Model for Razor Form<
First we create a simple Model with few properties , each property has to have a [BindProperty] attribute

public class ContactModel : PageModel
{
[BindProperty]
public string FullName { get; set; }
[BindProperty]
public string ContactNumbers { get; set; }
[BindProperty]
public string Email { get; set; }
}

Example 1 .cshtml:
here is a simple example of html form tag with Model with three fields.

Now if you notice I have specified fields in two different ways, first one Using MVC style and other one using asp-for="propertyname", both works fine!

<form method="post">
<div>@Html.TextBoxFor(m => m.FullName)</div>
<div>Email: <input asp-for="Email" /> </div>
<div>Mobile: <input asp-for="ContactNumbers" /> </div>
<div> <input type="submit" /> </div>
</form>

Example 2 .cshtml:
Using MVC form syntax with three fields

@using (Html.BeginForm(FormMethod.Post))
{
<div class="s1">
<div>Full Name</div>
@Html.TextBoxFor(m => m.FullName) </div>
<div class="s1">
<div>Contact Numbers</div>
@Html.TextBoxFor(m => m.ContactNumbers) </div>
<div class="s1">
<div>Email</div>
@Html.TextBoxFor(m => m.Email)        
    </div>
    <div>
    <input type="submit" value="Contact" />
    </div>
}

Razor Page Form Submission in Asp.Net Core 3.1

Once you submit the form, you can access the submitted values in your codebehind OnPost() method
Now here we have given two examples
This one will work only if you have Model associated with the form

public void OnPost()
{
var name = FullName;
var email = Email;
var mobile = ContactNumbers;
// now you have all submitted values in local variables
}

This example will work in both situations, with Model and without Model
Still you can access properties using Request.Form["fieldName"]

public void OnPost()
{
var name = Request.Form["FullName"];
var email = Request.Form["Email"];
var mobile = Request.Form["ContactNumbers"];
// now you have all submitted values in local variables
}

In some situation you may need to have multiple action buttons, in such situation you can write separate named handler methods, and in action tag helper specify the handler method name.

<form method="post">
<button asp-page-handler="Register">Register</button>
<button asp-page-handler="Request">Request Info</button>
</form>

Now in codebehind specify the method name with OnPost Prefix or Async Suffix

public void OnPostRegister()
{
var name = Request.Form["FullName"];
// now you have all submitted values in local variables
}
public void OnPostRequest()  
{
var name = Request.Form["FullName"];
// now you have all submitted values in local variables
}

You should also read razor pages handler methods in Asp.Net Core

You should also read following post to learn more about PageModel, Handler Methods, leveraging Model Binding, Handler method parameters etc.

• Async await method in razor page example
• Submit Handler Methods in Razor Pages
• Asp.net Core razor page tutorial