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

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>

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>