👉🏼 Click here to Join I ❤️ .NET WhatsApp Channel to get 🔔 notified about new articles and other updates.
Blazor WASM Forms

Blazor WASM Forms

Blazor

29 Articles

 Improve

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.

Code Sample - EditForm With Model Demo

Demo - EditForm With Model Demo

The following form accepts user input using:

  1. The properties defined in the preceding Starship model.
  2. Several of Blazor's built-in form components.
  3. The EditForm in the example creates an EditContext based on the assigned Starship instance (Model="@starship") and handles a valid form.
  4. Message is printed on submit.

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.

Code Sample - EditForm With EditContext Demo

Demo - EditForm With EditContext Demo

The following form accepts user input using:

  1. A shortened version of the preceding Starfleet Starship Database form is used that only accepts a value for the starship's identifier. The other Starship properties receive valid default values when an instance of the Starship type is created.
  2. The HandleSubmit method executes when the Submit button is selected.
  3. The form is validated by calling EditContext.Validate in the HandleSubmit method.
  4. Message is printed on submit.

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.

👉🏼 Click here to Join I ❤️ .NET WhatsApp Channel to get 🔔 notified about new articles and other updates.
  • Blazor
  • Forms
  • Model
  • EditContext
  • EditForm