Formulare in Blazor-Apps erstellen
Dateneingabe, UI-Gestaltung und Validierung
In Business-Anwendungen bilden Formulare und deren Elemente die Grundlage für jegliche Dateneingabe. Blazor ermöglicht es, solche Web-Formulare in der Razor-Syntax zu erstellen. In diesem Tutorial betrachten wir, wie Formulare in Blazor-Apps umgesetzt werden können. Es umfasst die Themen UI-Gestaltung, Datenbindung und Validierung.
Blazor unterstützt Formulare und bietet integrierte Eingabekomponenten. Wir haben die folgenden Optionen [1]:
- HTML-Formulare mit dem <form>-Element
- EditForm-Komponenten
- Eingabekomponenten von Drittanbietern.
Um Formulare in Blazor-Web-Apps zu erstellen, setzt man üblicherweise auf die EditForm-Komponente [1]. Die Blazor-EditForm-Komponente bietet einige wichtige Attribute und Ereignishandler, mit denen der Benutzer die Validierung der Daten problemlos durchführen kann. EditForms basiert auf den folgenden Konzepten:
- Das Formular verwendet Data Annotation zur Validierung der Eingaben.
- Das Formular stellt ein Model-Attribut bereit, das eine zu validierende Modellklasse akzeptiert.
- Die ValidationSummary-Komponente wird verwendet, um Validierungsnachrichten zusammenzufassen und anzuzeigen.
- Sie erstellt einen EditContext, der die Änderungen an den Datenfeldern und die Validierungsnachricht verfolgt.
- Zur Validierung sollte entweder das EditContext- oder das Model-Attribut zugewiesen werden. Sie können nicht zusammen verwendet werden. Die Zuweisung dieser beiden Werte führt zu einem Laufzeitfehler.
- Sie bietet drei wichtige Ereignishandler für Benutzer, von denen jeder EditContext als Parameter übergibt.
Die Ereignishandler zur Auswertung der Aktionen des Nutzers sind:
- OnValidSubmit: Dieser Ereignishandler wird immer dann aufgerufen, wenn das Formular gesendet wird und der EditContext als gültig befunden wird.
- OnInvalidSubmit: Dieser Ereignishandler wird immer dann aufgerufen, wenn das Formular gesendet wird und der EditContext als ungültig befunden wird.
- OnSubmit: Diese Methode wird immer dann aufgerufen, wenn das Formular gesendet wird. Ohne Berücksichtigung der EditContext-Validierung bleibt es dem Benutzer überlassen, den EditContext explizit zu validieren. Diese Methode wird meistens verwendet, wenn Sie über eine benutzerdefinierte Validierungslogik verfügen.
Nachfolgend beschreiben wir an einem Beispiel die Verwendung der EditForm-Komponente.
Mit der EditForm-Komponente arbeiten
Erstellen Sie eine neue Web-App (Rendermodus: Interactive Server). Im nächsten Schritt fügen wir eine neue Seite (Page) der Applikation hinzu. In diesem Fall ist es eine Razor-Komponente. Das erreichen wir über das Kontextmenü des Solution-Explorers. Nennen wir diese Komponente Form. Vergessen Sie nicht die Zeile @page "/form", damit die Seite über den Navigator erreicht werden kann. Die leere Komponente sieht daher zunächst wie folgt aus:
@page "/form"
<h3>Form</h3>
@code {
…
}In die Navigationsstruktur muss diese Komponente ebenso eingebunden werden (Datei: NavMenu.razor):
<li class="nav-item px-3">
<NavLink class="nav-link" href="form">
<span class="oi oi-plus" aria-hidden="true"></span> Formular
</NavLink>
</li>Wenn wir die Applikation jetzt starten, haben wir eine neue Seite, welche unser Formular aufnehmen soll. Diese neue Seite ist auch direkt in die Navigationsstruktur der App eingebunden. Als Beispiel für ein Formular möchten wir die Datenerfassung für Kontaktdaten implementieren. Diese könnten zum Beispiel aus den Datenfeldern Id (Integer), FirstName (string), LastName (string) und Email (string) bestehen. In der Praxis können wir diese Datenfelder nach Belieben anpassen. Erstellen wir dazu eine passende Datenklasse und nennen wir diese User. Die Datenklasse (User.cs) fügen wir dem Projekt hinzu:
public class User
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Email { get; set; }
}Das Formular soll auch eine Validierungslogik beinhalten. Das geschieht über die Nutzung von DataAnnotations. Hier werden die Datenklassen mit so genannten Annotierungen versehen. Die Möglichkeiten der Annotierungen sind im Namespace System.ComponentModel.DataAnnotations in einzelnen Klassen zusammengefasst [3]. Es werden u. a. folgende Klassen zur Datenvalidierung bereitgestellt:
- CreditCardAttribute: Gibt an, dass ein Datenfeldwert eine Kreditkartennummer ist. Der Wert wird mithilfe eines Algorithmus für die Zeichenfolgenverarbeitung überprüft. Die Klasse überprüft nicht, ob die Kreditkartennummer für Käufe gültig ist, sondern nur, dass Sie wohlgeformt, d. h. syntaktisch korrekt ist.
- EditableAttribute: Gibt an, ob ein Datenfeld bearbeitet werden kann. Das Vorhandensein dieses Attributs für ein Datenfeld gibt an, ob der Benutzer in der Lage sein soll, den Wert des Felds zu ändern.
- EmailAddressAttribute: Überprüft eine E-Mail-Adresse (@-Zweichen).
- FileExtensionsAttribute: Überprüft auf bestimmte Dateierweiterungen.
- PhoneAttribute: Gibt an, dass ein Datenfeldwert eine wohlgeformte Telefonnummer ist.
- RangeAttribute: Gibt die Einschränkungen des numerischen Bereichs für den Wert eines Datenfelds an (Unter- und Obergrenze).
- RegularExpressionAttribute: Gibt an, dass ein Datenfeldwert mit dem angegebenen regulären Ausdruck übereinstimmen muss.
- RequiredAttribute: Gibt an, dass ein Datenfeldwert erforderlich ist.
- StringLengthAttribute: Gibt den Mindest- und Maximalwert für die zulässige Zeichenlänge eines Datenfelds an.
- UrlAttribute: Stellt eine URL-Überprüfung bereit.
Neben der Überprüfung des Datentyps, des Wertebereiches, der Länge von Zeichenketten usw., finden sich auch spezielle Klassen, wie eine Syntaxprüfung auf eine Kreditkartennummer. Über DataAnnotations können die Eigenschaften im Quellcode auch bestimmten Attributen in der Datenbank oder als Schlüsselattribut definiert werden. Ein Beispiel für die Annotierung von Datenklassen findet sich unter [4]. Es zeigt eine Validierung eines Zahlenwertes für einen bestimmten Wertebereich.
Die Datenklasse User erweitern wir um passende DataAnnotations. Für das Datenfeld LastName kann das zum Beispiel wie folgt aussehen:
[Required(ErrorMessage = "Nachname ist notwendig")]
[StringLength(30, MinimumLength = 3, ErrorMessage = "Der Nachname kann nicht weniger als 3 oder mehr als 30 Zeichen haben")]
public string LastName { get; set; }Wir geben also an, dass das Datenfeld LastName zwingend im Formular zu erfassen ist. Es handelt sich um eine Zeichenkette (string), mit einer Länge zwischen 3 und 30 Zeichen. Für die anderen Datenfelder verfahren wir auf identische Weise:
public class User
{
public int Id { get; set; }
public string FirstName { get; set; }
[Required(ErrorMessage = "Nachname ist notwendig")]
[StringLength(30, MinimumLength = 3, ErrorMessage = "Der Nachname kann nicht weniger als 3 oder mehr als 30 Zeichen haben")]
public string LastName { get; set; }
[Required(ErrorMessage = "E-Mail ist notwendig")]
[DataType(DataType.EmailAddress)]
[EmailAddress]
public string Email { get; set; }
}Für das Datenfeld E-Mail-Adresse haben wir zusätzlich noch den Datentyp über Annotierung bereitgestellt:
[DataType(DataType.EmailAddress)]
[EmailAddress]Im nächsten Schritt geht es darum das Formular mit den Datenfeldern zur Anzeige zu bringen. Dazu haben wir zwei Varianten: Model-Attribut oder EditContext-Attribut. Beginnen wir mit dem Model-Attribut.
Validierung mit dem Model-Attribut für EditForm in Blazor-Apps
Alles spielt sich in der Komponente Form.razor ab. Betrachten Sie parallel zu den folgenden Erläuterungen den Code:
@page "/form"
<h3>Erfassen Sie hier Ihre Kontaktdaten.</h3>
<div class="container">
<EditForm Model="@NewUser" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
<DataAnnotationsValidator />
<div class="row">
<div class="col-md-8">
<div class="row" style="margin-top:10px">
<div class="col-md-12">
<label for="firstName">Vorname</label>
<input type="text" class="form-control" id="firstName" @bind-value="@NewUser.FirstName" placeholder="Vorname hier eingeben" />
<ValidationMessage For="@(()=>NewUser.FirstName)" />
</div>
</div>
<div class="row" style="margin-top:10px">
<div class="col-md-12">
<label for="lastName">Nachname</label>
<input type="text" class="form-control" id="lastName" @bind-value="@NewUser.LastName" placeholder="Nachname hier eingeben.." />
<ValidationMessage For="@(()=>NewUser.LastName)" />
</div>
</div>
<div class="row" style="margin-top:10px">
<div class="col-md-12">
<label for="email">E-Mail-Adresse</label>
<input type="text" class="form-control" id="email" @bind-value="@NewUser.Email" placeholder="Die E-Mail-Adresse bitte..." />
<ValidationMessage For="@(()=>NewUser.Email)" />
</div>
</div>
<button type="submit" class="btn btn-info" Style="margin-top:10px">Nutzer hinzufügen</button>
</div>
@if (displayValidationErrorMessages)
{
<div class="col-md-4" style="margin-top:10px">
<label>Validation Messages: </label>
<ValidationSummary />
</div>
}
</div>
</EditForm>
@if (displayUserAddedToDB)
{
<div class="row bg-success text-white" style="margin-top:10px; height:40px">
<label class="p-2">Benutzer hinzugefügt ... </label>
</div>
}
</div>
@code {
User NewUser = new User();
bool displayValidationErrorMessages = false;
bool displayUserAddedToDB = false;
private void HandleValidSubmit(EditContext context)
{
displayValidationErrorMessages = false;
displayUserAddedToDB = true;
}
private void HandleInvalidSubmit(EditContext context)
{
displayValidationErrorMessages = true;
displayUserAddedToDB = false;
}
}- Das Formular wird durch die EditForm-Komponente eingeschlossen.
- Hier werden die Attribute Model, OnValidSubmit und OnInvalidSubmit belegt, welche auf die entsprechenden C#-Codezeilen am Ende der Komponente verweisen.
- Die Eingabefelder werden durch ein <input/>-Element dargestellt. Die Beschriftung der <input/>-Felder erfolgt jeweils durch ein zugeordnetes <label/>-Element. Hier haben wir es mit der Logik von HTML5-Formularen zu tun. Das Layout und das Design des Formulars basieren auf Bootstrap (Abb. 1).
- Wir haben im Codeabschnitt ein Objekt des Typs User erstellt. Dieses Objekt mit dem Namen NewUser wird an die Model-Eigenschaft der EditForms-Komponente gebunden.
- HandleValidSubmit: Die Methode wird definiert und als Rückruf an das OnValidSubmit-Ereignis gebunden. Diese Methode wird aufgerufen, wenn der Benutzer auf die Schaltfläche "Nutzer hinzufügen" klickt und sich das Modell in einem gültigen Zustand befindet. Im Beispiel passiert in der Methode nichts weiter, d. h. es wird nur die Eigenschaft displayUserAddedToDB stellvertretend für andere Aktionen auf true gesetzt, um zu signalisieren, dass die Eingaben im Formular korrekt waren und der Nutzer in die Datenbank aufgenommen wurde. Hier wäre der Ansatzpunkt, um weitere Aktionen bei einer positiven Prüfung der Nutzereingaben zu veranlassen.
- HandleInvalidSubmit: Die Methode wird definiert und als Rückruf an das OnInvalidSubmit-Ereignis gebunden. Diese Methode wird aufgerufen, wenn der Benutzer auf die Schaltfläche "Nutzer hinzufügen" klickt und sich das Modell in einem ungültigen Zustand befindet. Auch hier aktualisieren wir nur die boolesche Statuseigenschaften displayUserAddedToDB = false, um Nachrichten auf der Benutzeroberfläche zum Fehler anzuzeigen (Abb. 2).
- Die DataAnnotationsValidator-Komponente wird innerhalb der EditForm-Komponente hinzugefügt, um die Validierungsunterstützung hinzuzufügen.
- Die ValidationMessage-Komponente wird nach jedem zu validierenden Eingabetyp hinzugefügt, um eine Validierungsfehlermeldung anzuzeigen.
- Es wird die Meldung "Benutzer hinzugefügt" ausgegeben, um die erfolgreiche Validierung zu bestätigen. Die Verarbeitung ist damit abgeschlossen.
Wir haben hier den Weg der Datenvalidierung mittels des Model-Attributes für die Komponente EditForm betrachtet.
Validierung mit dem EditContext-Attribut für EditForm
Die zweite Variante der Datenvalidierung mittels der EditForm-Komponente erfolgt durch Nutzung des EditContext-Attributes. Um uns die Unterschiede in der Implementierung genau anzusehen, machen wir zunächst eine Kopie der Komponente Form, nennen diese zum Beispiel Form2 und passen den Quellcode an:
@page "/form2"
<h3>Erfassen Sie hier Ihre Kontaktdaten.</h3>
<div class="container">
<EditForm EditContext="@context" OnSubmit="@SubmitEventHandler">
...
</EditForm>
@if (displayUserAddedToDB)
{
<div class="row bg-success text-white" style="margin-top:10px; height:40px">
<label class="p-2">Benutzer hinzugefügt ... </label>
</div>
}
</div>
@code {
User NewUser = new User();
EditContext context;
protected override Task OnInitializedAsync()
{
context = new EditContext(NewUser);
return base.OnInitializedAsync();
}
bool displayValidationErrorMessages = false;
bool displayUserAddedToDB = false;
private void SubmitEventHandler(EditContext context)
{
if (context.Validate())
{
displayValidationErrorMessages = false;
displayUserAddedToDB = true;
}
else
{
displayValidationErrorMessages = true;
displayUserAddedToDB = false;
}
}
}Der Code innerhalb der EditForms-Komponente bleibt identisch, es ändert sich die Definition der Eigenschaften:
<EditForm EditContext="@context" OnSubmit="@SubmitEventHandler">Im C#-Bereich gibt es auch einige Anpassungen. Zusammenfasend können wir das Vorgehen wie folgt beschreiben:
- Wir haben ein Objekt der EditContext-Klasse erstellt und dieses initialisiert und der Instanz des User-Objekts in OnInitializedAsync() zugewiesen.
- Danach wird die Referenz dieses Objekts auf das EditContext-Attribut der EditForm gebunden.
- SubmitEventHandler: Die Methode wurde hinzugefügt und als Rückruf an das OnSubmit-Ereignis gebunden. Die Methode wird aufgerufen, wenn der Benutzer auf die Schaltfläche "Nutzer hinzufügen" klickt. Der Code zum Überprüfen, ob die Datenvalidierung erfolgreich ist, wird in dieser Methode durch Aufrufen von context.Validate() behandelt.
Wir unterscheiden also bei der EditContext-Validierung erst im C#-Code, ob die richtigen Daten eingegeben wurden und geben das Ergebnis an die EditForm-Komponente zurück. Daher nutzen wir hier auch das Ereignis OnSubmit statt der speziellen Ereignisse OnValidSubmit und OnInvalidSubmit. Im Falle einer positiven Datenprüfung erfolgt auch hier am Ende die Meldung "Benutzer hinzugefügt".
Web-Entwicklung auf den diesjährigen IT-Tagen
Spannende Vorträge und Workshops zum Thema Web-Entwicklung erwarten Euch auch auf den IT-Tagen, der Jahreskonferenz von Informatik Aktuell. Die IT-Konferenz findet jedes Jahr im Dezember in Frankfurt statt – dieses Jahr vom 08.-11.12.
Fazit
Die Blazor-EditForm-Komponente bietet zusammen mit der DataAnnotationsValidator-Klasse eine sehr bequeme Möglichkeit, die Modellvalidierung in einer Blazor-Anwendung zu implementieren. Damit haben wir einen Überblick über Formulare in Blazor-Apps. Mit diesem Wissen im Gepäck lassen sich Formulare in Blazor effektiv, sauber und nutzerfreundlich umsetzen – ganz ohne JavaScript, sondern rein mit C#, .NET und etwas Markup.
- Microsoft Ignite: Übersicht über ASP.NET Core Blazor Formulare
- Microsoft Ignite: EditForm Klasse
- Microsoft Ignite: System.ComponentModel.DataAnnotations Namespace
- Microsoft Ignite: RangeAttribute Konstruktoren
