如何使我的 Blazor 的 EditForm 与 DataAnnotations 一起使用？

Question

After creating a new project in Blazor WebAssembly, I just modify the index.razor to create a simple EditForm like this:

@page "/"

@using System.ComponentModel.DataAnnotations
@using EditFormValidation.Models
<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<EditForm EditContext="context" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
    <DataAnnotationsValidator />

    <ValidationSummary />

    <InputText @bind-Value="adresse.Adresse1" />
    <ValidationMessage For="(() => adresse.Adresse1)" />

    <InputText @bind-Value="adresse.Adresse2" />
    <ValidationMessage For="(() => adresse.Adresse2)" />

    <InputText @bind-Value="adresse.Email" />
    <ValidationMessage For="(() => adresse.Email)" />

    <button type="submit">Save</button>
</EditForm>

@code{
    public class Adresse
    {
        [Required]
        public string Adresse1;

        [Required]
        public string Adresse2;

        [Required]
        [EmailAddress]
        public string Email;
    }

    Adresse adresse = new Adresse();
    EditContext context;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        context = new EditContext(adresse);
    }

    private void HandleValidSubmit()
    {
        Console.WriteLine("Submit...");
    }

    private void HandleInvalidSubmit()
    {
        Console.WriteLine("Invalid Submit...");
    }
}

There is no validation summary, no messages and the HandleValidSubmit is call when I press "Save". Only style on the input text becomes green when text inside.

My solution here

Answer 1

First off, remove this code:

 protected override void OnAfterRender(bool firstRender)
{
    base.OnAfterRender(firstRender);
    context.Validate();
}

Do the following:

• Add a method name HandleValidSubmit as follows:

   private void HandleValidSubmit() { Console.WriteLine("Submit..."); }

This method is called whenever you click on the submit button your are about to add to your EditForm

<button type="submit">Save</button>

You should also add an attribute named OnValidSubmit to your EditForm, and assign it the value "HandleValidSubmit"

The OnValidSubmit event is triggered when you press the "submit" button, and the model is valid, and the event handler HandleValidSubmit is executed and prints to the screen the text "Submit..."

Here's the complete relevant code snippet:

<EditForm EditContext="context" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />

    <ValidationSummary />

    <InputText @bind-Value="adresse.Adresse1" />
    ValidationMessage For="@(() => adresse.Adresse1)" />

    <button type="submit">Save</button>
</EditForm>

@code{
     private void HandleValidSubmit()
      {
           Console.WriteLine("Submit...");
      }
}

Note: the HandleValidSubmit will never be called, as your model will not pass validation, unless you provide values for Adresse2 and Email. You can do it by adding tag elements for both fields into the EditForm

Note: Your model class should be defined with get and set accessors for each property, and without the semi-colon at the end.

public class Adresse
    {
        [Required]
        public string Adresse1  { get; set; }

        [Required]
        public string Adresse2  { get; set; }

        [Required]
        [EmailAddress]
        public string Email  { get; set; }
    }
 

Hope this helps...

Answer 2

The members of the model must be properties.