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.

Scaricare il PDF

Il framework Web Form ASP.NET include un set di controlli server di convalida che gestiscono la convalida dell'input utente immesso in un modulo (RequiredFieldValidator, CompareValidator, RangeValidatore così via). Il framework Web Form 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 sul server che sul client usando la convalida javaScript non invadente. Il ValidationSummary controllo server viene utilizzato per visualizzare un riepilogo degli errori di convalida all'utente.

Blazor supporta la condivisione della logica di convalida tra il client e il server. ASP.NET fornisce delle implementazioni JavaScript già predefinite per molte convalide sui 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 nel server che nel client.

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

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

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

Per visualizzare un riepilogo degli errori di convalida, usare il ValidationSummary componente . Per visualizzare i messaggi di convalida per un campo di input specifico, usare il ValidationMessage componente , specificando un'espressione lambda per il For parametro 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 in base al Starship tipo di modello:

<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 a modello non sono stati salvati in alcun archivio dati, ad esempio un database. In un'app Blazor WebAssembly i dati devono essere inviati al server. Ad esempio, usando una richiesta HTTP POST. In un'app Blazor Server i dati sono già presenti nel server, ma devono essere salvati in modo permanente. La gestione dell'accesso ai dati nelle Blazor app è l'oggetto della sezione Gestione dei dati .

Risorse aggiuntive

Per altre informazioni sui moduli e la convalida nelle Blazor app, vedere la Blazor documentazione.

PrecedenteAvanti