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 einige Validierungs-Serversteuerelemente, die Benutzereingaben in ein Formular (z. B. RequiredFieldValidator, CompareValidator oder RangeValidator) verarbeiten. Das ASP.NET Web Forms-Framework unterstützt auch die Modellbindung und die Modellvalidierung auf Grundlage von Datenanmerkungen (z. B. [Required], [StringLength] oder [Range]). Die Validierungslogik kann sowohl auf dem Server als auch auf dem Client erzwungen werden, indem eine unaufdringliche JavaScript-Validierung verwendet wird. Das Serversteuerelement ValidationSummary wird verwendet, um dem Benutzer eine Zusammenfassung der Validierungsfehler anzuzeigen.

Blazor unterstützt den Austausch der Validierungslogik zwischen Client und Server. ASP.NET enthält vorgefertigte JavaScript-Implementierungen vieler gängiger Servervalidierungen. In vielen Fällen muss der Entwickler trotzdem JavaScript-Code schreiben, um die App-spezifische Validierungslogik vollständig zu implementieren. Auf dem Server und Client können die gleichen Modelltypen, Datenanmerkungen und die gleiche Validierungslogik verwendet werden.

Blazor stellt einige Eingabekomponenten bereit. Die Eingabekomponenten binden Felddaten an ein Modell und überprüfen die Benutzereingabe, wenn das Formular übermittelt wird.

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

Die Komponente EditForm umschließt diese Eingabekomponenten und orchestriert den Validierungsprozess mithilfe von EditContext. Bei der Erstellung von EditForm geben Sie mit dem Parameter Model an, welche Modellinstanz für die Bindung verwendet werden soll. Die Validierung erfolgt in der Regel mithilfe von Datenanmerkungen und ist erweiterbar. Fügen Sie die Komponente DataAnnotationsValidator als untergeordnetes Element von EditForm hinzu, um die auf Datenanmerkungen basierende Validierung zu ermöglichen. Die Komponente EditForm stellt ein Ereignis für die Verarbeitung gültiger (OnValidSubmit) und ungültiger (OnInvalidSubmit) Übermittlungen bereit. Mit dem allgemeineren Ereignis OnSubmit können Sie die Validierung selbst auslösen und vornehmen.

Verwenden Sie die Komponente ValidationSummary, um eine Zusammenfassung der Validierungsfehler anzuzeigen. Sie können Validierungsmeldungen für ein bestimmtes Eingabefeld anzeigen, indem Sie die Komponente ValidationMessage verwenden und dabei einen Lambdaausdruck für den Parameter For angeben, der auf den entsprechenden Modellmember zeigt.

Der folgende Modelltyp definiert mehrere Validierungsregeln 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 auf Grundlage des Modelltyps Starship:

<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 wie einer Datenbank gespeichert. In einer Blazor WebAssembly-App müssen die Daten an den Server gesendet werden. Hierfür kann beispielsweise eine HTTP POST-Anforderung verwendet werden. In einer Blazor Server-App befinden sich die Daten bereits auf dem Server, müssen jedoch persistent gespeichert werden. Die Handhabung des Datenzugriffs in Blazor-Apps wird im Abschnitt Arbeiten mit Daten behandelt.

Zusätzliche Ressourcen

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

ZurückWeiter