Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to achieve data verification in Blazor". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to achieve data verification in Blazor" can help you solve your doubts.

Blazor provides a set of input components. The input component processes the bound field data to the model and validates user input when the form is submitted.

The following table shows the available input components:

EditForm

The EditForm component wraps these input components through EditContext and coordinates the validation process. When creating an EditForm, you can use the Model parameter to refer to

The instance of the model that must be bound to. Validation is usually done using data annotations and can be extended. To enable validation based on data annotations,

Add the DataAnnotationsValidator component as a child component of EditForm. The EditForm component provides a method for handling valid

OnValidSubmit) and invalid (OnInvalidSubmit) submitted convenience events. There is also a more generic OnSubmit event that allows you to trigger it yourself.

And handle verification. To display a summary of validation errors, use the ValidationSummary component.

DataAnnotationsValidator

The DataAnnotationsValidator component uses data annotations to attach validation support to a cascaded EditContext.

When a user jumps out of a field, field validation is performed. During field validation, the DataAnnotationsValidator component associates all reported validation results with the field.

When the user submits the form, model validation is performed. During model validation, the DataAnnotationsValidator component attempts to determine the field based on the member name of the validation result report. Validation results that are independent of a single member are associated with the model rather than the field.

ValidationSummary

The ValidationSummary component is used to summarize all validation messages.

Verification

The following example shows an EditForm validating the Model parameter (for testing purposes, the entity model is written in @ code {}).

In @ code {}, create a Student type that provides Code and Name attributes

Define EditForm in the page, bind Model and validate the submitted method HandleValidSubmit

Two InputText are defined in EditForm to accept input

The button button is used to submit data for the entire model

@ page "/" @ using Microsoft.AspNetCore.Components.Forms submit @ code {@ using System.ComponentModel.DataAnnotations; private Student student = new Student (); private void HandleValidSubmit () {/ / Save the data} public class Student {[Required (AllowEmptyStrings = false, ErrorMessage = "required!")] Public string Name {get; set;} [StringLength (2, ErrorMessage = "beyond the specified length!")] Public string Code {get; set;}

Error effect

To display a summary of validation errors, use the ValidationSummary component. To display validation messages for specific input fields, use the ValidationMessage component and specify an lambda expression for the For parameter that points to the corresponding model member.

Make the transformation based on the above, as shown below. (if you validate only for each field, you do not need to add ValidationSummary to the EditForm subset)

@ * @ submit

Error effect

Nested verification

For the above individual entity validation, you can follow the above approach, but considering that the entity also contains other types of objects that need to be validated.

Official documentation explanation: to verify the entire object graph of the binding model (including properties of collection types and complex types), use the experimental Microsoft.AspNetCore.Components.DataAnnotations.Validation package

Install NuGet package

Install-Package Microsoft.AspNetCore.Components.DataAnnotations.Validation

Experiment

Create a test nested type Student / Child

EditForm subset add ObjectGraphDataAnnotationsValidator

The complete code after the transformation is as follows:

@ page "/" submit@code {@ using System.ComponentModel.DataAnnotations; private Student student = new Student (); private void HandleValidSubmit () {/ / Save the data} public class Student {[ValidateComplexType] public Child Child {get; set;} = new Child ();} public class Child {[Required (AllowEmptyStrings = false, ErrorMessage = "required!")] Public string Name {get; set;} [StringLength (2, ErrorMessage = "beyond the specified length!")] Public string Code {get; set;}

Note: the subset must be guaranteed to be an instance, otherwise an exception will be reported. As above: = new Child ()

Test results:

After reading this, the article "how to achieve data validation in Blazor" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.