Moduli e convalida

Suggerimento

Questo contenuto è un estratto dell'eBook, Blazor per gli sviluppatori di Web Forms ASP.NET per Azure, disponibile in .NET Docs o come PDF scaricabile gratuitamente che può essere letto offline.

Scarica PDF

Il framework Web Forms ASP.NET include un insieme di controlli server di convalida che gestiscono la convalida dell'input utente immesso in un modulo (RequiredFieldValidator, CompareValidator, RangeValidator e così via). Il framework Web Forms ASP.NET supporta anche l'associazione di modelli e la convalida del modello in base alle annotazioni dei dati ([Required], [StringLength], [Range] e così via). La logica di convalida può essere applicata sia al server che al client usando la convalida basata su JavaScript non invadente. Il controllo server ValidationSummary viene utilizzato per mostrare all’utente un riepilogo degli errori di convalida.

Blazor supporta la condivisione della logica di convalida tra il client e il server. ASP.NET fornisce implementazioni JavaScript predefinite di molte convalide server comuni. In molti casi, lo sviluppatore deve comunque scrivere JavaScript per implementare completamente la logica di convalida specifica dell'app. Gli stessi tipi di modello, annotazioni di dati e logica di convalida possono essere usati sia sul server che sul client.

Blazor fornisce un set di componenti di input. I componenti di input gestiscono i dati del campo di binding a un modello e convalidano l'input dell'utente quando il modulo viene inviato.

Componente di input	Elemento HTML sottoposto a rendering
InputCheckbox	<input type="checkbox">
InputDate	<input type="date">
InputNumber	<input type="number">
InputSelect	<select>
InputText	<input>
InputTextArea	<textarea>

Il componente EditForm esegue il wrapping di questi componenti di input e orchestra il processo di convalida tramite un EditContext. Quando si crea un EditForm, si dovrà specificare l'istanza del modello da associare all'uso del parametro Model. La convalida viene in genere eseguita usando le annotazioni dei dati ed è estendibile. Per abilitare la convalida basata sull'annotazione dei dati, aggiungi il componente DataAnnotationsValidator come elemento figlio di EditForm. Il componente EditForm fornisce un evento pratico per la gestione di invii validi (OnValidSubmit) e non validi (OnInvalidSubmit). Esiste anche un evento più generico OnSubmit che ti consente di attivare e gestire manualmente la convalida.

Per visualizzare un riepilogo degli errori di convalida, usa il componente ValidationSummary. Per visualizzare i messaggi di convalida per un campo di input specifico, usa il componente ValidationMessage, specificando un'espressione lambda per il parametro For che punta al membro del modello appropriato.

Il tipo di modello seguente definisce diverse regole di convalida usando le annotazioni dei dati:

using System;
using System.ComponentModel.DataAnnotations;

public class Starship
{
    [Required]
    [StringLength(16,
        ErrorMessage = "Identifier too long (16 character limit).")]
    public string Identifier { get; set; }

    public string Description { get; set; }

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

    [Range(1, 100000,
        ErrorMessage = "Accommodation invalid (1-100000).")]
    public int MaximumAccommodation { get; set; }

    [Required]
    [Range(typeof(bool), "true", "true",
        ErrorMessage = "This form disallows unapproved ships.")]
    public bool IsValidatedDesign { get; set; }

    [Required]
    public DateTime ProductionDate { get; set; }
}

Il componente seguente illustra la creazione di un modulo in Blazor sulla base del tipo di modello Starship:

<h1>New Ship Entry Form</h1>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label for="identifier">Identifier: </label>
        <InputText id="identifier" @bind-Value="starship.Identifier" />
        <ValidationMessage For="() => starship.Identifier" />
    </p>
    <p>
        <label for="description">Description (optional): </label>
        <InputTextArea id="description" @bind-Value="starship.Description" />
    </p>
    <p>
        <label for="classification">Primary Classification: </label>
        <InputSelect id="classification" @bind-Value="starship.Classification">
            <option value="">Select classification ...</option>
            <option value="Exploration">Exploration</option>
            <option value="Diplomacy">Diplomacy</option>
            <option value="Defense">Defense</option>
        </InputSelect>
        <ValidationMessage For="() => starship.Classification" />
    </p>
    <p>
        <label for="accommodation">Maximum Accommodation: </label>
        <InputNumber id="accommodation" @bind-Value="starship.MaximumAccommodation" />
        <ValidationMessage For="() => starship.MaximumAccommodation" />
    </p>
    <p>
        <label for="valid">Engineering Approval: </label>
        <InputCheckbox id="valid" @bind-Value="starship.IsValidatedDesign" />
        <ValidationMessage For="() => starship.IsValidatedDesign" />
    </p>
    <p>
        <label for="productionDate">Production Date: </label>
        <InputDate id="productionDate" @bind-Value="starship.ProductionDate" />
        <ValidationMessage For="() => starship.ProductionDate" />
    </p>

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

@code {
    private Starship starship = new Starship();

    private void HandleValidSubmit()
    {
        // Save the data
    }
}

Dopo l'invio del modulo, i dati associati al modello non sono salvati in alcun archivio dati, come un database. In un'app Blazor WebAssembly i dati devono essere inviati al server. Ad esempio, usando una richiesta HTTP POST. In un'app server Blazor i dati sono già presenti sul server, ma devono essere salvati in modo permanente. La gestione dell'accesso ai dati nelle app Blazor è l'oggetto della sezione Gestione dei dati.

Risorse aggiuntive

Per altre informazioni su moduli e convalida nelle app Blazor, vedi la documentazione Blazor.

PrecedenteSuccessivo