Formulare und Überprüfung

Tipp

Diese Inhalte sind ein Auszug aus dem eBook „Blazor for ASP NET Web Forms Developers for Azure“, verfügbar unter .NET Docs oder als kostenlos herunterladbare PDF-Datei, die offline gelesen werden kann.

PDF herunterladen

Das ASP.NET Web Forms Framework enthält eine Reihe von Überprüfungsserver-Steuerelementen, die die Überprüfung der in ein Formular eingegebenen Benutzereingaben (RequiredFieldValidator, CompareValidator, RangeValidatorusw.) verarbeiten. Das ASP.NET Web Forms Framework unterstützt auch die Modellbindung und Überprüfung des Modells basierend auf Datenanmerkungen ([Required], [StringLength], [Range]usw.). Die Validierungslogik kann sowohl auf dem Server als auch auf dem Client mithilfe einer unauffälligen JavaScript-basierten Überprüfung erzwungen werden. Das ValidationSummary Serversteuerelement wird verwendet, um dem Benutzer eine Zusammenfassung der Überprüfungsfehler anzuzeigen.

Blazor unterstützt das Übertragen der Überprüfungslogik zwischen Client und Server. ASP.NET stellt vordefinierte JavaScript-Implementierungen vieler gängiger Serverüberprüfungen bereit. In vielen Fällen muss der Entwickler immer noch JavaScript schreiben, um seine appspezifische Validierungslogik vollständig zu implementieren. Die gleichen Modelltypen, Datenanmerkungen und Validierungslogik können sowohl auf dem Server als auch auf dem Client verwendet werden.

Blazor stellt eine Reihe von Eingabekomponenten bereit. Die Eingabekomponenten verarbeiten Bindungsfelddaten an ein Modell und überprüfen die Benutzereingabe beim Senden des Formulars.

Eingabekomponenten	Gerendertes HTML-Element
InputCheckbox	<input type="checkbox">
InputDate	<input type="date">
InputNumber	<input type="number">
InputSelect	<select>
InputText	<input>
InputTextArea	<textarea>

Die EditForm Komponente umschließt diese Eingabekomponenten und orchestriert den Überprüfungsprozess durch ein EditContext. Beim Erstellen eines EditFormParameters geben Sie an, an welche Modellinstanz eine Bindung mit dem Model Parameter hergestellt werden soll. Die Überprüfung erfolgt in der Regel mithilfe von Datenanmerkungen und ist erweiterbar. Um die datenanmerkungsbasierte Überprüfung zu aktivieren, fügen Sie die DataAnnotationsValidator Komponente als untergeordnetes Element der EditForm. Die EditForm Komponente bietet ein praktisches Ereignis zum Behandeln gültiger (OnValidSubmit) und ungültiger (OnInvalidSubmit) Übermittlungen. Es gibt auch ein allgemeineres OnSubmit Ereignis, mit dem Sie die Validierung selbst auslösen und verwalten können.

Verwenden Sie die ValidationSummary Komponente, um eine Überprüfungsfehlerzusammenfassung anzuzeigen. Verwenden Sie die ValidationMessage Komponente, um Überprüfungsmeldungen für ein bestimmtes Eingabefeld anzuzeigen, und geben Sie einen Lambda-Ausdruck für den For Parameter an, der auf das entsprechende Modellelement verweist.

Der folgende Modelltyp definiert mehrere Gültigkeitsprüfungsregeln mithilfe von Datenanmerkungen:

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

Die folgende Komponente veranschaulicht das Erstellen eines Formulars in Blazor basierend auf dem Starship Modelltyp.

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

Nach der Formularübermittlung wurden die modellgebundenen Daten nicht in einem Datenspeicher gespeichert, z. B. in einer Datenbank. In einer Blazor WebAssembly App müssen die Daten an den Server gesendet werden. Verwenden Sie z. B. eine HTTP POST-Anforderung. In einer Blazor Server-App befinden sich die Daten bereits auf dem Server, müssen jedoch beibehalten werden. Die Verarbeitung des Datenzugriffs in Blazor Apps ist Gegenstand des Abschnitts "Umgang mit Daten ".

Weitere Ressourcen

Weitere Informationen zu Formularen und Validierungen in Apps finden Sie in Blazor der Blazor Dokumentation.

ZurückWeiter