Blazor Forms Explained

What is a Blazor?

Blazor is a platform for developing immersive client-side web user interfaces with.NET. It enables.NET developers to create advanced mobile apps.

Blazor encourages one to use C# rather than JavaScript to write immersive Web UIs. Blazor has the React or Angular component model, which is used for creating user interfaces using C#, Javascript, and CSS.

Blazor Forms

We can use the basic HTML form to build a Blazor form. Blazor comes with several integrated shapes and components, which make it easier to build a form. These incorporated Blazor type components are also validated. A Blazor offers a special EditForm component. EditForm makes it easier to construct a form of entities, and we need to describe the form first. Here is an example of EditForm.

<EditForm Model = “@Student”>
          <h3>Edit Student</h3>
          <hr />
          <div class = “form-group row”>
                   <label for=”FirstName” class=”col-sm-2 col-form-model”>
                           First Name
                    </label>
            <div class =”col-sm-10”>
                     <Input text = id= "FirstName” class=”form-control” placeholder= “First Name” @bind-value = “Student.FirstName” />
             </div>
        </div>
     <div class “ form-group row”>
              <label for=”LastName” class=”col-sm-2 col-form-model”>
                           Last Name
                    </label>
            <div class =”col-sm-10”>
                     <Input text = id= "LastName” class=”form-control” placeholder= “Last Name” @bind-value = “Student.LastName” />
             </div>
     </div>
<div class = “form-group row”>
          <label for=”email” class=”col-sm-2 col-form-model”>
                           Email
                    </label>
            <div class =”col-sm-10”>
                     <Input text = id= "email” class=”form-control” placeholder= “Email” @bind-value = “Student.Email” />
             </div>
       </div>
</EditForm>

EditForm Component

Its model parameter is the main function of the EditForm. This parameter helps the component operate with a context to connect the user interface and decide if the user’s data is valid.

The EditForm component is used for defining a form in Blazor. The @Model attribute describes the data to which the form is connected and then used. In the above example, the model attribute value is a student who is a component class property and carries the student data to which the element links and operates.

The inputText component links to the Student. This attribute offers data linking in two ways. This means that the value in the student object’s FirstName property is seen in the input element. If we change the FirstName, the Student.FirstName property automatically updates the change value by changing the value in the input element.

Edit Form Data

As EditForm returns a standard HTML element, you can use standard HTML form elements such as <input and <select> can also be used in the template. You can also use separate Blazor input controls, as with the EditForm component, since they have additional features, such as validation. There are a regular set of input components in Blazor that are all down from the simple inputBase<T> class available in Blazor.

InputCheckbox

The InputCheckbox connects a Boolean property to an HTML <input type = “Checkbox” variable. This part will not allow linking to invalidation.

InputDate

The InputDate element connects a DateTime property to an HTML <input type = “date”> variable. However, not all browsers allow this component to specify a null value of an input type element. This is an invalid property.

InputNumber

The part of ImputNumber links any number of C# to an HTML <input type = “number” element. If the entered value is not parsed in the target property type, the input will be invalid and will not change the model. The invalid input is assumed to be null when the target property is empty, and the text in the input is plain.

<InputNumber @bind- Value = FormData.SomeIntegerPropertyParsingErrorMessage = “ Must be an integer value” />

<InputNumber @bind- Value = FormData.SomeDecima;PropertyParsingErrorMessage = “ Must be a decimal value” />

InputText

The InputText component connects a property string to a non-specified HTML <input> variable. This helps one define any of the input forms available, including password, color, or other options.

<InputText @bind- Value = FormData.SomeStringProperty />

InputTextArea

The InputTextArea component connects a string property to an HTML entity called <textarea>.

<InputTextArea @bind- Value=FormData.SomeMultiLineStringProperty />

Validation

DataAnnotationsValidator is the regular form of validator in Blazor. This component can be applied to an EditForm component to allow form validation based on .NET attributes from System.ComponentModel.DataAnnotations.ValidationAttribute.

Edit the page in the regular Blazor app and provide a template for editing. The user will now obtain a form that does not verify the user’s input while running the program. A validation process has to be defined to ensure that the form is validated. Add the DataAnnotationsValidator to the EditForm component.

Validation Error Messages

The user can see the validation error messages in two ways. A ValidationSummary can be added to provide a full list of errors. You can use the ValidationMessage component to display error messages for a particular type of input in the form. These components are not strictly related and can be used together.

Form Submission

The EditForm will trigger your OnSubmit event when the user clicks the Submit button. We can use this event with every business logic in our code.

<form>
<input class = “btn btn-primary” type = “submit” value = “Submit”>
</form>

Handling Form Submission

Blazor can release a HTML <form> variable when rendering an EditForm component. Since this is a default web control, you can submit the form by inserting <input type = “submit”>. Blazor will detect submission events and return them to the razor view.

The submission of a form is connected to three events in the EditForm such as OnValidSubmit, OnInvalidSubmit, and OnSubmit. Either of these events is a parameter for an EditContext used for deciding the state of the user’s input.

Validation Criteria

Validation works perfectly for a simple type in which any property is simple. For example, if the EditForm.The model has complicated characteristics like a class with a HomeAddress property; the sub-properties cannot be validated unless you add them to the validation.

Conclusion

You can use Data Annotations to support Form and Validation in Blazor. You can describe a form using an EditForm component. Therefore the above article will give a clear idea about forms and how to get started with Blazor forms.