Blazor WebAssembly: Forms in Action Patrick Jahr @jahr_patrick Architekt

Hello, it’s me. Patrick Jahr Architekt @ Thinktecture AG E-Mail: [email protected] Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr Blazor WebAssembly Forms in Action Patrick Jahr P

Motivation Blazor Forms Data Binding Validation Performance Resumé Blazor WebAssembly Forms in Action

Blazor WebAssembly Forms in Action

- Meist genutzt Werkzeug um mit Nutzern zu interagieren - Verarbeitung von Daten ist eine der häufigsten Vorkommnisse in Anwendungen - Viel Spielraum bei der Eingabe haben - Fehler klar angeben und anzeigen - Komplexe Logik durch Abhängigkeiten zwischen den Feldern Blazor WebAssembly Forms in Action Motivation 1

Motivation Blazor Forms Data Binding Validation Performance Resumé Blazor WebAssembly Forms in Action

Kernelement: - Rendert das alt bekannte HTLM-Tag - EditContext wird erstellt Blazor WebAssembly Forms in Action Blazor Forms

Blazor WebAssembly bietet von Haus aus eigene Input Felder - - - - … Hinweis: Übliche HTML-Tags wie können natürlich auch genutzt werden. Blazor WebAssembly Forms in Action Forms

Motivation Blazor Forms Data Binding Validation Performance Resumé Blazor WebAssembly Forms in Action

Blazor WebAssembly Forms in Action Data Binding EditForm: Model ...

Blazor WebAssembly Forms in Action Data Binding EditForm: EditContext public partial class Test { private EditContext _editContext; protected override void OnInitialized() { Country = new Country(); _editContext = new EditContext(Country); base.OnInitialized(); } }

Blazor WebAssembly Forms in Action Data Binding @bind-Value - Property, die an das Feld gebunden werden soll - Two-Way-Binding

Blazor WebAssembly Forms in Action Data Binding Value - One-Way Binding - ValueChanged: Reagieren auf Änderungen des Wertes - ValueExpression: Value Identifier CurrentValue = id)">

DEMO Blazor WebAssembly Forms in Action

Motivation Blazor Forms Data Binding Validation Performance Resumé Blazor WebAssembly Forms in Action P

DataAnnotations DataAnnotations Attribute zur Validierung der einzelnen Properties [Required] [StringLength(100, ErrorMessage = "Nummer zu lang")] [RegularExpression( @"^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$", ErrorMessage = "Not a valid phone number")] public string PhoneNumber { get; set; } Blazor WebAssembly Forms in Action Validation

FluentValidation - OpenSource NuGet Package - Blazored.FluentValidation - Erstellen von eigenen Custom Validators - Eigene Regeln erstellen zum Validieren von Feldern - Möglichkeit Abhängigkeiten von Properties zu validieren - Dependency Injection Blazor WebAssembly Forms in Action Validation

FluentValidation - Validator - Ableiten von Basisklasse: AbstractValidator - Zu Root hinzufügen - @using Blazored.FluentValidation - Tag: Blazor WebAssembly Forms in Action Validation

DEMO Blazor WebAssembly Forms in Action

Motivation Blazor Forms Data Binding Validation Performance Resumé Blazor WebAssembly Forms in Action

Blazor WebAssembly Forms in Action Erstes Rendern? || ShouldRender() DOM Event oninput, onclick, onblur,... Event Handler ausführen Render Component OnAfterRender/ OnAfterRenderAsync Render tree wird erstellt und an den DOM gesendet DOM Update Rendern wird beendet Nein Ja 1 2 3 4a 4b 5 6

Auf was muss geachtet werden? - Nach jedem Event wie z.B. @onclick wird ein Re-Rendering getriggert - Wird wirklich bei jeder Änderung ein Re-Rendering benötigt? - Disable ShouldRender wenn möglich - foreach vs. Virtualize - Müssen alle Elemente direkt geladen werden? Blazor WebAssembly Forms in Action Performance

DEMO Blazor WebAssembly Forms in Action

Motivation Blazor Forms Data Binding Validation Performance Resumé Blazor WebAssembly Forms in Action

- Blazor bietet viel von Haus aus - DataAnnotationValidation: viel in der klassischen Validierungsszenarien - FluentValidation: Validierung von Sonderfällen und komplexen Abhänigkeiten - Aufpassen beim Rendern! Muss wirklich bei jedem Event neu gerendert werden? Blazor WebAssembly Forms in Action Resumé

Vielen Dank für Ihre Aufmerksamkeit! Patrick Jahr @jahr_patrick [email protected]