Free Web Development Online Tutorials, Learn to Code
Learn Asp.net Core, Free Asp.net Core Tutorial for Beginners, Asp.net Core MVC, Razor Page

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.

Create Form in Razor Page

In razor page we can create form in two ways
  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>
}

Razor Page Form with Model Example

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 Form Submission
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

Example.cshtml.cs:
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
}

Handling Multiple Actions For Form in Razor Page
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
}
Now if you notice above methods name "OnPost" + value of asp-page-handler

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


Comment
Name
Email
Website
Subscribe
 
ASP.NET MVC Interview Questions Answers


Asp.Net Core C# Examples | Join Asp.Net MVC Course