Blazor Server Kompaktkurs

Ziele

In diesem Seminar zur Full-Stack-Webprogrammierung mit Blazor WebAssembly und ASP.NET Core Web API trainieren Sie, wie Sie UI-Apps mit denselben komponentenbasierten Mustern erstellen, die von Bibliotheken wie Angular und React populär gemacht wurden, nur eben mit C#. Den Beteiligten wird auch beigebracht, wie die serverseitige Codierung mit ASP.NET Core Web APIs und SignalR, um Daten für ihre Blazor WebAssembly-Anwendungen bereitgestellt werden.

Zielgruppe

Entwickler aus dem .NET Bereich

Voraussetzungen

• Erfahrung in C#
• HTML-, CSS- und JavaScript-Entwicklungserfahrung
• Erfahrung in ASP.NET Core

Agenda

Einführung

• Was ist Blazor?
• Blazor-Hosting-Modelle
• Blazor Server vs. Blazor WebAssembly?
• Server-Model
  • Server-Model vs. JavaScript
  • UI-Server-Ausführung und Web-Sockets
  • Skalierbarkeit und Deployment
• WebAssembly Model
  • Was ist WebAssembly?
  • Browser-Kompatibilität
  • Web Assembly Model vs. JavaScript
  • Wie läuft .NET Core / C# in einem Webbrowser?
  • Skalierbarkeit und Deployment

Blazor Server-Anwendung

• Projekt-Vorlage
• Anwendung erstellen
• Blazor Server hosten
• Konfiguration
• Injektion von Abhängigkeiten
• Umgebungen
• Logging
• Fehlerbehandlung
• Fehlersuche

Razor-Komponenten und Datenbindung

• Was ist eine Komponente?
• Erstellen eines Datenmodells
• Binden des Datenmodells an das HTML
• Übergabe beliebiger Attribute
• Events verarbeiten
• Manuelles Auslösen von Status-Updates und Re-Rendering

Razor-Komponenten zusammensetzen

• Zerlegen einer Komponente in kleinere Komponenten
• Einseitige Datenanbindung
• Zwei-Wege-Datenbindung
• Übergabe von Daten von einer übergeordneten Komponente an eine untergeordnete Komponente über Parameter
• Übergabe von Daten von einer Child-Komponente an eine Parent-Komponente mit Hilfe von Event-Callbacks
• Verwendung von Schlüsseln zur Optimierung der Leistung
• Verwendung von Refs für den Zugriff auf DOM-Elemente
• Razor-Komponentenbibliotheken
• Entwurfsmuster für Razor-Komponenten
  • Parameter sind unveränderlich
  • Zustand aufheben
  • Zustand verwalten

Razor-Komponenten-Formulare

• Was ist der Zweck eines Formulars?
• Sammeln von Daten mit einem Formular, Eingabe-, Auswahl- und Textarea-Elementen
• Erkunden Sie das Formular-Element Zwei-Daten-Bindung
• Formulare mit der Blazor Edit Form Razor Component erstellen
• Das Konzept des Bearbeitungskontextes kennenlernen
• Verwendung der spezialisierten Edit Form Controls
  • Eingabe von Text
  • Eingabe TextArea
  • Eingabe Auswahl
  • Eingabe Nummer
  • Eingabe Checkbox
  • Eingabe Datum
• Validierung auf das Formular anwenden
• Ausschmücken des Ansichtsmodells mit Validierungsattributen
• Benutzerdefinierte Validierungsattribute codieren

Razor-Komponentenseiten

• Was ist das Seitenmodell?
• Unterschiede zwischen Razor Pages und Razor Components
• Verwendung einer Razor-Komponente als Seite
• Untersuchen der Router-Komponente
• Konfigurieren des Seiten-Routings
• Routen zu Komponenten aus mehreren Assemblies
• Verwenden von Routing-Parametern
• Verwenden der Abfragezeichenfolge
• Anwenden der Autorisierung auf eine Razor-Komponentenseite
• Verwenden der Autorisierung innerhalb des Komponentenbaums

Blazorise

• Was ist Blazorise?
• Konfigurieren von Blazorise für Blazor Server
• CSS für Blazorise konfigurieren
• Blazorise Theming
• Komponenten
• Forms
• DataGrid

Server-Daten verwenden

• Verbindung zu SQL Server mit EF Core
• EF Core in einer Blazor Server-Anwendung verwenden

Security und Identity

• Vergleich der Authentifizierung zwischen Blazor Server und ASP.NET Core
• Vergleich der Autorisierung zwischen Blazor Server und ASP.NET Core
• Anmeldeformular in Blazor Server implementieren
• Integration mit ASP.NET Core's HttpContext.User
• Handhabung der Autorisierung in Blazor Server
• Threat Mitigation (Bedrohungsabwehr)

Interagieren mit JavaScript

• Was ist die JavaScript-Interop?
• Wann wird JavaScript benötigt?
• Synchrone vs. Asynchrone Aufrufe
• JavaScript Funktion aus einer Komponente aufrufen
• C#-Code von JavaScript aus aufrufen
• Aufruf von statischen Methoden
• Aufruf von Instanzmethoden
• Organisieren von JavaScript-Code innerhalb einer Blazor Server App
• JavaScript-Ökosystem erforschen
  • Clientseitige Bibliotheken
  • NPM und Yarn
  • Webpack
  • Nützliche Bibliotheken

Unit-Tests

• Was ist Unit-Testing?
• Prinzipien des Unit-Testens
  • Definieren einer Unit
  • Aufbau/Abbau
  • Testen in Isolation
  • Festlegen, was getestet werden soll
  • Code-Abdeckung
  • Test-Frameworks
  • Stubs, Mocks und Spione
• xUnit
  • Was ist xUnit?
  • Test-Framework
  • Fakten vs. Theorie
  • Assertions
  • Integration mit Visual Studio
• Razor-Komponenten
  • Was sollte bei einer Razor-Komponente getestet werden?
  • Was ist bUnit?
  • Verwendung von bUnit mit xUnit
  • Einrichten und Definieren von Komponenten unter Tests in C# oder Razor-Syntax
  • Überprüfen des Ergebnisses mit semantischem HTML-Vergleicher
  • Mit Komponenten interagieren und diese inspizieren
  • Auslösen von Event-Handlern
  • Kaskadierte Werte bereitstellen
  • Dienste einbinden
  • IJsRuntime mocken
  • Snapshot-Tests durchführen

Blazor-Web-Assembly-Demo

• Ein Blazor-Web-Assembly-Projekt erstellen
• Blazor Web Assembly mit Blazor Server vergleichen/gegenüberstellen
• Erkunden der Web Assembly und ASP.NET Core Server Architektur
• Demonstrieren, wie eine Komponente aus dem Blazor Server-Projekt mit dem Blazor Web Assembly-Projekt verwendet werden kann