Formularze i walidacja

Napiwek

Ta zawartość jest fragmentem książki eBook Blazor dla deweloperów formularzy internetowych platformy ASP NET dla platformy Azure, dostępnym na platformie .NET Docs lub jako bezpłatny plik PDF do pobrania, który można odczytać w trybie offline.

Pobierz plik PDF

Struktura ASP.NET Web Forms zawiera zestaw kontrolek serwera sprawdzania poprawności, które obsługują weryfikowanie danych wejściowych użytkownika wprowadzonych w formularzu (RequiredFieldValidator, CompareValidator, RangeValidatoritd.). Platforma ASP.NET Web Forms obsługuje również powiązanie modelu i walidację modelu na podstawie adnotacji danych ([Required], [StringLength], [Range]itd.). Logikę walidacji można wymusić zarówno na serwerze, jak i na kliencie przy użyciu nietrudnej weryfikacji opartej na języku JavaScript. Kontrolka ValidationSummary serwera służy do wyświetlania podsumowania błędów walidacji dla użytkownika.

Blazor obsługuje udostępnianie logiki walidacji między klientem a serwerem. ASP.NET zapewnia wstępnie utworzone implementacje języka JavaScript wielu typowych weryfikacji serwera. W wielu przypadkach deweloper nadal musi napisać kod JavaScript, aby w pełni zaimplementować logikę walidacji specyficznej dla aplikacji. Te same typy modeli, adnotacje danych i logika walidacji mogą być używane zarówno na serwerze, jak i kliencie.

Blazor udostępnia zestaw składników wejściowych. Składniki wejściowe obsługują dane pola powiązania z modelem i weryfikowanie danych wejściowych użytkownika podczas przesyłania formularza.

Składnik wejściowy	Renderowany element HTML
InputCheckbox	<input type="checkbox">
InputDate	<input type="date">
InputNumber	<input type="number">
InputSelect	<select>
InputText	<input>
InputTextArea	<textarea>

Składnik EditForm opakowuje te składniki wejściowe i organizuje proces weryfikacji za pomocą elementu EditContext. Podczas tworzenia elementu należy określić, z jakim wystąpieniem EditFormmodelu ma być powiązane przy użyciu parametru Model . Walidacja jest zwykle wykonywana przy użyciu adnotacji danych i jest rozszerzalna. Aby włączyć walidację DataAnnotationsValidator opartą na adnotacjach danych, dodaj składnik jako element podrzędny elementu EditForm. Składnik EditForm zapewnia wygodne zdarzenie do obsługi prawidłowych (OnValidSubmit) i nieprawidłowych (OnInvalidSubmit) przesłanych. Istnieje również bardziej ogólne OnSubmit zdarzenie, które pozwala wyzwalać i obsługiwać walidację samodzielnie.

Aby wyświetlić podsumowanie błędu weryfikacji, użyj ValidationSummary składnika . Aby wyświetlić komunikaty sprawdzania poprawności dla określonego pola wejściowego, użyj ValidationMessage składnika, określając wyrażenie lambda dla parametru For wskazującego odpowiedni element członkowski modelu.

Następujący typ modelu definiuje kilka reguł walidacji przy użyciu adnotacji danych:

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; }
}

Poniższy składnik demonstruje tworzenie formularza w Blazor oparciu Starship o typ modelu:

<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
    }
}

Po przesłaniu formularza dane powiązane z modelem nie zostały zapisane w żadnym magazynie danych, na przykład w bazie danych. Blazor WebAssembly W aplikacji dane muszą być wysyłane do serwera. Na przykład przy użyciu żądania HTTP POST. Blazor W aplikacji serwera dane są już na serwerze, ale muszą być utrwalane. Obsługa dostępu do danych w Blazor aplikacjach jest tematem sekcji Obsługa danych .

Dodatkowe zasoby

Aby uzyskać więcej informacji na temat formularzy i walidacji w Blazor aplikacjach, zobacz dokumentację Blazor .

PoprzedniNastępny