Blazor Server Kompaktkurs

Classroom Schulung | Deutsch | Anspruch

Schulungsdauer: 3 Tage

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

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

Tags

Diese Seite weiterempfehlen