(C# ASP.NET Core) Creating an HTML FORM with Razor Pages

This is an introduction to the most common UI Elements that can be used on a FORM. The article starts with a quick introduction to an html form of only one textbox, and then shows how to translate it to a razor form. Then a checkbox, a radiobuttonlist, and a dropdown are successively added one by one to build a full blown razor form. Data is not posted, a topic reserved for the next tutorials.

Categories | About |     |  

Parveen,

A brief refresher on HTML Forms

An HTML FORM is used to capture user input in the form of text, checkbox, dropdown selection, radiobuttons etc., and send it to the server.

An html form contains UI elements like textboxes, radiobuttons, dropdowns, checkboxes etc., + a submit button put inside a <form> tag. When the submit is clicked, the data in the UI elements is sent to the server in name-value format. For example if the following form is submitted the data will be POSTed in the format "userID=whatever-typed".


<form method="POST" action="/login">

 <input type="text" name="userID"/>
 
 <button type="submit">Send!</button>

</form>

For a complete information refer Your first form on the mozilla documentation website.

Video Explanation

Please watch the following youtube video:

Converting the above FORM to a Razor FORM

The best way of writing a razor form is to first create a c# model class that contains all the data your form has to handle.

Following is a model class consisting of the lone property, Name, for the textbox on our form. By convention all your model classes should be kept inside a folder called Models.

// file location- Pages/Models/User.cs 
public class User
{

  public String Name { get; set; }
}

The backing class should now define a [BindProperty] of this model class. A BindProperty is for two-way communication. It is named in camel notation, and started with an upper case capital letter, for example, UserData as done below.

// backing class- Pages/Index.cshtml.cs 
using Microsoft.AspNetCore.Mvc;

public class IndexModel : PageModel
{

  [BindProperty]
  public User UserData { get; set; }

  // --- other members of the class --- // 
}

The razor form should use tag helpers. For that the directive addTagHelper should be included in your razor page.

The form below is 90% same as the html form except for the attribute asp-for. This directive makes a 2-way binding to the property Name of the BindProperty UserData on your backing class.


@page

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@model MyRazorApp.Pages.IndexModel

<form method="POST">

 <input asp-for="UserData.Name" type="text" />

 <button type="submit">Send!</button>

</form>

NOTE: we will learn how to read the POST-ed data in the next tutorials. Presently, we are concentrating on FORM elements in a razor page.

Checkbox in a Razor FORM

A checkbox is backed by a boolean property. The model class could look like so:

// file location- Pages/Models/User.cs 
public class User
{

  public String Name { get; set; }

  // boolean for a checkbox 
  public bool IsQualified { get; set; }
}

The razor page will automatically generate a checkbox on the basis of the datatype of the bound property-


@page

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@model MyRazorApp.Pages.IndexModel

<form method="POST">

 <input asp-for="UserData.Name" type="text" />

 // a checkbox willbe shown because the property  
 // is a boolean property 
 <input asp-for="UserData.IsQualified" />

 <button type="submit">Send!</button>

</form>

Radiobutton list in a Razor FORM

Add any string property to your model.

// file location- Pages/Models/User.cs 
public class User
{

  public String Name { get; set; }

  // boolean for a checkbox 
  public bool IsQualified { get; set; }

  // for radio buttons T or S 
  // see the value attributes in razor page next 
  public string UserType { get; set; }
}

Radio buttons are inputs of type "radio". Each radiobutton of a group is bound to the same asp-for property. Notice that value property is actually stored in the field "UserType".


@page

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@model MyRazorApp.Pages.IndexModel

<form method="POST">

 <input asp-for="UserData.Name" type="text" />

 // a checkbox willbe shown because the property  
 // is a boolean property 
 <input asp-for="UserData.IsQualified" />

 // first radio 
 <label>

 <input type="radio" asp-for="UserData.UserType" value="S" checked />
 
   Student

 </label>

 // second radio 
 <label>

 <input type="radio" asp-for="UserData.UserType" value="T" checked />
 
   Teacher

 </label>

 <button type="submit">Send!</button>

</form>

Dropdown in a Razor FORM

Add a string property to your model thus-

// file location- Pages/Models/User.cs 
public class User
{

  public String Name { get; set; }

  // boolean for a checkbox 
  public bool IsQualified { get; set; }

  // for radio buttons T or S 
  // see the value attributes in razor page next 
  public string UserType { get; set; }

  // for dropdown 
  public string UserLocation { get; set; }
}

A dropdown is written with a <select> tag. The list of items is obtained from a collection of SelectListItem. The collection is sometimes hard-coded as we have done below. But it can be obtained from a database also.

// Index.cshtml.cs 
public class IndexModel : PageModel
{

  [BindProperty]
  public User UserData { get; set; }

  // list that can be filled after some database query 
  // but we are hardcoding an initial value here 
  public IList<SelectListItem> Locations { get; set; } =
  new List<SelectListItem>()
  {

    new SelectListItem("Tokyo", "TYO"),
    new SelectListItem("Paris", "PRS"),
    new SelectListItem("Ankara", "ANK")
  };

}

This list can be connected to a dropdown through asp-items attribute as shown here


@page

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@model MyRazorApp.Pages.IndexModel

<form method="POST">

 <input asp-for="UserData.Name" type="text" />

 // a checkbox willbe shown because the property  
 // is a boolean property 
 <input asp-for="UserData.IsQualified" />

 // first radio 
 <label>

 <input type="radio" asp-for="UserData.UserType" value="S" checked />
 
   Student

 </label>

 // second radio 
 <label>

 <input type="radio" asp-for="UserData.UserType" value="T" checked />
 
   Teacher

 </label>

 // dropdown 
 <select asp-for="UserData.UserLocation"
           asp-items="Model.Locations" required>
 </select>

 <button type="submit">Send!</button>

</form>


This Blog Post/Article "(C# ASP.NET Core) Creating an HTML FORM with Razor Pages" by Parveen is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Comments and Discussion