Blazor Server Kompaktkurs

Ziele

In dieser 3-tägigen Schulung "Blazor Server Kompaktkurs" lernen 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#. Die Teilnehmer lernen auch die serverseitige Codierung mit ASP.NET Core Web APIs und SignalR, um Daten für ihre Blazor WebAssembly-Anwendungen bereitzustellen.

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

Open Badge - Ihr digitaler Kompetenznachweis

Durch die erfolgreiche Teilnahme an einem Kurs bei IT-Schulungen.com erlangen Sie nicht nur Fachkenntnisse und Fähigkeiten, sondern bekommen zusätzlich zu Ihrem Teilnahmezertifikat ein Open Badge als digitalen Nachweis Ihrer Kompetenz.

Sie können diesen in Ihrem persönlichen und kostenfreien Mein IT-Schulungen.com Konto abrufen. Ihre verdienten Badges lassen sich problemlos in sozialen Netzwerken integrieren und weitergeben.

Mehr zu den Vorteilen von Badges

Kundenbewertungen

Kurz vor Durchführung