Validation des formulaires Blazor ASP.NET Core

Dans les Blazor Web Apps, la validation côté client nécessite un circuit BlazorSignalR actif. La validation côté client n’est pas disponible pour les formulaires dans les composants qui ont adopté le rendu statique côté serveur (SSR statique). Les formulaires qui adoptent le SSR statique sont validés sur le serveur après la soumission du formulaire.

@page "/starship-8"
@implements IDisposable
@inject ILogger<Starship8> Logger

<h2>Holodeck Configuration</h2>

<EditForm EditContext="editContext" OnValidSubmit="Submit" FormName="Starship8">
    <div>
        <label>
            <InputCheckbox @bind-Value="Model!.Subsystem1" />
            Safety Subsystem
        </label>
    </div>
    <div>
        <label>
            <InputCheckbox @bind-Value="Model!.Subsystem2" />
            Emergency Shutdown Subsystem
        </label>
    </div>
    <div>
        <ValidationMessage For="() => Model!.Options" />
    </div>
    <div>
        <button type="submit">Update</button>
    </div>
</EditForm>

@code {
    private EditContext? editContext;

    [SupplyParameterFromForm]
    private Holodeck? Model { get; set; }

    private ValidationMessageStore? messageStore;

    protected override void OnInitialized()
    {
        Model ??= new();
        editContext = new(Model);
        editContext.OnValidationRequested += HandleValidationRequested;
        messageStore = new(editContext);
    }

    private void HandleValidationRequested(object? sender,
        ValidationRequestedEventArgs args)
    {
        messageStore?.Clear();

        // Custom validation logic
        if (!Model!.Options)
        {
            messageStore?.Add(() => Model.Options, "Select at least one.");
        }
    }

    private void Submit() => Logger.LogInformation("Submit: Processing form");

    public class Holodeck
    {
        public bool Subsystem1 { get; set; }
        public bool Subsystem2 { get; set; }
        public bool Options => Subsystem1 || Subsystem2;
    }

    public void Dispose()
    {
        if (editContext is not null)
        {
            editContext.OnValidationRequested -= HandleValidationRequested;
        }
    }
}

@page "/starship-8"
@implements IDisposable
@inject ILogger<Starship8> Logger

<h2>Holodeck Configuration</h2>

<EditForm EditContext="editContext" OnValidSubmit="Submit" FormName="Starship8">
    <div>
        <label>
            <InputCheckbox @bind-Value="Model!.Subsystem1" />
            Safety Subsystem
        </label>
    </div>
    <div>
        <label>
            <InputCheckbox @bind-Value="Model!.Subsystem2" />
            Emergency Shutdown Subsystem
        </label>
    </div>
    <div>
        <ValidationMessage For="() => Model!.Options" />
    </div>
    <div>
        <button type="submit">Update</button>
    </div>
</EditForm>

@code {
    private EditContext? editContext;

    [SupplyParameterFromForm]
    private Holodeck? Model { get; set; }

    private ValidationMessageStore? messageStore;

    protected override void OnInitialized()
    {
        Model ??= new();
        editContext = new(Model);
        editContext.OnValidationRequested += HandleValidationRequested;
        messageStore = new(editContext);
    }

    private void HandleValidationRequested(object? sender,
        ValidationRequestedEventArgs args)
    {
        messageStore?.Clear();

        // Custom validation logic
        if (!Model!.Options)
        {
            messageStore?.Add(() => Model.Options, "Select at least one.");
        }
    }

    private void Submit() => Logger.LogInformation("Submit: Processing form");

    public class Holodeck
    {
        public bool Subsystem1 { get; set; }
        public bool Subsystem2 { get; set; }
        public bool Options => Subsystem1 || Subsystem2;
    }

    public void Dispose()
    {
        if (editContext is not null)
        {
            editContext.OnValidationRequested -= HandleValidationRequested;
        }
    }
}

@page "/starship-8"
@implements IDisposable
@inject ILogger<Starship8> Logger

<h2>Holodeck Configuration</h2>

<EditForm EditContext="editContext" OnValidSubmit="Submit">
    <div>
        <label>
            <InputCheckbox @bind-Value="Model!.Subsystem1" />
            Safety Subsystem
        </label>
    </div>
    <div>
        <label>
            <InputCheckbox @bind-Value="Model!.Subsystem2" />
            Emergency Shutdown Subsystem
        </label>
    </div>
    <div>
        <ValidationMessage For="() => Model!.Options" />
    </div>
    <div>
        <button type="submit">Update</button>
    </div>
</EditForm>

@code {
    private EditContext? editContext;

    public Holodeck? Model { get; set; }

    private ValidationMessageStore? messageStore;

    protected override void OnInitialized()
    {
        Model ??= new();
        editContext = new(Model);
        editContext.OnValidationRequested += HandleValidationRequested;
        messageStore = new(editContext);
    }

    private void HandleValidationRequested(object? sender,
        ValidationRequestedEventArgs args)
    {
        messageStore?.Clear();

        // Custom validation logic
        if (!Model!.Options)
        {
            messageStore?.Add(() => Model.Options, "Select at least one.");
        }
    }

    private void Submit()
    {
        Logger.LogInformation("Submit called: Processing the form");
    }

    public class Holodeck
    {
        public bool Subsystem1 { get; set; }
        public bool Subsystem2 { get; set; }
        public bool Options => Subsystem1 || Subsystem2;
    }

    public void Dispose()
    {
        if (editContext is not null)
        {
            editContext.OnValidationRequested -= HandleValidationRequested;
        }
    }
}

Pour plus d’informations sur le comportement de validation, consultez la DataAnnotationsValidator section comportement de validation .

@page "/starship-9"
@inject ILogger<Starship9> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="Model" OnValidSubmit="Submit" FormName="Starship9">
    <CustomValidation @ref="customValidation" />
    <ValidationSummary />
    <div>
        <label>
            Primary Classification:
            <InputSelect @bind-Value="Model!.Classification">
                <option value="">
                    Select classification ...
                </option>
                <option checked="@(Model!.Classification == "Exploration")" 
                    value="Exploration">
                    Exploration
                </option>
                <option checked="@(Model!.Classification == "Diplomacy")" 
                    value="Diplomacy">
                    Diplomacy
                </option>
                <option checked="@(Model!.Classification == "Defense")" 
                    value="Defense">
                    Defense
                </option>
            </InputSelect>
        </label>
    </div>
    <div>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="Model!.Description" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

@code {
    private CustomValidation? customValidation;

    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized() =>
        Model ??= new() { ProductionDate = DateTime.UtcNow };

    private void Submit()
    {
        customValidation?.ClearErrors();

        var errors = new Dictionary<string, List<string>>();

        if (Model!.Classification == "Defense" &&
                string.IsNullOrEmpty(Model.Description))
        {
            errors.Add(nameof(Model.Description),
                [ "For a 'Defense' ship classification, " +
                "'Description' is required." ]);
        }

        if (errors.Any())
        {
            customValidation?.DisplayErrors(errors);
        }
        else
        {
            Logger.LogInformation("Submit called: Processing the form");
        }
    }
}

@page "/starship-9"
@inject ILogger<Starship9> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="Model" OnValidSubmit="Submit" FormName="Starship9">
    <CustomValidation @ref="customValidation" />
    <ValidationSummary />
    <div>
        <label>
            Primary Classification:
            <InputSelect @bind-Value="Model!.Classification">
                <option value="">
                    Select classification ...
                </option>
                <option checked="@(Model!.Classification == "Exploration")" 
                    value="Exploration">
                    Exploration
                </option>
                <option checked="@(Model!.Classification == "Diplomacy")" 
                    value="Diplomacy">
                    Diplomacy
                </option>
                <option checked="@(Model!.Classification == "Defense")" 
                    value="Defense">
                    Defense
                </option>
            </InputSelect>
        </label>
    </div>
    <div>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="Model!.Description" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

@code {
    private CustomValidation? customValidation;

    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized() =>
        Model ??= new() { ProductionDate = DateTime.UtcNow };

    private void Submit()
    {
        customValidation?.ClearErrors();

        var errors = new Dictionary<string, List<string>>();

        if (Model!.Classification == "Defense" &&
                string.IsNullOrEmpty(Model.Description))
        {
            errors.Add(nameof(Model.Description),
                [ "For a 'Defense' ship classification, " +
                "'Description' is required." ]);
        }

        if (errors.Any())
        {
            customValidation?.DisplayErrors(errors);
        }
        else
        {
            Logger.LogInformation("Submit called: Processing the form");
        }
    }
}

@page "/starship-9"
@inject ILogger<Starship9> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="Model" OnValidSubmit="Submit">
    <CustomValidation @ref="customValidation" />
    <ValidationSummary />
    <div>
        <label>
            Primary Classification:
            <InputSelect @bind-Value="Model!.Classification">
                <option value="">Select classification ...</option>
                <option value="Exploration">Exploration</option>
                <option value="Diplomacy">Diplomacy</option>
                <option value="Defense">Defense</option>
            </InputSelect>
        </label>
    </div>
    <div>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="Model!.Description" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

@code {
    private CustomValidation? customValidation;

    public Starship? Model { get; set; }

    protected override void OnInitialized() =>
        Model ??= new() { ProductionDate = DateTime.UtcNow };

    private void Submit()
    {
        customValidation?.ClearErrors();

        var errors = new Dictionary<string, List<string>>();

        if (Model!.Classification == "Defense" &&
                string.IsNullOrEmpty(Model.Description))
        {
            errors.Add(nameof(Model.Description),
                new() { "For a 'Defense' ship classification, " +
                "'Description' is required." });
        }

        if (errors.Any())
        {
            customValidation?.DisplayErrors(errors);
        }
        else
        {
            Logger.LogInformation("Submit called: Processing the form");
        }
    }
}

Cette section se concentre sur les scénarios Blazor Web App, mais l’approche pour tout type d’application qui utilise la validation serveur avec l’API Web adopte la même approche générale.

Cette section se concentre sur les scénarios Blazor WebAssembly hébergés, mais l’approche pour tout type d’application qui utilise la validation serveur avec l’API Web adopte la même approche générale.

• Un Blazor Web App composants WebAssembly interactifs créés à partir du modèle de projet Blazor Web App.
• Le modèle Starship (Starship.cs) de la section Formulaire d’exemple de l’article Composants d’entrée.
• Le composant CustomValidation présenté dans la section Composants de validation.

Placez le modèle Starship (Starship.cs) dans un projet de bibliothèque de classes partagée afin que les projets client et serveur puissent utiliser le modèle. Ajoutez ou mettez à jour l’espace de noms pour qu’il corresponde à celui de l’application partagée (par exemple, namespace BlazorSample.Shared). Comme le modèle nécessite des annotations de données, vérifiez que la bibliothèque de classes partagée utilise le framework partagé ou ajoutez le package System.ComponentModel.Annotations au projet partagé.

Dans le projet principal de Blazor Web App, ajoutez un contrôleur pour traiter les requêtes de validation des vaisseaux spatiaux et renvoyer les messages de validation échoués. Mettez à jour les espaces de noms dans la dernière instruction using pour le projet de bibliothèque de classes partagée et namespace pour la classe de contrôleur. Outre la validation des annotations de données client et serveur, le contrôleur vérifie qu’une valeur est fournie pour la description du vaisseau (Description) si l’utilisateur sélectionne la classification de vaisseau Defense (Classification).

• Une Blazor WebAssemblysolution hébergée créée à partir du modèle de projet Blazor WebAssembly. Cette approche est prise en charge pour toutes les solutions Blazor hébergées sécurisées décrites dans la documentation relative à la sécurité hébergéeBlazor WebAssembly.
• Le modèle Starship (Starship.cs) de la section Formulaire d’exemple de l’article Composants d’entrée.
• Le composant CustomValidation présenté dans la section Composants de validation.

Placez le modèle Starship (Starship.cs) dans le projet Shared de la solution afin que les applications client et serveur puissent utiliser le modèle. Ajoutez ou mettez à jour l’espace de noms pour qu’il corresponde à celui de l’application partagée (par exemple, namespace BlazorSample.Shared). Comme le modèle nécessite des annotations de données, ajoutez le package System.ComponentModel.Annotations au projet Shared.

Dans le projet Server, ajoutez un contrôleur pour traiter les requêtes de validation des vaisseaux spatiaux et renvoyer les messages de validation échoués. Mettez à jour les espaces de noms dans la dernière instruction using pour le projet Shared et le namespace pour la classe de contrôleur. Outre la validation des annotations de données client et serveur, le contrôleur vérifie qu’une valeur est fournie pour la description du vaisseau (Description) si l’utilisateur sélectionne la classification de vaisseau Defense (Classification).

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using BlazorSample.Shared;

namespace BlazorSample.Server.Controllers;

[Authorize]
[ApiController]
[Route("[controller]")]
public class StarshipValidationController(
    ILogger<StarshipValidationController> logger) 
    : ControllerBase
{
    static readonly string[] scopeRequiredByApi = [ "API.Access" ];

    [HttpPost]
    public async Task<IActionResult> Post(Starship model)
    {
        HttpContext.VerifyUserHasAnyAcceptedScope(scopeRequiredByApi);

        try
        {
            if (model.Classification == "Defense" && 
                string.IsNullOrEmpty(model.Description))
            {
                ModelState.AddModelError(nameof(model.Description),
                    "For a 'Defense' ship " +
                    "classification, 'Description' is required.");
            }
            else
            {
                logger.LogInformation("Processing the form asynchronously");

                // async ...

                return Ok(ModelState);
            }
        }
        catch (Exception ex)
        {
            logger.LogError("Validation Error: {Message}", ex.Message);
        }

        return BadRequest(ModelState);
    }
}

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using BlazorSample.Shared;

namespace BlazorSample.Server.Controllers;

[Authorize]
[ApiController]
[Route("[controller]")]
public class StarshipValidationController(
    ILogger<StarshipValidationController> logger) 
    : ControllerBase
{
    static readonly string[] scopeRequiredByApi = new[] { "API.Access" };

    [HttpPost]
    public async Task<IActionResult> Post(Starship model)
    {
        HttpContext.VerifyUserHasAnyAcceptedScope(scopeRequiredByApi);

        try
        {
            if (model.Classification == "Defense" && 
                string.IsNullOrEmpty(model.Description))
            {
                ModelState.AddModelError(nameof(model.Description),
                    "For a 'Defense' ship " +
                    "classification, 'Description' is required.");
            }
            else
            {
                logger.LogInformation("Processing the form asynchronously");

                // async ...

                return Ok(ModelState);
            }
        }
        catch (Exception ex)
        {
            logger.LogError("Validation Error: {Message}", ex.Message);
        }

        return BadRequest(ModelState);
    }
}

Ajoutez l’espace de noms Microsoft.AspNetCore.Mvc en haut du fichier Program dans le projet principal de Blazor Web App :

using Microsoft.AspNetCore.Mvc;

Dans le fichier Program, ajoutez ou mettez à jour la méthode d’extension AddControllersWithViews suivante et ajoutez l’appel suivant à ConfigureApiBehaviorOptions :

builder.Services.AddControllersWithViews()
    .ConfigureApiBehaviorOptions(options =>
    {
        options.InvalidModelStateResponseFactory = context =>
        {
            if (context.HttpContext.Request.Path == "/StarshipValidation")
            {
                return new BadRequestObjectResult(context.ModelState);
            }
            else
            {
                return new BadRequestObjectResult(
                    new ValidationProblemDetails(context.ModelState));
            }
        };
    });

Si vous ajoutez des contrôleurs au projet principal de la Blazor Web App pour la première fois, mappez les points de terminaison du contrôleur lorsque vous placez le code précédent qui inscrit des services pour les contrôleurs. L’exemple suivant utilise les routes de contrôleur par défaut :

app.MapDefaultControllerRoute();

Pour plus d’informations sur le routage des contrôleurs et les réponses d’erreur d’échec de validation, consultez les ressources suivantes :

• Routage vers des actions de contrôleur dans ASP.NET Core
• Gérer les erreurs dans les API ASP.NET Core

Dans le projet .Client, ajoutez le composant CustomValidation indiqué dans la section Composants Validator. Mettez à jour l’espace de noms pour qu’il corresponde à l’application (par exemple, namespace BlazorSample.Client).

Dans le projet .Client, le formulaire Starfleet Starship Database est mis à jour pour afficher les erreurs de validation du serveur à l’aide du composant CustomValidation. Lorsque l’API serveur renvoie des messages de validation, ceux-ci sont ajoutés à CustomValidation du composant ValidationMessageStore. Les erreurs sont disponibles dans EditContext du formulaire pour être affichées par le résumé de validation du formulaire.

Dans le composant suivant, mettez à jour l’espace de noms du projet partagé (@using BlazorSample.Shared) pour qu’il corresponde à l’espace de noms du projet partagé. Notez que le formulaire nécessite une autorisation, l’utilisateur doit donc être connecté à l’application pour accéder au formulaire.

Ajoutez l’espace de noms Microsoft.AspNetCore.Mvc en haut du fichier Program dans l’application Server :

using Microsoft.AspNetCore.Mvc;

Dans le fichier Program, recherchez la méthode d’extension AddControllersWithViews et ajoutez l’appel suivant à ConfigureApiBehaviorOptions :

builder.Services.AddControllersWithViews()
    .ConfigureApiBehaviorOptions(options =>
    {
        options.InvalidModelStateResponseFactory = context =>
        {
            if (context.HttpContext.Request.Path == "/StarshipValidation")
            {
                return new BadRequestObjectResult(context.ModelState);
            }
            else
            {
                return new BadRequestObjectResult(
                    new ValidationProblemDetails(context.ModelState));
            }
        };
    });

Dans le projet Client, ajoutez le composant CustomValidation indiqué dans la section Composants Validator. Mettez à jour l’espace de noms pour qu’il corresponde à l’application (par exemple, namespace BlazorSample.Client).

Dans le projet Client, le formulaire Starfleet Starship Database est mis à jour pour afficher les erreurs de validation du serveur à l’aide du composant CustomValidation. Lorsque l’API serveur renvoie des messages de validation, ceux-ci sont ajoutés à CustomValidation du composant ValidationMessageStore. Les erreurs sont disponibles dans EditContext du formulaire pour être affichées par le résumé de validation du formulaire.

Dans le composant suivant, mettez à jour l’espace de noms du projet Shared (@using BlazorSample.Shared) pour qu’il corresponde à l’espace de noms du projet partagé. Notez que le formulaire nécessite une autorisation, l’utilisateur doit donc être connecté à l’application pour accéder au formulaire.

@page "/starship-10"
@rendermode InteractiveWebAssembly
@using System.Net
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using BlazorSample.Shared
@attribute [Authorize]
@inject HttpClient Http
@inject ILogger<Starship10> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm FormName="Starship10" Model="Model" OnValidSubmit="Submit">
    <DataAnnotationsValidator />
    <CustomValidation @ref="customValidation" />
    <ValidationSummary />
    <div>
        <label>
            Identifier: 
            <InputText @bind-Value="Model!.Id" disabled="@disabled" />
        </label>
    </div>
    <div>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="Model!.Description" 
                disabled="@disabled" />
        </label>
    </div>
    <div>
        <label>
            Primary Classification:
            <InputSelect @bind-Value="Model!.Classification" disabled="@disabled">
                <option value="">Select classification ...</option>
                <option value="Exploration">Exploration</option>
                <option value="Diplomacy">Diplomacy</option>
                <option value="Defense">Defense</option>
            </InputSelect>
        </label>
    </div>
    <div>
        <label>
            Maximum Accommodation:
            <InputNumber @bind-Value="Model!.MaximumAccommodation" 
                disabled="@disabled" />
        </label>
    </div>
    <div>
        <label>
            Engineering Approval:
            <InputCheckbox @bind-Value="Model!.IsValidatedDesign" 
                disabled="@disabled" />
        </label>
    </div>
    <div>
        <label>
            Production Date:
            <InputDate @bind-Value="Model!.ProductionDate" disabled="@disabled" />
        </label>
    </div>
    <div>
        <button type="submit" disabled="@disabled">Submit</button>
    </div>
    <div style="@messageStyles">
        @message
    </div>
</EditForm>

@code {
    private CustomValidation? customValidation;
    private bool disabled;
    private string? message;
    private string messageStyles = "visibility:hidden";

    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized() => 
        Model ??= new() { ProductionDate = DateTime.UtcNow };

    private async Task Submit(EditContext editContext)
    {
        customValidation?.ClearErrors();

        try
        {
            using var response = await Http.PostAsJsonAsync<Starship>(
                "StarshipValidation", (Starship)editContext.Model);

            var errors = await response.Content
                .ReadFromJsonAsync<Dictionary<string, List<string>>>() ?? 
                new Dictionary<string, List<string>>();

            if (response.StatusCode == HttpStatusCode.BadRequest && 
                errors.Any())
            {
                customValidation?.DisplayErrors(errors);
            }
            else if (!response.IsSuccessStatusCode)
            {
                throw new HttpRequestException(
                    $"Validation failed. Status Code: {response.StatusCode}");
            }
            else
            {
                disabled = true;
                messageStyles = "color:green";
                message = "The form has been processed.";
            }
        }
        catch (AccessTokenNotAvailableException ex)
        {
            ex.Redirect();
        }
        catch (Exception ex)
        {
            Logger.LogError("Form processing error: {Message}", ex.Message);
            disabled = true;
            messageStyles = "color:red";
            message = "There was an error processing the form.";
        }
    }
}

Le projet .Client d'un Blazor Web App doit également enregistrer un HttpClient pour les requêtes HTTP POST vers un contrôleur d'API Web de backend. Vérifiez ou ajoutez les éléments suivants au fichier .Client du projet Program :

builder.Services.AddScoped(sp => 
    new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

L’exemple précédent définit l’adresse de base avec builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress), qui obtient l’adresse de base de l’application et est généralement dérivée de la valeur <base> de la balise href dans la page hôte.

@page "/starship-10"
@using System.Net
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using BlazorSample.Shared
@attribute [Authorize]
@inject HttpClient Http
@inject ILogger<Starship10> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="Model" OnValidSubmit="Submit">
    <DataAnnotationsValidator />
    <CustomValidation @ref="customValidation" />
    <ValidationSummary />
    <div>
        <label>
            Identifier: 
            <InputText @bind-Value="Model!.Id" disabled="@disabled" />
        </label>
    </div>
    <div>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="Model!.Description" 
                disabled="@disabled" />
        </label>
    </div>
    <div>
        <label>
            Primary Classification:
            <InputSelect @bind-Value="Model!.Classification" disabled="@disabled">
                <option value="">Select classification ...</option>
                <option value="Exploration">Exploration</option>
                <option value="Diplomacy">Diplomacy</option>
                <option value="Defense">Defense</option>
            </InputSelect>
        </label>
    </div>
    <div>
        <label>
            Maximum Accommodation:
            <InputNumber @bind-Value="Model!.MaximumAccommodation" 
                disabled="@disabled" />
        </label>
    </div>
    <div>
        <label>
            Engineering Approval:
            <InputCheckbox @bind-Value="Model!.IsValidatedDesign" 
                disabled="@disabled" />
        </label>
    </div>
    <div>
        <label>
            Production Date:
            <InputDate @bind-Value="Model!.ProductionDate" disabled="@disabled" />
        </label>
    </div>
    <div>
        <button type="submit" disabled="@disabled">Submit</button>
    </div>
    <div style="@messageStyles">
        @message
    </div>
</EditForm>

@code {
    private CustomValidation? customValidation;
    private bool disabled;
    private string? message;
    private string messageStyles = "visibility:hidden";

    public Starship? Model { get; set; }

    protected override void OnInitialized() => 
        Model ??= new() { ProductionDate = DateTime.UtcNow };

    private async Task Submit(EditContext editContext)
    {
        customValidation?.ClearErrors();

        try
        {
            using var response = await Http.PostAsJsonAsync<Starship>(
                "StarshipValidation", (Starship)editContext.Model);

            var errors = await response.Content
                .ReadFromJsonAsync<Dictionary<string, List<string>>>() ?? 
                new Dictionary<string, List<string>>();

            if (response.StatusCode == HttpStatusCode.BadRequest && 
                errors.Any())
            {
                customValidation?.DisplayErrors(errors);
            }
            else if (!response.IsSuccessStatusCode)
            {
                throw new HttpRequestException(
                    $"Validation failed. Status Code: {response.StatusCode}");
            }
            else
            {
                disabled = true;
                messageStyles = "color:green";
                message = "The form has been processed.";
            }
        }
        catch (AccessTokenNotAvailableException ex)
        {
            ex.Redirect();
        }
        catch (Exception ex)
        {
            Logger.LogError("Form processing error: {Message}", ex.Message);
            disabled = true;
            messageStyles = "color:red";
            message = "There was an error processing the form.";
        }
    }
}

@page "/starship-11"
@using System.ComponentModel.DataAnnotations
@inject ILogger<Starship11> Logger

<EditForm Model="Model" OnValidSubmit="Submit" FormName="Starship11">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <label>
            Identifier: 
            <CustomInputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

<div>
    CurrentValue: @Model?.Id
</div>

@code {
    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    private void Submit() => Logger.LogInformation("Submit: Processing form");

    public class Starship
    {
        [Required]
        [StringLength(10, ErrorMessage = "Id is too long.")]
        public string? Id { get; set; }
    }
}

@page "/starship-11"
@using System.ComponentModel.DataAnnotations
@inject ILogger<Starship11> Logger

<EditForm Model="Model" OnValidSubmit="Submit" FormName="Starship11">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <label>
            Identifier: 
            <CustomInputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

<div>
    CurrentValue: @Model?.Id
</div>

@code {
    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    private void Submit() => Logger.LogInformation("Submit: Processing form");

    public class Starship
    {
        [Required]
        [StringLength(10, ErrorMessage = "Id is too long.")]
        public string? Id { get; set; }
    }
}

@page "/starship-11"
@using System.ComponentModel.DataAnnotations
@inject ILogger<Starship11> Logger

<EditForm Model="Model" OnValidSubmit="Submit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <CustomInputText @bind-Value="Model!.Id" />
    <button type="submit">Submit</button>
</EditForm>

<div>
    CurrentValue: @Model?.Id
</div>

@code {
    public Starship? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    private void Submit()
    {
        Logger.LogInformation("Submit called: Processing the form");
    }

    public class Starship
    {
        [Required]
        [StringLength(10, ErrorMessage = "Id is too long.")]
        public string? Id { get; set; }
    }
}

Déterminer si un champ de formulaire est valide

Utilisez EditContext.IsValid pour déterminer si un champ est valide sans obtenir de messages de validation.

❌ Pris en charge, mais non recommandé :

var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

✔️ Recommandé :

var isValid = editContext.IsValid(fieldIdentifier);

using System;
using System.ComponentModel.DataAnnotations;

public class CustomValidator : ValidationAttribute
{
    protected override ValidationResult IsValid(object? value, 
        ValidationContext validationContext)
    {
        ...

        return new ValidationResult("Validation message to user.",
            [ validationContext.MemberName! ]);
    }
}

using System;
using System.ComponentModel.DataAnnotations;

public class CustomValidator : ValidationAttribute
{
    protected override ValidationResult IsValid(object? value, 
        ValidationContext validationContext)
    {
        ...

        return new ValidationResult("Validation message to user.",
            new[] { validationContext.MemberName! });
    }
}

using System;
using System.ComponentModel.DataAnnotations;

public class CustomValidator : ValidationAttribute
{
    protected override ValidationResult IsValid(object value, 
        ValidationContext validationContext)
    {
        ...

        return new ValidationResult("Validation message to user.",
            new[] { validationContext.MemberName });
    }
}

@page "/starship-12"
@inject SaladChef SaladChef

<EditForm Model="this" autocomplete="off" FormName="Starship12">
    <DataAnnotationsValidator />
    <div>
        <label>
            Salad topper (@saladToppers):
            <input @bind="SaladIngredient" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
    <ul>
        @foreach (var message in context.GetValidationMessages())
        {
            <li class="validation-message">@message</li>
        }
    </ul>
</EditForm>

@code {
    private string? saladToppers;

    [SaladChefValidator]
    public string? SaladIngredient { get; set; }

    protected override void OnInitialized() =>
        saladToppers ??= string.Join(", ", SaladChef.SaladToppers);
}

@page "/starship-12"
@inject SaladChef SaladChef

<EditForm Model="this" autocomplete="off" FormName="Starship12">
    <DataAnnotationsValidator />
    <div>
        <label>
            Salad topper (@saladToppers):
            <input @bind="SaladIngredient" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
    <ul>
        @foreach (var message in context.GetValidationMessages())
        {
            <li class="validation-message">@message</li>
        }
    </ul>
</EditForm>

@code {
    private string? saladToppers;

    [SaladChefValidator]
    public string? SaladIngredient { get; set; }

    protected override void OnInitialized() =>
        saladToppers ??= string.Join(", ", SaladChef.SaladToppers);
}

@page "/starship-12"
@inject SaladChef SaladChef

<EditForm Model="this" autocomplete="off">
    <DataAnnotationsValidator />
    <p>
        <label>
            Salad topper (@saladToppers):
            <input @bind="SaladIngredient" />
        </label>
    </p>
    <button type="submit">Submit</button>
    <ul>
        @foreach (var message in context.GetValidationMessages())
        {
            <li class="validation-message">@message</li>
        }
    </ul>
</EditForm>

@code {
    private string? saladToppers;

    [SaladChefValidator]
    public string? SaladIngredient { get; set; }

    protected override void OnInitialized() => 
        saladToppers ??= string.Join(", ", SaladChef.SaladToppers);
}

Attributs de classe CSS de validation personnalisée

Les attributs de classe CSS de validation personnalisés sont utiles lors de l’intégration avec des frameworks CSS, tels que Bootstrap.

Pour spécifier des attributs de classe CSS de validation personnalisés, commencez par fournir des styles CSS pour la validation personnalisée. Dans l’exemple suivant, les styles valid (validField) et invalid (invalidField) sont spécifiés.

Ajoutez les classes CSS suivantes à la feuille de style de l’application :

.validField {
    border-color: lawngreen;
}

.invalidField {
    background-color: tomato;
}

Créez une classe dérivée de FieldCssClassProvider qui vérifie les messages de validation des champs et applique le style valid ou invalid approprié.

CustomFieldClassProvider.cs :

using Microsoft.AspNetCore.Components.Forms;

public class CustomFieldClassProvider : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext, 
        in FieldIdentifier fieldIdentifier)
    {
        var isValid = editContext.IsValid(fieldIdentifier);

        return isValid ? "validField" : "invalidField";
    }
}

using Microsoft.AspNetCore.Components.Forms;

public class CustomFieldClassProvider : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext, 
        in FieldIdentifier fieldIdentifier)
    {
        var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

        return isValid ? "validField" : "invalidField";
    }
}

Définissez la classe CustomFieldClassProvider comme fournisseur de classe CSS de champ sur l’instance EditContext du formulaire avec SetFieldCssClassProvider.

Starship13.razor :

@page "/starship-13"
@using System.ComponentModel.DataAnnotations
@inject ILogger<Starship13> Logger

<EditForm EditContext="editContext" OnValidSubmit="Submit" FormName="Starship13">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <label>
            Identifier: 
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

@code {
    private EditContext? editContext;

    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized()
    {
        Model ??= new();
        editContext = new(Model);
        editContext.SetFieldCssClassProvider(new CustomFieldClassProvider());
    }

    private void Submit() => Logger.LogInformation("Submit: Processing form");

    public class Starship
    {
        [Required]
        [StringLength(10, ErrorMessage = "Id is too long.")]
        public string? Id { get; set; }
    }
}

@page "/starship-13"
@using System.ComponentModel.DataAnnotations
@inject ILogger<Starship13> Logger

<EditForm EditContext="editContext" OnValidSubmit="Submit" FormName="Starship13">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <label>
            Identifier: 
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</EditForm>

@code {
    private EditContext? editContext;

    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized()
    {
        Model ??= new();
        editContext = new(Model);
        editContext.SetFieldCssClassProvider(new CustomFieldClassProvider());
    }

    private void Submit() => Logger.LogInformation("Submit: Processing form");

    public class Starship
    {
        [Required]
        [StringLength(10, ErrorMessage = "Id is too long.")]
        public string? Id { get; set; }
    }
}

@page "/starship-13"
@using System.ComponentModel.DataAnnotations
@inject ILogger<Starship13> Logger

<EditForm EditContext="editContext" OnValidSubmit="Submit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <InputText @bind-Value="Model!.Id" />
    <button type="submit">Submit</button>
</EditForm>

@code {
    private EditContext? editContext;

    public Starship? Model { get; set; }

    protected override void OnInitialized()
    {
        Model ??= new();
        editContext = new(Model);
        editContext.SetFieldCssClassProvider(new CustomFieldClassProvider());
    }

    private void Submit()
    {
        Logger.LogInformation("Submit called: Processing the form");
    }

    public class Starship
    {
        [Required]
        [StringLength(10, ErrorMessage = "Id is too long.")]
        public string? Id { get; set; }
    }
}

L’exemple précédent vérifie la validité de tous les champs du formulaire et applique un style à chaque champ. Si le formulaire ne doit appliquer des styles personnalisés qu’à un sous-ensemble de champs, faites en sorte que CustomFieldClassProvider applique les styles de manière conditionnelle. L’exemple CustomFieldClassProvider2 suivant applique uniquement un style au champ Name. Pour tous les champs dont le nom ne correspond pas à Name, string.Empty est renvoyé et aucun style n’est appliqué. À l’aide de la réflexion, le champ est mis en correspondance avec la propriété ou le nom de champ du membre du modèle, et non avec un id attribué à l’entité HTML.

CustomFieldClassProvider2.cs :

using Microsoft.AspNetCore.Components.Forms;

public class CustomFieldClassProvider2 : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext,
        in FieldIdentifier fieldIdentifier)
    {
        if (fieldIdentifier.FieldName == "Name")
        {
            var isValid = editContext.IsValid(fieldIdentifier);

            return isValid ? "validField" : "invalidField";
        }

        return string.Empty;
    }
}

using Microsoft.AspNetCore.Components.Forms;

public class CustomFieldClassProvider2 : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext,
        in FieldIdentifier fieldIdentifier)
    {
        if (fieldIdentifier.FieldName == "Name")
        {
            var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

            return isValid ? "validField" : "invalidField";
        }

        return string.Empty;
    }
}

Ajoutez une propriété supplémentaire à Model, par exemple :

[StringLength(10, ErrorMessage = "Description is too long.")]
public string? Description { get; set; } 

Ajoutez le Description au formulaire du composant CustomValidationForm :

<InputText @bind-Value="Model!.Description" />

Mettez à jour l’instance EditContext dans la méthode OnInitialized du composant afin d’utiliser le nouveau fournisseur de classes CSS de champ :

editContext?.SetFieldCssClassProvider(new CustomFieldClassProvider2());

Étant donné qu’aucune classe de validation CSS n’est appliquée au champ Description, celui-ci n’est pas stylisé. Cependant, la validation du champ s’exécute normalement. Si plus de 10 caractères sont fournis, le résumé de validation indique l’erreur :

Description trop longue.

Dans l’exemple suivant :

• Le style CSS personnalisé est appliqué au champ Name.

• Tous les autres champs appliquent une logique similaire à la logique par défaut de Blazor et utilisent les styles de validation CSS de champ par défaut de Blazor , modified avec valid ou invalid. Notez que pour les styles par défaut, vous n’avez pas besoin de les ajouter à la feuille de style de l’application si celle-ci est basée sur un modèle de projet Blazor. Pour les applications qui ne sont pas basées sur un modèle de projet Blazor, les styles par défaut peuvent être ajoutés à la feuille de style de l’application :

  .valid.modified:not([type=checkbox]) {
      outline: 1px solid #26b050;
  }
  
  .invalid {
      outline: 1px solid red;
  }
  

CustomFieldClassProvider3.cs :

using Microsoft.AspNetCore.Components.Forms;

public class CustomFieldClassProvider3 : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext,
        in FieldIdentifier fieldIdentifier)
    {
        var isValid = editContext.IsValid(fieldIdentifier);

        if (fieldIdentifier.FieldName == "Name")
        {
            return isValid ? "validField" : "invalidField";
        }
        else
        {
            if (editContext.IsModified(fieldIdentifier))
            {
                return isValid ? "modified valid" : "modified invalid";
            }
            else
            {
                return isValid ? "valid" : "invalid";
            }
        }
    }
}

using Microsoft.AspNetCore.Components.Forms;

public class CustomFieldClassProvider3 : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext,
        in FieldIdentifier fieldIdentifier)
    {
        var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

        if (fieldIdentifier.FieldName == "Name")
        {
            return isValid ? "validField" : "invalidField";
        }
        else
        {
            if (editContext.IsModified(fieldIdentifier))
            {
                return isValid ? "modified valid" : "modified invalid";
            }
            else
            {
                return isValid ? "valid" : "invalid";
            }
        }
    }
}

Mettez à jour l’instance EditContext dans la méthode OnInitialized du composant afin d’utiliser le fournisseur de classes CSS de champ précédent :

editContext.SetFieldCssClassProvider(new CustomFieldClassProvider3());

Utilisation de CustomFieldClassProvider3:

• Le champ Name utilise les styles CSS de validation personnalisés de l’application.
• Le champ Description utilise une logique similaire à celle de Blazor et les styles de validation CSS de champ par défaut de Blazor.

Blazorpackage de validation des annotations de donnée

Le Microsoft.AspNetCore.Components.DataAnnotations.Validation package remplit les lacunes de l’expérience de validation à l’aide du DataAnnotationsValidator composant. Le package est actuellement en phase expérimentale.

Attribut [CompareProperty]

CompareAttribute ne fonctionne pas correctement avec le composant DataAnnotationsValidator, car DataAnnotationsValidator n’associe pas le résultat de la validation à un membre spécifique. Cela peut entraîner un comportement incohérent entre la validation au niveau du champ et la validation de l’ensemble du modèle lors d’une soumission. Le Microsoft.AspNetCore.Components.DataAnnotations.Validation package expérimental introduit un attribut de validation supplémentaire, ComparePropertyAttributequi fonctionne autour de ces limitations. Dans une application Blazor, [CompareProperty] remplace directement l’attribut [Compare].

Objets imbriqués et types de collection

BlazorLa validation de formulaire inclut la prise en charge de la validation des propriétés des objets imbriqués et des éléments de collection avec DataAnnotationsValidator intégré.

Pour créer un formulaire validé, utilisez un DataAnnotationsValidator composant à l’intérieur d’un EditForm composant.

Pour choisir les objets imbriqués et la fonctionnalité de validation des types de collection :

1. Appelez la méthode d’extension AddValidation dans le Program fichier dans lequel les services sont inscrits.
2. Déclarez les types de modèle de formulaire dans un fichier de classe C#, et non dans un Razor composant (.razor).
3. Annotez le type de modèle de formulaire racine avec l’attribut[ValidatableType].

L’exemple suivant illustre les commandes client avec la validation de formulaire de collecte imbriquée.

Dans Program.cs, appelez AddValidation sur la collection de services :

builder.Services.AddValidation();

Dans la classe suivante Order , l’attribut [ValidatableType] est requis sur le type de modèle de niveau supérieur. Les autres types sont découverts automatiquement.

Order.cs :

using System.ComponentModel.DataAnnotations;

[ValidatableType]
public class Order
{
    public Customer Customer { get; set; } = new();
    public List<OrderItem> OrderItems { get; set; } = [];
}

public class Customer
{
    [Required(ErrorMessage = "Name is required.")]
    public string? FullName { get; set; }

    [Required(ErrorMessage = "Email is required.")]
    public string? Email { get; set; }

    public ShippingAddress ShippingAddress { get; set; } = new();
}

OrderItem.cs :

public class OrderItem
{
    [Required(ErrorMessage = "Id is required.")]
    public int Id { get; set; }

    [Required(ErrorMessage = "Description is required.")]
    public string? Description { get; set; }

    [Required(ErrorMessage = "Price is required.")]
    public decimal Price { get; set; }
}

ShippingAddress.cs :

public class ShippingAddress
{
    [Required(ErrorMessage = "Street is required.")]
    public string? Street { get; set; }

    [Required(ErrorMessage = "City is required.")]
    public string? City { get; set; }

    [Required(ErrorMessage = "State/Province is required.")]
    public string? StateProvince { get; set; }

    [Required(ErrorMessage = "PostalCode is required.")]
    public string? PostalCode { get; set; }
}

Dans le composant suivant OrderPage , le DataAnnotationsValidator composant est présent dans le EditForm composant.

OrderPage.razor :

<EditForm Model="Model">
    <DataAnnotationsValidator />

    <h3>Customer Details</h3>
    <div class="mb-3">
        <label>
            Full Name
            <InputText @bind-Value="Model!.Customer.FullName" />
        </label>
        <ValidationMessage For="@(() => Model!.Customer.FullName)" />
    </div>

    // ... form continues ...
</EditForm>

@code {
    public Order? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();
}

L’exigence de déclarer les types de modèle en dehors des composants (Razorfichiers) est due au fait que la fonctionnalité de validation de .razor collection imbriquée et le Razor compilateur lui-même utilisent un générateur source. Actuellement, la sortie d’un générateur source ne peut pas être utilisée comme entrée pour un autre générateur source.

Pour obtenir des conseils sur l’utilisation de modèles de validation à partir d’un autre assembly, consultez la section Utiliser des modèles de validation à partir d’une autre section d’assembly .

Objets imbriqués, types de collection et types complexes

Blazor fournit une prise en charge de la validation des entrées de formulaire à l’aide d’annotations de données avec le DataAnnotationsValidator intégré Toutefois, le DataAnnotationsValidator .NET 9 ou version antérieure valide uniquement les propriétés de niveau supérieur du modèle lié au formulaire qui ne sont pas des propriétés de type collection ou complexe.

Pour valider l’ensemble du graphique objet du modèle lié, y compris les propriétés de type collection et complexe, utilisez le ObjectGraphDataAnnotationsValidator package expérimentalMicrosoft.AspNetCore.Components.DataAnnotations.Validation dans .NET 9 ou version antérieure :

<EditForm ...>
    <ObjectGraphDataAnnotationsValidator />
    ...
</EditForm>

Annoter les propriétés du modèle avec [ValidateComplexType]. Dans les classes de modèle suivantes, la classe ShipDescription contient des annotations de données supplémentaires à valider lorsque le modèle est lié au formulaire :

Starship.cs :

using System;
using System.ComponentModel.DataAnnotations;

public class Starship
{
    ...

    [ValidateComplexType]
    public ShipDescription ShipDescription { get; set; } = new();

    ...
}

ShipDescription.cs :

using System;
using System.ComponentModel.DataAnnotations;

public class ShipDescription
{
    [Required]
    [StringLength(40, ErrorMessage = "Description too long (40 char).")]
    public string? ShortDescription { get; set; }

    [Required]
    [StringLength(240, ErrorMessage = "Description too long (240 char).")]
    public string? LongDescription { get; set; }
}

Utiliser des modèles de validation à partir d’un autre assembly

Pour la validation de modèle définie dans un autre assembly, tel qu'un composant ou un projet .Client de Blazor Web App:

• Si la bibliothèque est une bibliothèque de classe simple (elle n'est pas basée sur les SDKs Microsoft.NET.Sdk.Web ou Microsoft.NET.Sdk.Razor), ajoutez une référence de package à la bibliothèque pour le Microsoft.Extensions.Validation package NuGet. Des étapes supplémentaires sont requises pour les bibliothèques de classes simples, qui sont décrites plus loin dans cette section.
• Créez une méthode dans la bibliothèque ou .Client projet qui reçoit une instance IServiceCollection en tant qu’argument et appelle AddValidation dessus.
• Dans l’application, appelez la méthode et AddValidation.

L’approche précédente entraîne la validation des types des deux assemblys.

Dans l’exemple suivant, la AddValidationForTypesInClient méthode est créée pour le projet .Client d'un Blazor Web App pour validation à l’aide de types définis dans le projet .Client.

ServiceCollectionExtensions.cs (dans le .Client projet) :

namespace BlazorSample.Client.Extensions;

public static class ServiceCollectionExtensions
{
    public static IServiceCollection AddValidationForTypesInClient(
        this IServiceCollection collection)
    {
        return collection.AddValidation();
    }
}

Dans le fichier du projet Program serveur, ajoutez l'espace de noms et appelez la méthode d’extension de la collection de services du projet .Client (AddValidationForTypesInClient) et AddValidation:

using BlazorSample.Client.Extensions;

...

builder.Services.AddValidationForTypesInClient();
builder.Services.AddValidation();

Les nouveaux attributs du Microsoft.Extensions.Validation package (ValidatableTypeAttribute et SkipValidationAttribute) sont publiés comme expérimentaux dans .NET 10. Le package est destiné à fournir une nouvelle infrastructure partagée pour les fonctionnalités de validation entre les frameworks, et les types expérimentaux de publication offrent une plus grande flexibilité pour la conception finale de l’API publique pour une meilleure prise en charge des infrastructures consommatrices.

Dans Blazor les applications, les types sont rendus disponibles via un attribut incorporé généré. Si un projet d’application web qui utilise le Microsoft.NET.Sdk.Web Kit de développement logiciel (<Project Sdk="Microsoft.NET.Sdk.Web">SDK) ou une bibliothèque RCL qui utilise le Microsoft.NET.Sdk.Razor SDK () contient <Project Sdk="Microsoft.NET.Sdk.Razor"> des composants (Razor.razor), l’infrastructure génère automatiquement un attribut interne à l’intérieur du projet (Microsoft.Extensions.Validation.Embedded.ValidatableType, Microsoft.Extensions.Validation.Embedded.SkipValidation). Ces types sont interchangeables avec les attributs réels et ne sont pas marqués comme expérimentaux. Dans la majorité des cas, les développeurs utilisent les [ValidatableType]/[SkipValidation] attributs sur leurs classes sans préoccupation sur leur source.

Toutefois, l’approche précédente n’est pas viable dans les bibliothèques de classes simples qui utilisent le Microsoft.NET.Sdk Kit de développement logiciel (<Project Sdk="Microsoft.NET.Sdk">SDK). L’utilisation des types dans une bibliothèque de classes simples entraîne un avertissement d’analyse du code :

ASP0029 : « Microsoft.Extensions.Validation.ValidateableTypeAttribute » est à des fins d’évaluation uniquement et peut être modifié ou supprimé dans les mises à jour ultérieures. Supprimez ce diagnostic pour continuer.

L’avertissement peut être supprimé à l’aide de l’une des approches suivantes :

• Propriété <NoWarn> dans le fichier projet :

  <PropertyGroup>
    <NoWarn>$(NoWarn);ASP0029</NoWarn>
  </PropertyGroup>
  

• Directivepragma dans laquelle l’attribut est utilisé :

  #pragma warning disable ASP0029
  [Microsoft.Extensions.Validation.ValidatableType]
  #pragma warning restore ASP0029
  

• Règle de fichier EditorConfig (.editorconfig) :

  dotnet_diagnostic.ASP0029.severity = none
  

Si la suppression de l’avertissement n’est pas acceptable, créez manuellement l’attribut incorporé dans la bibliothèque que les kits de développement logiciel (SDK) et Razor Web génèrent automatiquement.

ValidatableTypeAttribute.cs :

namespace Microsoft.Extensions.Validation.Embedded
{
    [AttributeUsage(AttributeTargets.Class)]
    internal sealed class ValidatableTypeAttribute : Attribute
    {
    }
}

Utilisez l’espace de noms exact (Microsoft.Extensions.Validation.Embedded) et le nom de classe (ValidatableTypeAttribute) pour que le générateur de source de validation détecte et utilise le type. Vous pouvez déclarer une instruction globale using pour l’espace de noms, soit avec une global using Microsoft.Extensions.Validation.Embedded; instruction, soit avec un <Using Include="Microsoft.Extensions.Validation.Embedded" /> élément dans le fichier projet de la bibliothèque.

Quelle que soit l’approche adoptée, marquez la présence de la solution de contournement pour une future mise à jour de votre code. Les mises à jour du framework pour faciliter l’adoption des types de validation dans les bibliothèques de classes simples sont prévues pour .NET 11 (novembre 2026).

@page "/starship-14"
@implements IDisposable
@inject ILogger<Starship14> Logger

<EditForm EditContext="editContext" OnValidSubmit="Submit" FormName="Starship14">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <label>
            Identifier:
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <button type="submit" disabled="@formInvalid">Submit</button>
    </div>
</EditForm>

@code {
    private bool formInvalid = false;
    private EditContext? editContext;

    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized()
    {
        Model ??=
            new()
                {
                    Id = "NCC-1701",
                    Classification = "Exploration",
                    MaximumAccommodation = 150,
                    IsValidatedDesign = true,
                    ProductionDate = new DateTime(2245, 4, 11)
                };
        editContext = new(Model);
        editContext.OnFieldChanged += HandleFieldChanged;
    }

    private void HandleFieldChanged(object? sender, FieldChangedEventArgs e)
    {
        if (editContext is not null)
        {
            formInvalid = !editContext.Validate();
            StateHasChanged();
        }
    }

    private void Submit() => Logger.LogInformation("Submit: Processing form");

    public void Dispose()
    {
        if (editContext is not null)
        {
            editContext.OnFieldChanged -= HandleFieldChanged;
        }
    }
}

@page "/starship-14"
@implements IDisposable
@inject ILogger<Starship14> Logger

<EditForm EditContext="editContext" OnValidSubmit="Submit" FormName="Starship14">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <label>
            Identifier:
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <button type="submit" disabled="@formInvalid">Submit</button>
    </div>
</EditForm>

@code {
    private bool formInvalid = false;
    private EditContext? editContext;

    [SupplyParameterFromForm]
    private Starship? Model { get; set; }

    protected override void OnInitialized()
    {
        Model ??=
            new()
                {
                    Id = "NCC-1701",
                    Classification = "Exploration",
                    MaximumAccommodation = 150,
                    IsValidatedDesign = true,
                    ProductionDate = new DateTime(2245, 4, 11)
                };
        editContext = new(Model);
        editContext.OnFieldChanged += HandleFieldChanged;
    }

    private void HandleFieldChanged(object? sender, FieldChangedEventArgs e)
    {
        if (editContext is not null)
        {
            formInvalid = !editContext.Validate();
            StateHasChanged();
        }
    }

    private void Submit() => Logger.LogInformation("Submit: Processing form");

    public void Dispose()
    {
        if (editContext is not null)
        {
            editContext.OnFieldChanged -= HandleFieldChanged;
        }
    }
}

@page "/starship-14"
@implements IDisposable
@inject ILogger<Starship14> Logger

<EditForm EditContext="editContext" OnValidSubmit="Submit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <label>
            Identifier: 
            <InputText @bind-Value="Model!.Id" />
        </label>
    </div>
    <div>
        <button type="submit" disabled="@formInvalid">Submit</button>
    </div>
</EditForm>

@code {
    private bool formInvalid = false;
    private EditContext? editContext;

    private Starship? Model { get; set; }

    protected override void OnInitialized()
    {
        Model ??=
            new()
            {
                Id = "NCC-1701",
                Classification = "Exploration",
                MaximumAccommodation = 150,
                IsValidatedDesign = true,
                ProductionDate = new DateTime(2245, 4, 11)
            };
        editContext = new(Model);
        editContext.OnFieldChanged += HandleFieldChanged;
    }

    private void HandleFieldChanged(object? sender, FieldChangedEventArgs e)
    {
        if (editContext is not null)
        {
            formInvalid = !editContext.Validate();
            StateHasChanged();
        }
    }

    private void Submit()
    {
        Logger.LogInformation("Submit called: Processing the form");
    }

    public void Dispose()
    {
        if (editContext is not null)
        {
            editContext.OnFieldChanged -= HandleFieldChanged;
        }
    }
}

DataAnnotationsValidator comportement de validation

Le DataAnnotationsValidator composant a le même ordre de validation et le comportement de court-circuitage que System.ComponentModel.DataAnnotations.Validator. Les règles suivantes sont appliquées lors de la validation d’une instance de type T:

1. Les propriétés membres de T sont validées, notamment la validation récursive des objets imbriqués.
2. Les attributs de niveau type de T sont validés.
3. La IValidatableObject.Validate méthode est exécutée, si T elle l’implémente.

Si l’une des étapes précédentes génère une erreur de validation, les étapes restantes sont ignorées.