Blazor WebAssembly mit ASP.NET Core WebAPI

Seminarinformationen

Seminar - Ziel

In dieser 5-tägigen Schulung „Blazor WebAssembly mit ASP.NET Core WebAPI“ lernen Sie von Grund auf, wie moderne, performante und skalierbare Webanwendungen mit .NET / C# unter Verwendung von Blazor WebAssembly als clientseitigem Framework und ASP.NET Core WebAPI als Backend umgesetzt werden.

Sie erhalten systematisch einen fundierten Einblick in die Grundlagen, Best Practices und fortgeschrittenen Techniken für die Entwicklung von Single Page Applications (SPA) im .NET-Ökosystem. Dabei stehen sowohl die Frontend- als auch die Backend-Perspektive im Fokus, sodass Sie ein vollständiges Verständnis für saubere Architektur, Sicherheit, Datenhaltung und Kommunikation zwischen Client und Server erlangen.

Neben einem tiefen Verständnis der Blazor-Komponentenarchitektur und deren Möglichkeiten in der modernen Webentwicklung erlernen Sie auch den sicheren und effizienten Aufbau von RESTful APIs mit ASP.NET Core sowie die Anbindung mittels HttpClient. Ergänzend werden relevante Themen wie Datenvalidierung, Fehlerbehandlung, Logging, Authentifizierung und Autorisierung (Identity / Tokens) sowie Interop mit JavaScript behandelt.

Durch praxisnahe Übungen setzen Sie das theoretisch vermittelte Wissen direkt um. Sie entwickeln eigenständig funktionsfähige Prototypen und Beispiele, um die Technologien sicher und nachhaltig in der Praxis einsetzen zu können.

Teilnehmer - Zielgruppe

• Entwickler

Kurs - Voraussetzungen

Für eine optimale Teilnahme am Kurs empfehlen wir folgende Vorkenntnisse:

• Grundkenntnisse der Programmiersprache C#
• Verständnis der objektorientierten Programmierung
• Erste Erfahrungen mit .NET Core / .NET 5+
• Grundwissen zu HTTP und Web-Technologien (HTML, CSS, JS)
• Basiskenntnisse in Visual Studio 2022

Seminardauer

• 5 Tage
• 09:00 Uhr bis 17:00 Uhr

Schulungsunterlagen

• nach Absprache

Seminar-Inhalt / Agenda

Einführung

• Übersicht .NET Core
• Visual Studio 2022
• Neue Funktionen C# 13

ASP.NET Core Anwendungsarchitektur

• Application Startup
• Middleware und die Request-Pipeline
• Service und Dependency-Injection
• NuGet-Pakete
• OpenAPI

Grundlagen REST

• Entwicklung von WebServices
• JSON vs. SOAP
• Prinzipien von RESTful Services
• Richardson Maturity Model
• HATEOAS / Hypermedia
• Request/Response mit HTTP
• Http-Verben GET, POST, PUT, PATCH, DELETE
• HTTP-StatusCodes

Request Routing

• Endpoint Routing
• Templates
• Constraints
• Attributbasiertes Routing
• Cross-Origin Resource Sharing (CORS)

Models

• Objekt-Relationales Mapping
• Entity Framework Core
• DataTransferObjects (DTO)

Controller und Actions

• Responsibilities
• Anforderungen und Konventionen
• Abhängigkeiten
• Action Results
• ApiController-Attribute

Fehlerbehandlung

• Beste Practices
• HTTP-Fehler-Statuscodes

Logging

• Konfiguration
• Serilog

Datenvalidierung

• DataAnnotations
• Benutzerdefinierte Validierungsattribute

Sicherheit

• Authentifizierung / Authorisierung
• ASP.NET Identity
• API Key
• Bearer Tokens

Bereitstellung

• dotnet publish
• IIS

Blazor WebAssembly

• Blazor Server vs. Blazor WebAssembly?
• WebAssembly Model
  • Was ist WebAssembly?
  • Browser-Kompatibilität
  • WebAssembly Model vs. JavaScript
  • Wie läuft .NET Core / C# in einem Webbrowser?
  • Skalierbarkeit und Deployment

Blazor WebAssembly-Anwendung

• Projekt-Vorlage
• Anwendung erstellen
• Konfiguration
• Injektion von Abhängigkeiten
• Umgebungen
• Logging
• Fehlerbehandlung
• Debugging

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 Refs für den Zugriff auf DOM-Elemente

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
• Validierung auf das Formular anwenden
• Ausschmücken des Ansichtsmodells mit Validierungsattributen
• Benutzerdefinierte Validierungsattribute codieren

HttpClient verwenden

• Verbindung zu WebAPI
• Requests / Response mit WebAPI
• HTTP-Operationen GET, POST, PUT, DELETE
• File-Upload

Security und Identity

• Anmeldeformular in Blazor WebAssembly implementieren
• Handhabung der Autorisierung in Blazor WebAssembly

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 WebAssembly App

Weitere Schulungen zu Thema Microsoft .NET