Blazor WebAssembly – Dynamische Formulare und Inhalte in Aktion

Das Erstellen von dynamischen Formularen und Inhalten ist ein wichtiger Bestandteil von komplexeren Webanwendungen. Beispielsweise in Form einer externen Konfiguration, in der diverse Felder eines Formulars gelistet sind, werden Formulare dynamisch erzeugt und müssen nicht mehr manuell geschrieben und hart verdrahtet werden.

In diesem Webinar zeigt Ihnen Patrick Jahr wie Sie mit Hilfe von Werkzeugen, wie der DynamicComponent oder dem RenderFragment, dynamische Formulare und Inhalte rendern und in Ihrem Blazor-UI darstellen können.

Transcript

1. Blazor WebAssembly Dynamische Formulare und Inhalte in Aktion Patrick Jahr @jahr_patrick Architekt
2. Hello, it’s me. Patrick Jahr Developer Consultant / Blazor Expert @ Thinktecture AG E-Mail: patrick.jahr@thinktecture.com Twitter: @jahr_patrick Slides: https://thinktecture.com/patrick-jahr Blazor WebAssembly Dynamische Formulare und Inhalte in Aktion Patrick Jahr P
3. „Terminal Server für Web-Entwickler“ • Thinktecture fokussiert auf SPA-Architekturen • Blazor WebAssembly ist ein waschechtes SPA-Framework • Blazor Server hat komplexe, nicht Web-Style Basisarchitektur – aka „Server-Client“ • Code wird immer auf Serverseite ausgeführt • Zustand wird ausschließlich auf Serverseite gehalten • Skalierung wird deutlich aufwändiger • Auf dem Client ist nur ein schmaler JavaScript-Stub aktiv (aus dem Blazor-Framework) • Jegliche UI-Interaktionen wandern immer über das Netzwerk (SignalR-Verbindung) • Ständige Netzwerkverbindung nötig - fehleranfällig • Keine Offlinefähigkeit - Möglichkeiten als SPA / PWA werden eingeschränkt • Zustandsbehaftete Datenhaltung erschwert • Infos über die technischen Details und Eigenheiten von Blazor Server: • https://www.thinktecture.com/de/blazor/webinar-blazor-server-moegliche-alternative-zu-spas/ Blazor WebAssembly Dynamische Formulare und Inhalte in Aktion Was ist mit Blazor Server?
4. DEMO Blazor WebAssembly Dynamische Formulare und Inhalte in Aktion
5. Blazor WebAssembly Dynamische Formulare und Inhalte in Aktion
6. RenderFragment DynamicComponent Resumé Blazor WebAssembly Dynamische Formulare und Inhalte in Aktion P
7. 7 • (Klassischer) Ansatz zum Rendern von Segmenten des User-Interface zur Laufzeit Blazor WebAssembly Dynamische Formulare und Inhalte in Aktion RenderFragment Code-Behind Razor-Code
8. DEMO Blazor WebAssembly Dynamische Formulare und Inhalte in Aktion
9. RenderFragment DynamicComponent Resumé Blazor WebAssembly Dynamische Formulare und Inhalte in Aktion
10. 10 • Seit .NET6 im Blazor-Framework • Mit dem Komponententyp und den Parameteren können Komponenten dynamisch gerendert werden Blazor WebAssembly Dynamische Formulare und Inhalte in Aktion DynamicComponent
11. DEMO Blazor WebAssembly Dynamische Formulare und Inhalte in Aktion P
12. Blazor WebAssembly Dynamische Formulare und Inhalte in Aktion
13. 13 • Dynamic Component ist sehr cool, hat aber dennoch grenzen • RenderFragments erlauben den RenderTree selbst zu erstellen • Am Ende wird bei beiden Ansätzen das gleiche Verfahren genutzt Blazor WebAssembly Dynamische Formulare und Inhalte in Aktion Resümee
14. Vielen Dank für Ihre Aufmerksamkeit! Patrick Jahr @jahr_patrick patrick.jahr@thinktecture.com