I ❤️ .NET

In this article, let's learn about how to collect data using forms in Blazor WASM application.

Note: If you have not done so already, I recommend you read the article on Blazor WASM Communication Between Components.

Table of Contents

1. Why Forms?
2. Introducing EditForm
3. Binding Model with EditForm
4. Binding EditContext with EditForm
5. Handling Form Submission
6. Summary

Why Forms?

Forms are key part of any web application as they used to collect data from the user and submit to server for further processing. This information might range from the user details that we collect as part of a sign-up process down to a single textbox that allows users to leave comments or post messages in an collaborative application.

Introducing EditForm

The Blazor framework renders forms using a built-in component called EditForm. We can bind a model to this component to collect different types of data and process it. Although it is possible to create forms using the standard <form> HTML element, it is recommend to use the EditForm component because of the additional features and benefits it provides.

Note: If you have not done so already, I recommend you read the article on Blazor Wasm Data Binding.

Binding Model with EditForm

To start working with EditForm, we need to create a model class that will hold the data that we want to collect.

Binding EditContext with EditForm

An EditForm creates an EditContext based on the assigned model instance as a cascading value for other components in the form. The EditContext tracks metadata about the edit process, including which fields have been modified and the current validation messages.

Assigning to either an EditForm.Model or an EditForm.EditContext can bind a form to data.

Handling Form Submission

When the user submits the form, the EditForm component calls the EditForm.OnSubmit event handler. This event handler is passed the EditContext as a parameter. The EditContext provides access to the EditForm's model and the form's current state.

The EditForm provides the following callbacks for handling form submission:

• Use OnValidSubmit to assign an event handler to run when a form with valid fields is submitted.
• Use OnInvalidSubmit to assign an event handler to run when a form with invalid fields is submitted.
• Use OnSubmit to assign an event handler to run regardless of the form fields' validation status. The form is validated by calling EditContext.Validate in the event handler method. If Validate returns true, the form is valid.

Summary

In this article, we learn't what is EditForm and how to use Forms in blazor application by binding either to a Model or to a EditContext.