Formulieren en validatie

Aanbeveling

Deze inhoud is een fragment uit het eBook, Blazor voor ASP NET-webformulierontwikkelaars voor Azure, beschikbaar op .NET Docs of als een gratis downloadbare PDF die offline kan worden gelezen.

PDF downloaden

Het ASP.NET Web Forms-framework bevat een set besturingselementen voor validatieservers die het valideren van gebruikersinvoer in een formulier verwerken (RequiredFieldValidatorCompareValidatorRangeValidator, enzovoort). Het ASP.NET Web Forms-framework biedt ook ondersteuning voor modelbinding en het valideren van het model op basis van gegevensaantekeningen ([Required][StringLength][Range], enzovoort). De validatielogica kan zowel op de server als op de client worden afgedwongen met behulp van onopvallende JavaScript-validatie. Het ValidationSummary serverbeheer wordt gebruikt om een samenvatting weer te geven van de validatiefouten voor de gebruiker.

Blazor ondersteunt het delen van validatielogica tussen zowel de client als de server. ASP.NET biedt vooraf gebouwde JavaScript-implementaties van veel algemene servervalidaties. In veel gevallen moet de ontwikkelaar nog steeds JavaScript schrijven om hun app-specifieke validatielogica volledig te implementeren. Dezelfde modeltypen, gegevensaantekeningen en validatielogica kunnen worden gebruikt op zowel de server als de client.

Blazor biedt een set invoeronderdelen. De invoeronderdelen verwerken bindingsveldgegevens aan een model en valideren de gebruikersinvoer wanneer het formulier wordt verzonden.

Invoeronderdeel	Weergegeven HTML-element
InputCheckbox	<input type="checkbox">
InputDate	<input type="date">
InputNumber	<input type="number">
InputSelect	<select>
InputText	<input>
InputTextArea	<textarea>

Het EditForm onderdeel verpakt deze invoeronderdelen en organiseert het validatieproces via een EditContext. Wanneer u een EditForm exemplaar maakt, geeft u aan welk modelexemplaar u wilt binden, met behulp van de Model parameter. Validatie wordt meestal uitgevoerd met behulp van gegevensaantekeningen en kan worden uitgebreid. Als u validatie op basis van gegevensaantekening wilt inschakelen, voegt u het DataAnnotationsValidator onderdeel toe als een onderliggend element van de EditForm. Het EditForm onderdeel biedt een handige gebeurtenis voor het verwerken van geldige (OnValidSubmit) en ongeldige (OnInvalidSubmit) inzendingen. Er is ook een algemenere OnSubmit gebeurtenis waarmee u de validatie zelf kunt activeren en afhandelen.

Als u een samenvatting van een validatiefout wilt weergeven, gebruikt u het ValidationSummary onderdeel. Als u validatieberichten voor een specifiek invoerveld wilt weergeven, gebruikt u het ValidationMessage onderdeel en geeft u een lambda-expressie op voor de For parameter die verwijst naar het juiste modellid.

Het volgende modeltype definieert verschillende validatieregels met behulp van gegevensaantekeningen:

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

In het volgende onderdeel ziet u hoe u een formulier Blazor bouwt op basis van het Starship modeltype:

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

Nadat het formulier is verzonden, zijn de modelgebonden gegevens niet opgeslagen in een gegevensarchief, zoals een database. In een Blazor WebAssembly app moeten de gegevens naar de server worden verzonden. Bijvoorbeeld met behulp van een HTTP POST-aanvraag. In een Blazor Server-app bevinden de gegevens zich al op de server, maar deze moeten wel worden bewaard. Het verwerken van gegevenstoegang in Blazor apps is het onderwerp van de sectie Omgaan met gegevens .

Aanvullende bronnen

Zie de documentatie voor meer informatie over Blazor in Blazor apps.

VorigeVolgende