Formuláře a ověřování

Návod

Tento obsah je výňatek z eBooku pro Blazor vývojáře webových formulářů ASP NET pro Azure, který je k dispozici na webu .NET Docs nebo jako bezplatný soubor PDF ke stažení, který si můžete přečíst offline.

Stáhnout PDF

Architektura webových formulářů ASP.NET obsahuje sadu ověřovacích serverových ovládacích prvků, které zpracovávají ověřování vstupu uživatele zadaného do formuláře (RequiredFieldValidator, CompareValidator, RangeValidatoratd.). Rozhraní webových formulářů ASP.NET také podporuje vazbu modelu a ověřování modelu na základě datových poznámek ([Required], [StringLength], [Range]atd.). Logiku ověřování je možné vynutit na serveru i v klientovi pomocí nerušivého ověřování založeného na JavaScriptu. Ovládací ValidationSummary prvek serveru slouží k zobrazení souhrnu chyb ověření uživateli.

Blazor podporuje sdílení logiky ověřování mezi klientem a serverem. ASP.NET poskytuje předem sestavené implementace JavaScriptu pro mnoho běžných ověření serveru. V mnoha případech musí vývojář napsat JavaScript, aby plně implementoval logiku ověřování specifickou pro aplikaci. Stejné typy modelů, datové poznámky a logiku ověřování je možné použít na serveru i klientovi.

Blazor poskytuje sadu vstupních komponent. Vstupní komponenty zajišťují propojení dat pole s modelem a při odeslání formuláře ověřují, zda je vstup uživatele správný.

Vstupní komponenta	Vykreslený element HTML
InputCheckbox	<input type="checkbox">
InputDate	<input type="date">
InputNumber	<input type="number">
InputSelect	<select>
InputText	<input>
InputTextArea	<textarea>

Komponenta EditForm tyto vstupní komponenty zabalí a orchestruje proces ověření prostřednictvím objektu EditContext. Při vytváření EditForm zadáte, k jaké instanci modelu se má vytvořit vazba pomocí parametru Model. Ověřování se obvykle provádí pomocí datových poznámek a je rozšiřitelné. Pokud chcete povolit ověřování na základě datových poznámek, přidejte komponentu DataAnnotationsValidator jako podřízenou komponentu EditForm. Komponenta EditForm poskytuje pohodlnou událost pro zpracování platných (OnValidSubmit) a neplatných (OnInvalidSubmit) odeslání. Existuje také obecnější OnSubmit událost, která umožňuje aktivovat a zpracovat ověření sami.

Pokud chcete zobrazit souhrn chyb ověření, použijte komponentu ValidationSummary . Chcete-li zobrazit ověřovací zprávy pro konkrétní vstupní pole, použijte komponentu ValidationMessage a zadejte výraz lambda pro For parametr, který odkazuje na příslušný člen modelu.

Následující typ modelu definuje několik ověřovacích pravidel pomocí datových poznámek:

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

Následující komponenta ukazuje vytvoření formuláře Blazor na Starship základě typu 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 odeslání formuláře se data vázaná na model neuložila do žádného úložiště dat, jako je databáze. Blazor WebAssembly V aplikaci musí být data odeslána na server. Například pomocí požadavku HTTP POST. V serverové aplikaci jsou data již na serveru, ale musí být uložena. Zpracování přístupu k datům v Blazor aplikacích je předmětem části Práce s daty .

Dodatečné zdroje

Další informace o formulářích a ověřování v aplikacích najdete v BlazorBlazor dokumentaci.

předchozíDalší