Einführung in Blazor WebAssembly

Ü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

In dieser 3-tägigen Schulung "Einführung in Blazor WebAssembly" erhalten Sie eine umfassende Einführung in die Erstellung von UI-Apps mit dem Blazor-Framework. Blazor ermöglicht es Ihnen, Komponenten basierte Pattern zu verwenden, die auch in beliebten Bibliotheken wie Angular und React zum Einsatz kommen, jedoch mit der Verwendung von C#-Programmierung. Der Kurs konzentriert sich darauf, unabhängiger von JavaScript-UI-Bibliotheken und -Frameworks zu entwickeln und JavaScript nur bei Bedarf und nicht als Grundlage Ihrer clientseitigen Anwendungen zu verwenden.

Sie lernen, wie Sie mit Blazor WebAssembly ansprechende UI-Apps erstellen und dabei die Vorteile der C#-Programmierung nutzen. Der Kurs beinhaltet auch die Verwendung eines ASP.NET Core-Backends, um eine vollständige Lösung für die Entwicklung von Webanwendungen bereitzustellen.

Nach Abschluss des Kurses werden Sie über solide Kenntnisse und Fähigkeiten verfügen, um mit Blazor WebAssembly eigenständige und leistungsstarke UI-Apps zu entwickeln. Dieser Kurs richtet sich an Entwickler und Softwareingenieure, die bereits über grundlegende Kenntnisse in der Webentwicklung und C# verfügen und ihr Wissen und ihre Fähigkeiten in der Entwicklung von modernen Webanwendungen mit Blazor erweitern möchten.

• C# Programmierung
• HTML
• CSS
• JavaScript Programmierung

Die Schulung bietet Ihnen eine ausgewogene Mischung aus Theorie und Praxis in einer erstklassigen Lernumgebung. Profitieren Sie vom direkten Austausch mit unseren projekterfahrenen Trainern und anderen Teilnehmern, um Ihren Lernerfolg zu maximieren.

• Entwickler