Formulär och validering

Dricks

Det här innehållet är ett utdrag ur e-boken, Blazor för ASP NET Web Forms Developers for Azure, tillgängligt på .NET Docs eller som en kostnadsfri nedladdningsbar PDF som kan läsas offline.

Ladda ned PDF

Ramverket ASP.NET Web Forms innehåller en uppsättning verifieringsserverkontroller som hanterar validering av användarindata som angetts i ett formulär (RequiredFieldValidator, CompareValidator, RangeValidatoroch så vidare). Ramverket ASP.NET Web Forms stöder även modellbindning och validering av modellen baserat på dataanteckningar ([Required], [StringLength], [Range]och så vidare). Valideringslogik kan tillämpas både på servern och på klienten med diskret JavaScript-baserad validering. Serverkontrollen ValidationSummary används för att visa en sammanfattning av verifieringsfelen för användaren.

Blazor stöder delning av valideringslogik mellan både klienten och servern. ASP.NET tillhandahåller fördefinierade JavaScript-implementeringar av många vanliga servervalideringar. I många fall måste utvecklaren fortfarande skriva JavaScript för att fullständigt implementera sin appspecifika valideringslogik. Samma modelltyper, dataanteckningar och valideringslogik kan användas på både servern och klienten.

Blazor innehåller en uppsättning indatakomponenter. Indatakomponenterna hanterar bindningsfältdata till en modell och validerar användarindata när formuläret skickas.

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

Komponenten EditForm omsluter dessa indatakomponenter och samordnar valideringsprocessen via en EditContext. När du skapar en EditFormanger du vilken modellinstans som ska bindas till med hjälp av parametern Model . Valideringen görs vanligtvis med hjälp av dataanteckningar och är utökningsbar. Om du vill aktivera dataanteckningsbaserad validering lägger du till komponenten DataAnnotationsValidator som underordnad till EditForm. Komponenten EditForm ger en praktisk händelse för hantering av giltiga (OnValidSubmit) och ogiltiga (OnInvalidSubmit) inskickade filer. Det finns också en mer allmän OnSubmit händelse som gör att du kan utlösa och hantera valideringen själv.

Om du vill visa en sammanfattning av verifieringsfel använder du komponenten ValidationSummary . Om du vill visa valideringsmeddelanden för ett specifikt indatafält använder du komponenten ValidationMessage och anger ett lambda-uttryck för parametern For som pekar på lämplig modellmedlem.

Följande modelltyp definierar flera verifieringsregler med hjälp av dataanteckningar:

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

Följande komponent visar hur du skapar ett formulär baserat Blazor på Starship modelltypen:

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

Efter formuläröverföringen har modellbundna data inte sparats i något datalager, till exempel en databas. I en Blazor WebAssembly app måste data skickas till servern. Du kan till exempel använda en HTTP POST-begäran. I en Blazor Server-app finns data redan på servern, men de måste sparas. Hantering av dataåtkomst i Blazor appar är föremål för avsnittet Hantera data .

Ytterligare resurser

Mer information om formulär och validering i appar finns i Blazor dokumentationen Blazor .

FöregåendeNästa