Einführung in Blazor WebAssembly

Ziele

In dieser Schulung "Einführung in Blazor WebAssembly" lernen Sie, wie man UI-Apps erstellt, die selben komponenten basierte Pattern verwenden, die von Bibliotheken wie Angular und React populär gemacht wurden, jedoch unter Verwendung von C#-Programmierung. Sie lernen, wie sie unabhängiger von JavaScript-UI-Bibliotheken und -Frameworks entwickeln und JavaScript nur bei Bedarf und nicht als Grundlage ihrer clientseitigen Anwendungen verwenden. In diesem Kurs wird auch ein ASP.NET Core-Backend verwendet.

Der Kurs wird mit der aktuellen Version durchgeführt, andere Versionen sind nach Absprache möglich.

Zielgruppe

• Entwickler

Voraussetzungen

Erfahrung in:

C# Programmierung, HTML, CSS und JavaScript Programmierung

Agenda

Überblick und Einführung

• Was ist Blazor?
• Blazor-Hosting-Modelle
• Was ist WebAssembly?
• Unteschied Blazor Server versus Blazor WebAssembly?
• Browser-Kompatibilität
• Web-Versammlung vs. JavaScript
• Wie wird .NET Core / C# in einem Webbrowser ausgeführt?

Blazor WebAssembly-Anwendung

• Projekt-Vorlage
• Neue Anwendung erstellen
• Hosten von Blazor WebAssembly mit einem ASP.NET Core MVC-Server
• Konfiguration
• Abhängigkeits-Injektion
• Umgebungen
• Protokollierung
• Behandlung von Fehlern
• Debugging WebAssembly

Razor Komponenten und Datenbindung

• Was ist eine Komponente?
• Ein Datenmodell erstellen
• Bindung des Datenmodells an das HTML
• Beliebige Attribute übergeben
• Behandlung von Ereignissen
• Manuelle Auslösung von Zustandsaktualisierungen und Re-Rendering

Komponieren von Razorkomponenten

• Zerlegen einer Komponente in kleinere Komponenten
• Einseitige Datenbindung
• Zwei-Wege-Datenbindung
• Daten von einer Elternkomponente an eine Unterkomponente mit Hilfe von Parametern übergeben
• Übergeben von Daten von einer untergeordneten Komponente an eine übergeordnete Komponente unter Verwendung von Ereignis-Rückrufen
• Verwenden Sie Tasten zur Leistungsoptimierung
• Verwenden Sie Refs für den Zugriff auf DOM-Elemente
• Bibliotheken für Razor-Komponenten
• Design Pattern für Razor-Komponenten
  • Parameter sind unveränderlich
  • Zustand aufheben
  • Verwaltung von Zuständen

Forms für Razor-Komponenten

• Was ist der Zweck von Forms?
• Sammeln von Daten mit einem Form, Input, Select und Textarea Element
• Form Element Zwei-Daten-Bindung
• Forms mit der Blazor Edit Form Razor-Komponente erstellen
• Konzept des Bearbeitungskontextes
• Spezielle Steuerelemente zum Bearbeiten von Formularen
  • Input Text
  • Input TextArea
  • Input Select
  • Input Number
  • Input Checkbox
  • Input Date
• Validierung auf das Formular anwenden
• View Model mit Validierungsattributen gestalten
• Code Benutzerdefinierte Validierungsattribute

Razor Component Pages

• Was ist das Page Model?
• Unterschiede zwischen Razor Pages und Razor Components
• Verwenden einer Razor-Components Page
• Router-Komponente
• Konfigurieren des Page-Routing
• Route zu Komponenten aus mehreren Baugruppen
• Route Parameter verwenden
• Querystring verwenden
• Autorisierung einer Razor-Page
• Verwendung der Autorisierung innerhalb des Component Tree

Server-Daten verwenden

• ASP.NET Core MVC Web API
• Was ist ASP.NET Core MVC?
• Was ist eine REST-API?
• Was ist ein API-Controller?
• Injizieren des Http-Clients
• Untersuchung des Http-Clients
• Aufrufen einer REST-API von einer Blazor-Komponente über den HttpClient

Interagieren mit JavaScript

• Was ist die JavaScript-Interop?
• Wann wird JavaScript benötigt?
• Synchrone vs. Asynchrone Calls
• So rufen Sie eine JavaScript-Funktion von einer Komponente auf
• Wie rufe ich C#-Code aus JavaScript auf?
• Aufruf statischer Methoden
• Aufruf von Instanzmethoden
• Organisieren von JavaScript-Code innerhalb einer Blazor WebAssembly-App
• Erkunden Sie das JavaScript-Ökosystem
  • Clientseitige Bibliotheken
  • NPM & Garn
  • Webpack
  • Nützliche Bibliotheken

Unit Testing

• Was sind Unit-Tests?
• Grundsätze von Unit-Tests
  • Definieren von einer Unit
  • Setup/Teardown
  • Isoliertes-Testing
  • Definieren, was zu testen ist
  • Code-Abdeckung
  • Test-Frameworks
  • Stubs, Mocks und Spies
• xUnit
  
  • Was ist xUnit?
  • Test-Framework
  • Fakten vs. Theorie
  • Assertions
  • Integration in Visual Studio
• Razor-Komponenten
  • Was sollte an einer Razorkomponente getestet werden?
  • Was ist bUnit?
  • Verwendung von bUnit mit xUnit
  • Setup von getesteten Komponenten in C#- oder Razor-Syntax
  • Verifizieren von Seitenausgaben mit semantischem HTML vergleich
  • Mit Komponenten interagieren und untersuchen
  • Event handler auslösen
  • Bereitstellen von kaskadierenden Werten
  • Inject services
  • Mock IJs-Laufzeit
  • Durchführen von Snapshot-Tests