Schulung · Workshop · Coaching · Beratung

.NET Blazor WebAssembly Schulung: Client-Apps und PWAs

.NET Blazor WebAssembly Programmierung – Grundlagen für Client-Apps und PWAs

Dauer: ab 1 Tag | Preis: ab 900 EUR (Netto) | Termin: Ganztägig + halbtägig

Blazor WebAssembly führt Ihre C#-Anwendung vollständig im Browser aus: Sie lernen, eine Single-Page-App oder PWA zu bauen, sie sicher an eine Web API anzubinden und als statische Website bereitzustellen.

C# komplett im Browser: was Blazor WebAssembly kann und wo seine Grenzen liegen

Blazor WebAssembly lädt die .NET-Laufzeit und Ihre Assemblys in den Browser und führt die Anwendung dort aus – ohne Server-Rendering und ohne dauerhafte Verbindung. Das Ergebnis ist eine Single-Page-App aus statischen Dateien, die sich auf jedem Webserver, in Azure Static Web Apps oder auf GitHub Pages ausliefern lässt, offline als PWA funktioniert und ihre Daten über eine Web API bezieht. Der Preis: ein größerer erster Download, und alles im Client ist für Nutzer:innen einsehbar, auch Konfiguration und Tokens.

Das Seminar beginnt mit den Projektoptionen der Standalone-Vorlage und ordnet die frühere ASP.NET-Core-gehostete Variante ein, die in vielen Bestandsprojekten noch steckt. Danach geht es um Razor-Komponenten mit CSS-Isolation, Formularvalidierung, kaskadierende Werte und Navigation, um Konfiguration je Umgebung und Lokalisierung. Der größte Block gilt der API-Anbindung: HttpClient, CORS, CRUD-Operationen, Anmeldung über OpenID Connect oder Microsoft Entra ID und Tokens für geschützte Endpunkte. Zum Abschluss optimieren Sie Ladezeit mit Trimming, AOT-Kompilierung und Lazy Loading und veröffentlichen die App. Render-Modi und Server-Rendering der Blazor Web App behandelt das Seminar „.NET Blazor Programmierung“.

Fordert man in VS Code von Copilot eine neue Blazor-WebAssembly-Funktion an, liefert der Agent oft Code, der eigentlich auf den Server gehört: direkte Datenbankzugriffe, Geheimnisse in wwwroot/appsettings.json oder Bibliotheken, die im Browser nicht laufen. Wir richten den Agenten so ein, dass er nach jeder Änderung veröffentlicht, Trimming-Warnungen und die Größe des Downloads meldet und die App mit Playwright gegen den statisch ausgelieferten Publish-Ordner testet – erst dann gilt eine Änderung als fertig.

Sie brauchen C#-Grundkenntnisse und ein Grundverständnis von HTTP und REST. Eine kleine ASP.NET Core Minimal API als Gegenstück stellen wir bereit, damit sich die Übungen auf den Client konzentrieren; wer eine eigene API mitbringt, bindet stattdessen diese an.

Bei Blazor WebAssembly vergessen Teams gern, dass der Browser kein vertrauenswürdiger Ort ist. Jede DLL, jede Konfigurationsdatei und jedes Token lässt sich mit den Entwicklertools auslesen. Eine gute WebAssembly-App ist deshalb ein dünner, schneller Client – Geschäftsregeln, Berechtigungen und Geheimnisse bleiben in der API. Wer diese Linie hält, bekommt eine Anwendung, die sich als statische Website für ein paar Euro im Monat betreiben lässt und trotzdem sicher ist.
Themen und Inhalte für Ihre Beratung, Coaching, Workshop, Training, Schulung und Weiterbildung:

.NET Blazor WebAssembly Programmierung – Grundlagen für Client-Apps und PWAs

Blazor WebAssembly – Einführung
  • Vorteile von Blazor WebAssembly: Offline-Fähigkeit, statisches Hosting, C# im Browser
  • Grenzen: Download-Größe, Startzeit, Sandbox des Browsers, kein vertraulicher Code im Client
  • Optionen beim Anlegen mit dotnet new blazorwasm: PWA, Authentifizierung, Beispielseiten
  • Bestandsprojekte mit ASP.NET-Core-gehosteter Vorlage verstehen und umstellen
  • Systemeinrichtung: .NET-10-SDK, Workload wasm-tools, Browser-Debugging
  • Was im Browser passiert: .NET-WebAssembly-Laufzeit, Webcil-Dateien, Bootvorgang
Razor-Komponenten in Blazor WebAssembly
  • CSS-Isolierung mit .razor.css, Scope-Attributen und ::deep
  • Formular-Validierung mit EditForm, DataAnnotationsValidator und eigenen Regeln
  • Kaskadierte Werte mit CascadingValue, [CascadingParameter] und Root-Level-Werten
  • Vorgefertigte Komponenten: InputDate, InputFile, QuickGrid, Virtualize
  • Navigations-Manager: Navigation per Code, Query-Parameter und NavigationLock
  • Zustand im Client halten: Zustandscontainer und localStorage über JS-Interop
Konfiguration in Blazor WebAssembly
  • wwwroot/appsettings.json lesen – und warum dort keine Geheimnisse stehen dürfen
  • Verschiedene Umgebungen: appsettings.{Environment}.json, Umgebung per WasmApplicationEnvironmentName festlegen
  • Konfiguration zur Laufzeit vom Server laden statt sie in den Build zu backen
  • Globalisierung und Lokalisierung: IStringLocalizer, .resx, Kulturauswahl
  • Kulturdaten laden oder InvariantGlobalization für kleinere Downloads
API-Integration und HttpClient
  • HttpClient einrichten: BaseAddress, benannte Clients und IHttpClientFactory
  • Ursprungsübergreifende Ressourcennutzung (CORS) in der ASP.NET-Core-API konfigurieren
  • CRUD-Operationen mit GetFromJsonAsync, PostAsJsonAsync, PutAsJsonAsync
  • HttpRequestMessage für Header, Browser-Credentials und Cache-Optionen; Response-Streaming ab .NET 10 Standard
  • Fehler- und Statuscodes der API auswerten, ProblemDetails im Client anzeigen
  • Gemeinsame DTO-Bibliothek für Client und API, JSON-Quellgenerator für Trimming
Authentifizierung in Blazor WebAssembly
  • Authentifizierung mit individuellen Konten über einen OpenID-Connect-Anbieter
  • Statt gehosteter Vorlage: ASP.NET Core Identity mit MapIdentityApi als Backend
  • Authentifizierung mit Microsoft Identity: Entra ID über AddMsalAuthentication
  • Access Tokens an API-Aufrufe hängen: AuthorizationMessageHandler und Scopes
  • Backend-for-Frontend-Muster: Cookies statt Tokens im Browser
Logging und Fehlerbehandlung
  • Wie Logging in Blazor WebAssembly funktioniert: ILogger und Browserkonsole
  • Logging mit einem Drittanbieter wie Serilog, Logs an den Server senden
  • Fehlerbehandlung mit ErrorBoundary und der Fehleranzeige #blazor-error-ui
  • Unbehandelte Ausnahmen und fehlgeschlagene API-Aufrufe zentral abfangen
Ladezeit und Performance
  • Trimming und Trimming-Warnungen verstehen, Download-Größe messen
  • AOT-Kompilierung mit RunAOTCompilation: schnellere Ausführung, größerer Download
  • Lazy Loading von Assemblys mit LazyAssemblyLoader je Route
  • Komprimierung, Caching und Ladeanzeige während des Starts
PWA und Bereitstellung
  • Progressive Web App: Manifest, Service Worker, Installation und Updates
  • Veröffentlichen der Anwendung mit dotnet publish: Ausgabe als statische Dateien
  • Veröffentlichen auf Windows IIS: URL Rewrite, web.config und MIME-Typen
  • Statisches Hosting auf Azure Static Web Apps, GitHub Pages oder nginx mit SPA-Fallback
  • Build und Bereitstellung per GitHub Actions oder Azure Pipelines automatisieren
Blazor WebAssembly mit Copilot in VS Code
  • Regeldatei für den Agenten: kein Datenbankzugriff, keine Geheimnisse im Blazor-WebAssembly-Client
  • Nach jeder Änderung dotnet publish ausführen und Trimming-Warnungen zurückmelden lassen
  • Download-Budget festlegen: der Agent vergleicht die Größe von _framework vor und nach der Änderung
  • Playwright-Tests gegen den statisch ausgelieferten Publish-Ordner statt gegen dotnet watch
  • Vorgeschlagene NuGet-Pakete auf Browser-Tauglichkeit und Trimming-Kompatibilität prüfen
Praxisprojekt: Reisekostenerfassung als PWA
  • Belege offline erfassen, lokal zwischenspeichern und bei Verbindung an die API senden
  • Anmeldung über Entra ID, Freigabe durch Vorgesetzte über geschützten API-Endpunkt
  • Lokalisierte Oberfläche in Deutsch und Englisch mit Währungs- und Datumsformaten
  • Bereitstellung als statische Website mit Lazy Loading für das Auswertungsmodul
Lernziele
  • Sie entscheiden, ob eine Anwendung als Blazor-WebAssembly-Client oder als Blazor Web App umgesetzt wird
  • Sie binden eine Web API mit HttpClient, CORS und Tokens sicher an
  • Sie konfigurieren die App je Umgebung und lokalisieren sie, ohne Geheimnisse auszuliefern
  • Sie reduzieren Download und Startzeit mit Trimming, AOT und Lazy Loading
  • Sie veröffentlichen die App als PWA auf IIS oder einem statischen Hosting-Dienst
Zielgruppe
  • C#-Entwickler:innen, die Single-Page-Apps oder PWAs mit .NET statt JavaScript bauen
  • Teams mit ASP.NET-Core-gehosteten Blazor-WebAssembly-Projekten vor der Umstellung
  • Backend-Entwickler:innen, die zu ihrer Web API einen eigenen .NET-Client bereitstellen

*) Die Inhalte werden individuell abgestimmt und mit Praxisbeispielen abgerundet.

Ein Symbol für einen Kalender.

Offene Termine

Kostenlose Reservierung
Ein Symbol für Angebot erhalten.

Unser Angebot

Sind Sie auf der Suche nach einer Veranstaltung, die genau Ihrem Bedarf entspricht? Einer Veranstaltung, welche nur Inhalte vermittelt, die Sie selbst gewählt haben und speziell auf Ihr Unternehmen zugeschnitten ist? Dann sind Sie bei uns richtig!

Dauer

Ein Symbol für Dauer.
ab 1 Tag (8 UE)

Die Dauer richtet sich nach Ihren Vorstellungen und inhaltlichen Wünschen. Sie bekommen genau das, was Sie brauchen.

Preis

Ein Symbol für Preis.
ab 900 EUR (Nettopreis)
ab 1.071 EUR (Bruttopreis)

Die Preise verstehen sich bei Unternehmern gemäß § 14 BGB zzgl. MwSt. Der dargestellte Ab-Preis gilt für firmeninterne Veranstaltungen und entspricht dem niedrigsten Gesamtpreis für Veranstaltungen mit bis zu drei (3) Teilnehmenden.

Termin

Ein Symbol für einen Kalender.
Ganztägig + halbtägig
nach Vereinbarung

Ihr Wunschtermin wird bei der Planung berücksichtigt. Die Veranstaltung findet ganztägig + halbtägig zu flexiblen Zeiten statt.

Ihre Vorteile

Ein Symbol für ein Vorgespräch durchführen.
Persönliches Vorgespräch
Ein Symbol für die individuelle Vorbereitung.
Individuelle Vorbereitung
Ein Symbol für Experten aus der Praxis.
Experten aus der Praxis
Ein Symbol für ein Zertifikat.
Inklusive Zertifikat

Unsere Garantien

1. Relevanz-Garantie

Wir passen den Inhalt spezifisch an die Bedürfnisse jedes Teilnehmers an. Irrelevante Themen werden ausgespart, um den größtmöglichen Nutzen zu garantieren.

2. Qualitäts-Garantie

Durch regelmäßiges Feedback optimieren wir unsere Schulungen kontinuierlich und garantieren Ihnen ein Lernerlebnis der Extraklasse.

3. Zufriedenheits-Garantie

Unsere Zufriedenheitsgarantie spricht für sich – bei Unzufriedenheit entstehen Ihnen keine Kosten.

Wir helfen gerne weiter!

Rufen Sie uns an, schreiben eine E-Mail oder nutzen das Kontaktformular.

Jetzt anfragen
Einige Unternehmen, für die wir tätig waren

Aareon Deutschland GmbH

QVC

Stadtwerke Flensburg GmbH

Teilnehmer

Feedback

Herr Hecker ist sehr gut auf individuelle Wünsche, Fragen und Anregungen eingegangen. Eine sehr informative, interessante und gelungene Veranstaltung.
Teilnehmer

Feedback

Herr Hecker hat das Thema sehr anschaulich dargestellt und ist auf alle Fragen eingegangen. Ich fühle mich jetzt gut vorbereitet, um durchzustarten.
Teilnehmer

Feedback

Die gelassene, professionelle Art hat mir gut gefallen. Kompetent, engagiert, professionell. Gute Beispiele, sympathisches Auftreten. Eigene Themenideen wurden aufgegriffen.
Unser Angebot für Ihre firmeninterne Beratung, Coaching, Workshop, Training und Weiterbildung

Lösungen für Ihren Bedarf an Coaching, Workshop, Training, Schulung und Weiterbildung

Profitieren Sie von unserer langjährigen Expertise in der beruflichen Weiterbildung, modernen Lernmethoden und einem Portfolio von über 600 IT-, Online- und Digital-Beratungsleistungen.
Selbstverständlich lassen sich die einzelnen Themen kombinieren. So erhalten Sie genau die Weiterbildung, die Sie wünschen und brauchen - als Coaching, Workshop, Training, Schulung und Weiterbildung!

✓
Ein Symbol für eine einzelne Person.

Für eine Person

Training & Coaching für Einzelpersonen

  • Passgenaue Inhalte auf den einzelnen Teilnehmer zugeschnitten
  • Ein sehr effektives Format, das schnell Ergebnisse bringt
  • Individuelles Training und Coaching motivieren und wirken
Jetzt anfragen
✓
Ein Symbol für eine Gruppe von Personen.

Für eine Gruppe

Training & Workshops für Teams und Abteilungen

  • Bedarfsgerechte Inhalte auf die Herausforderung der Praxis zugeschnitten
  • Konsequente Praxisorientierung, modernste Techniken und Tools
  • Neue Fähigkeiten und Kenntnisse nachhaltig in den Arbeitsalltag integrieren
Jetzt anfragen
✓
Ein Symbol für ein Unternehmen.

Für eine Firma

Training-Komplett-Lösungen für Ihr Unternehmen‍

  • Ganzheitliche Konzepte für Ihre Mitarbeiterentwicklung
  • Individueller Skill-Katalog zur Erweiterung Ihres internen Weiterbildungsangebots
  • Nachhaltige Personalentwicklung realisieren
Jetzt anfragen

Anfrage für eine unverbindliche + kostenlose Erstberatung zum Thema

.NET Blazor WebAssembly Programmierung - Beratung, Coaching, Workshop, Training, Schulung und Weiterbildung

Wir freuen uns über Ihre Anfrage und antworten so schnell es geht!

Ich interessiere mich für den Termin:

Termin anfragen

Das Angebot von "HECKER CONSULTING" richtet sich ausschließlich an Unternehmen und Behörden (iSv § 14 BGB). Verbraucher (§ 13 BGB) sind vom Vertragsschluss ausgeschlossen. Mit Absendung der Anfrage bestätigt der Anfragende, dass er nicht als Verbraucher, sondern in gewerblicher Tätigkeit handelt. § 312i Abs. 1 S. 1 Nr. 1-3 und S. 2 BGB (Pflichten im elektronischen Geschäftsverkehr) finden keine Anwendung.

Vielen Dank, Ihre Nachricht wurde empfangen!
Beim Absenden des Formulars ist etwas schiefgelaufen.
Beratung, Coaching, Workshop, Training, Schulung

Ähnliche Leistungen, die Sie interessieren könnten.

Wir erweitern ständig unser Beratungsportfolio. Über 600 IT-, Online-, Digital-Beratungsleistungen haben wir für Sie im Programm. Selbstverständlich lassen sich die einzelnen Themen kombinieren. So erhalten Sie genau die Beratung, die Sie wünschen und brauchen - als Coaching, Workshop, Training, Schulung und Weiterbildung!

Mehr IT-, Online-, Digital-Beratungsleistungen anzeigen >>
Nach oben