Introduction to forms in Blazor Server
Handling user input with forms is the cornerstone of many common websites. Websites use forms to enable users to login, update a profile, enter sensitive information, and perform many other data-entry tasks.
Blazor Server provides a built-in component to handle user input through forms: <EditForm>. <EditForm> captures user input from view, validates user input, creates a form model and data model to update, and provides a way to track changes.
This guide provides information to help you have an overview of the flow when using forms. It introduces the common building blocks used by <EditForm>.
Download the example for a working example containing the code snippets in this guide.
Prerequisites
This guide assumes that you have a basic understanding of the following:
Data flow in <EditForm>
When a website contains a form, Blazor Server must keep the view in sync with the component model and the component model in sync with the view. As users change values and make selections through the view, the new values must be reflected in the data model. Similarly, when the program logic changes the values in the data model, those values must be reflected in the view.
<EditForm> is a built-in component of Blazor Server to handle form operations including validation, track changes, bind values, etc...
Each form is associated with a form model, and for each form element, is associated with a property in form model. Any changes in the form model and the validation process will be executed on the backend server and send the results back to the frontend. The validation process is performed using the System.ComponentModel.DataAnnotations namespace of Microsoft.
Setting up the form model
To use the <EditForm>, you need to set up the form model as the first step because the <EditForm> requires the Value parameter. Head to the Data folder and create a new class.
using System.ComponentModel.DataAnnotations;
namespace FormExample.Data
{
public class Product
{
[Required]
public string Name { get; set; }
[Required]
[Range(100, double.MaxValue)]
public double? Price { get; set; }
}
}
The Name property has an Required attribute attached. The attribute Required will validate if the user has input the Name or not. The Price property has Required and Range attributes to indicate that the user must enter a Price and the price must be more than 100.
Setting up the form
The next step after you have the form model is to set up the form. Add a new razor component to the folder Page. Declare a property for the form model.
@using Data;
...
@code {
private Product Product { get; set; } = new();
}
Add the <EditForm> component and specify the Product property as the form model. Add the <DataAnnotationsValidator> component inside the <EditForm> to enable the validators.
<EditForm Model="Product">
<DataAnnotationsValidator></DataAnnotationsValidator>
</EditForm>
Add the <InputText> component inside the <EditForm> component to create an input element for the Product.Name. Add the <ValidationMessage> for the input to display errors if the validation for the Product.Name failed.
<div>
<label>Name:</label>
<InputText @bind-Value="Product.Name"></InputText>
<ValidationMessage For="() => Product.Name"></ValidationMessage>
</div>
Do the same for Product.Price but this time, use the <InputNumber> component.
<div>
<label>Price</label>
<InputNumber @bind-Value="Product.Price"></InputNumber>
<ValidationMessage For="() => Product.Price"></ValidationMessage>
</div>
Add a submit button and a submit method.
<EditForm Model="Product" OnValidSubmit="Submit">
...
<input type="submit" value="Submit" />
</EditForm>
@SubmitText
@code {
...
private string SubmitText { get; set; }
private void Submit()
{
SubmitText = $"Submitted Data: Product {Product.Name} with the price {Product.Price}";
}
}
Verify the component.
