Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Blazor WebAssembly - Forms in Action 2

Blazor WebAssembly - Forms in Action 2

Ein Großteil an Softwarelösungen hantiert mit Daten. Formulare sind hier kaum wegzudenken und ein zentraler Bestandteil. Sei es das Anmelden über eine Login-Maske oder das Buchen von Konzertkarten, überall sind Sie zu finden.

In dieser Session zeigt Patrick Jahr anhand eines Beispiels wie Formulare mit Blazor WebAssembly in .NET 5 implementiert werden können. Jedoch ist der Aufbau eines Formulars nicht alles: wird ein Nutzer nicht richtig über fehlerhafte Eingaben informiert, oder muss zu lange warten, bis das Formular neue Daten geladen hat, verliert er direkt die Lust oder das Vertauen in die Anwendung. Daher wird in dieser Session auch ein großes Augenmerk auf die Validierung von Formularen gelegt. Schlussendlich ist noch die Diskussion von Performance-beeinträchtigenden Fakten in komplexeren Szenarien ein wichtiges Thema in diesem Webinar.

7a33106dde82ecc65a220eaf9d131222?s=128

Patrick Jahr

July 14, 2021
Tweet

Transcript

  1. Blazor WebAssembly: Forms in Action Patrick Jahr @jahr_patrick Architekt

  2. Hello, it’s me. Patrick Jahr Architekt @ Thinktecture AG E-Mail:

    patrick.jahr@thinktecture.com Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr Blazor WebAssembly Forms in Action Patrick Jahr P
  3. Motivation Blazor Forms Data Binding Validation Performance Resumé Blazor WebAssembly

    Forms in Action
  4. Blazor WebAssembly Forms in Action

  5. - 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
  6. Motivation Blazor Forms Data Binding Validation Performance Resumé Blazor WebAssembly

    Forms in Action
  7. Kernelement: <EditForm> - Rendert das alt bekannte HTLM-Tag <form> -

    EditContext wird erstellt <EditForm></EditForm> Blazor WebAssembly Forms in Action Blazor Forms
  8. Blazor WebAssembly bietet von Haus aus eigene Input Felder -

    <InputText> - <InputDate> - <InputSelect> - … Hinweis: Übliche HTML-Tags wie <input /> können natürlich auch genutzt werden. <EditForm> <InputText /> <InputDate /> </EditForm> Blazor WebAssembly Forms in Action Forms
  9. Motivation Blazor Forms Data Binding Validation Performance Resumé Blazor WebAssembly

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

    Model="Country"> <InputTextField /> ... </EditForm>
  11. Blazor WebAssembly Forms in Action Data Binding EditForm: EditContext <EditForm

    EditContext="_editContext"> </EditForm> public partial class Test { private EditContext _editContext; protected override void OnInitialized() { Country = new Country(); _editContext = new EditContext(Country); base.OnInitialized(); } }
  12. Blazor WebAssembly Forms in Action Data Binding @bind-Value - Property,

    die an das <input /> Feld gebunden werden soll - Two-Way-Binding <EditForm Model="@Model"> <InputText @bind-Value="Model.Person.City"/> </EditForm>
  13. Blazor WebAssembly Forms in Action Data Binding Value - One-Way

    Binding - ValueChanged: Reagieren auf Änderungen des Wertes - ValueExpression: Value Identifier <EditForm Model="@Model"> <InputSelect ValueExpression="@(() => Value.Id)" Value="Value.Id“ ValueChanged="@((Guid id) => CurrentValue = id)"> </InputSelect> </EditForm>
  14. DEMO Blazor WebAssembly Forms in Action

  15. Motivation Blazor Forms Data Binding Validation Performance Resumé Blazor WebAssembly

    Forms in Action P
  16. DataAnnotations <DataAnnotationsValidator /> 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
  17. 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
  18. FluentValidation - Validator - Ableiten von Basisklasse: AbstractValidator<T> - Zu

    Root hinzufügen - @using Blazored.FluentValidation - Tag: <FluentValidationValidator /> Blazor WebAssembly Forms in Action Validation
  19. DEMO Blazor WebAssembly Forms in Action

  20. Motivation Blazor Forms Data Binding Validation Performance Resumé Blazor WebAssembly

    Forms in Action
  21. 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
  22. 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
  23. DEMO Blazor WebAssembly Forms in Action

  24. Motivation Blazor Forms Data Binding Validation Performance Resumé Blazor WebAssembly

    Forms in Action
  25. - 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é
  26. Vielen Dank für Ihre Aufmerksamkeit! Patrick Jahr @jahr_patrick patrick.jahr@thinktecture.com