Webprogrammierung mit Blazor WebAssembly, Teil 1: Web-API-Aufrufe und Rendering

Inhaltsverzeichnis

Im Gegensatz zu Blazor Server führt die WebAssembly-Variante von ASP.NET Core Blazor den C#-Programmcode im Webbrowser als echte Single-Page-Webanwendung aus. Eine Blazor WebAssembly kann somit im Gegensatz zu der Blazor-Server-Variante auch offline arbeiten – sie muss den Server nur kontaktieren, um Daten zu laden und zu persistieren. Abbildung 1 zeigt den Vergleich der beiden Architekturen. Details zu den Architekturunterschieden gab es im Artikel "Alternativen zu JavaScript?".

Blazor-Tutorial

• Teil 1: Web API-Aufrufe und Rendern von Daten
• Teil 2: Eingabesteuerelemente und JavaScript-Interoperabilität
• Teil 3: Authentifizierung und Autorisierung
• Teil 4: Zustandsverwaltung und Nachladen von Modulen
• Teil 5: Bidirektionale Kommunikation und Benachrichtigungen

Voraussetzungen

Die erste Version Blazor WebAssembly ist unter der Versionsnummer 3.2 am 19. Mai 2020 erschienen. Das Tutorial behandelt schon den verbesserten Nachfolger, der die Versionsnummer 5.0 trägt. Dazu benötigt man folgende Software:

• .NET 5.0 Software Development Kit (SDK), mindestens Version "Release Candidate 2" (nach der Installation zur Kontrolle an der Kommandozeile dotnet --version eingeben).
• Visual Studio 2019, mindestens Version 16.8.

Grundlage für das Tutorial ist der Release Candidate 2 von .NET 5.0. Auch wenn Microsoft dafür eine "Go-Live"-Lizenz für den produktiven Einsatz vergeben hat, ist es möglich, dass sich APIs noch ändern und der hier dargestellte Programmcode mit Folgeversionen nicht ohne Modifikationen läuft.

Während das .NET 5.0 SDK dauerhaft kostenfrei ist, gibt es bei Visual Studio nur die Preview-Versionen komplett kostenfrei. Von der stabilen Version ist nur die Community-Version kostenlos. Diese ist technisch für die Tutorial-Artikel hinreichend, unterliegt aber der rechtlichen Einschränkung. Das Erstellen von Open-Source-Anwendungen sowie der Einsatz für Online- oder Präsenzschulungen oder für akademische Forschungszwecke sind aber auch in größeren Unternehmen erlaubt. Das Tutorial könnte man als "Forschung" verstehen. Wer keine Preview-Versionen installieren möchte, kann auch die stabile Version 16.7 von Visual Studio mit .NET Core 3.1 SDK nutzen. Auf wenige, dann nicht verfügbare Funktionen wird das Tutorial hinweisen. Inhaltlich setzt es voraus, dass Entwickler mit .NET Core, C#, Web-APIs beziehungsweise REST-Diensten, HTML, CSS und JavaScript vertraut sind.

Mehr zu .NET 5.0

betterCode() präsentiert: .NET 5.0 – Das Online-Event am 3. Dezember 2020

Das können Sie lernen:

• Von .NET Framework über .NET Core zu .NET 5.0: Was bedeutet das für die Migration, und wie groß sind die Aufwände?
• Was ist neu in .NET 5.0?
• Neue Features: ASP.NET Core 5.0 und Blazor 5.0 kennen lernen
• Die wichtigsten Sprachneuerungen in C# 9
• Mobile Entwicklung mit .NET 5
• OR-Mapping mit Entity Framework Core 5.0
• WinUI 3 als Alternative zu WPF und UWP
• Ausblick auf .NET 6.0

Fallbeispiel "MiracleList"

Im Rahmen eines dreiteiligen iX-Tutorials (siehe [1], [2] und [3]) ist 2017 die Single-Page-Webanwendung "MiracleList" zur Aufgabenverwaltung mit TypeScript, Angular und Twitter Bootstrap sowie diversen frei verfügbaren Steuerelementen entstanden. "MiracleList" ist angelehnt die Webanwendung und App "WunderList", die die Firma Microsoft 2015 für über 100 Millionen Dollar kaufte und dann 2020 zugunsten von "Microsoft ToDo" beerdigte.

Dieses Tutorial wird nun die gleiche Webanwendung mit ASP.NET Core Blazor WebAssembly nachprogrammieren. Das Ergebnis zeigt Abbildung 2, man kann es sich live im Internet ansehen. Den Quellcode (Ausgangszustand, Zwischenstände und Endstand jeweils in Branches) finden Leser auf GitHub.

MiracleList besitzt Aufgabenkategorien (s. links in Abb. 2), eine Liste von Aufgaben in jeder Kategorie (Mitte) und einen Aufgabenbearbeitungsbereich rechts, der aber nur fallweise eingeblendet wird.

Das Tutorial wird auf das in der Cloud vorhandene Backend zugreifen. Um das nutzen zu können, müssen Anwender dort eine "Client ID" beantragen.

Microsoft liefert im .NET SDK jeweils eine Projektvorlage für Blazor Server und Blazor WebAssembly mit. Diese Vorlagen kann man über die Kommandozeile (dotnet new) oder Visual Studio verwenden. Das Tutorial soll aber nicht mit dieser Projektvorlage beginnen, sondern mit einer eigens dafür erstellten, die Leser auf GitHub herunterladen können. Der Vorteil ist, dass hier die notwendigen Gestaltungselemente (CSS, Grafiken) schon eingebunden und alle nicht erforderlichen Beispiele aus der Standardprojektvorlage entfernt sind. Das wären sonst viele einzelne, fehleranfällige Schritte.

Anwender öffnen die Datei MiracleList.sln über File | Open | Project/Solution in Visual Studio und sehen dann im Solution Explorer (s. rechts Abb. 3) eine Projektmappe "MiracleList" mit drei Projekten:

• "MiracleListBW" (Target Framework: .NET 5.0): das Blazor-WebAssembly-basierte Frontend
• "MiracleListAPI_Proxy" (.NET Standard 2.0): Proxy-Klassen für das MiracleList-Backend, generiert aus der Open API Specification (OAS) mit NSwagStudio.
• "BO" (.NET Standard 2.0): gemeinsame Geschäftsobjekte, die im Backend und im Frontend zum Einsatz kommen

Wer nicht .NET 5.0, sondern das alte Blazor WebAssembly 3.2 nutzen mag, muss die Projektdatei MiracleListBW32.csproj anstelle von MiracleListBW.csproj in die Projektmappe einbinden.

Nun empfiehlt es sich, die Anwendung zum Test zu übersetzen (Build/Build Solution) und dann zu starten, entweder mit Debug/Start Debugging[/cpas] (Taste F5) oder [caps]View in Browser im Kontextmenü des Projekts. Wenn alles auf dem PC korrekt arbeitet, sieht man die Webanwendung mit zwei Menüpunkten (Abb. 3).

Zu beachten ist, dass WebAssembly grundsätzlich nur in modernen Webbrowser implementiert ist – also nicht im Internet Explorer. Für Softwareentwickler erfordert ein Debugging aus Visual Studio heraus derzeit einen Chromium-basierten Webbrowser, also Google Chrome oder Microsoft Edge der neuesten Generation. Den Browser für das Debugging wählen Entwickler in dem in Abbildung 4 gezeigten Menü in der Visual-Studio-Symbolleiste.

Das gelieferte Vorlagenprojekt ist wie folgt aufgebaut:

• Es gibt einen Ordner wwwroot mit CSS- und Grafikdateien (u. a. Bootstrap und Open Iconic), der statischen Startdatei index.html (mit CSS-basierter Ladeanimation) sowie einem Manifest und einem Service-Worker für eine Progressive Web App (PWA). Zu sehen ist daher in Abbildung 5 am Ende der Chrome-Adressenleiste ein Pluszeichen, um die Anwendung als PWA zu installieren.

• Program.cs und App.razor bilden den Startcode der Anwendung.
• Der Ordner /Shared enthält die Grundstruktur des Layouts mit weißer Kopfzeile inklusive Hamburger-Menü und gelbem Hauptbereich.
• Die beiden Razor Components (.razor-Dateien) finden sich unter /Pages. Index.Razor (realisiert als Template mit Code-Behind-Datei) gibt bisher nur einen statischen Text aus. About.Razor (realisiert als Template mit Inline-Code) liefert die Versionsnummernanzeige, die in Abbildung 5 zu sehen ist.
• Imports.Razor enthält die Einbindungen von Namensräumen mit @using, die für alle Razor-Component-Dateien gelten.