Einführung in Blazor WebAssembly

18 Nov 2022 - Matthias Voigt

Blazor WebAssembly ist eine spannende neue Technologie von Microsoft, die es ermöglicht, Single-Page-Anwendungen (SPA) vollständig in C# zu schreiben und im Browser auszuführen. In diesem Artikel gebe ich eine Einführung in Blazor WebAssembly, erkläre seine Vorteile und zeige, wie man eine einfache Blazor WebAssembly-Anwendung erstellt.

Was ist Blazor WebAssembly?

Blazor WebAssembly ist ein Framework zur Erstellung von interaktiven Webanwendungen mit .NET und C#. Es verwendet WebAssembly, um .NET-Code im Browser auszuführen, was bedeutet, dass Entwickler ihre gesamte Anwendungslogik in C# schreiben können, ohne JavaScript verwenden zu müssen.

Vorteile von Blazor WebAssembly

Einheitliche Sprache: Da sowohl Client- als auch Servercode in C# geschrieben werden, können Entwickler eine einheitliche Sprache und Codebasis verwenden.
Wiederverwendbarkeit von .NET-Bibliotheken: Entwickler können bestehende .NET-Bibliotheken und -Tools wiederverwenden, was die Entwicklung beschleunigt und vereinfacht.
Leistung: WebAssembly bietet eine nahezu native Ausführungsgeschwindigkeit im Browser.
Sicherheit: Blazor WebAssembly läuft in einer sicheren Sandbox-Umgebung, ähnlich wie JavaScript.

Einrichtung einer Blazor WebAssembly-Anwendung

Schritt 1: .NET SDK installieren

Stelle sicher, dass das .NET SDK 3.1 oder höher installiert ist. Du kannst es von der offiziellen .NET-Website herunterladen.

Schritt 2: Blazor WebAssembly-Projekt erstellen

Erstelle ein neues Blazor WebAssembly-Projekt mit dem .NET CLI:

dotnet new blazorwasm -o BlazorApp
cd BlazorApp
code .

Schritt 3: Projektstruktur verstehen

Ein Blazor WebAssembly-Projekt besteht aus folgenden Hauptkomponenten:

Program.cs: Der Einstiegspunkt der Anwendung.
App.razor: Die Hauptkomponente der Anwendung.
wwwroot: Enthält statische Dateien wie HTML, CSS und JavaScript.
Pages: Enthält die Razor-Komponenten (Seiten) der Anwendung.

Schritt 4: Eine einfache Komponente erstellen

Erstelle eine neue Razor-Komponente namens HelloWorld.razor im Pages-Verzeichnis:

@page "/hello"
<h3>Hello, World!</h3>

<p>Welcome to your new Blazor WebAssembly app.</p>

Füge die neue Komponente zur Navigation in NavMenu.razor hinzu:

<li class="nav-item px-3">
    <NavLink class="nav-link" href="hello">
        <span class="oi oi-plus" aria-hidden="true"></span> Hello World
    </NavLink>
</li>

Schritt 5: Anwendung ausführen

Führe die Anwendung mit dem .NET CLI-Befehl dotnet run aus und öffne https://localhost:5001 in deinem Browser. Du solltest die neue “Hello World”-Seite in der Navigation sehen und darauf zugreifen können.

Fazit

Blazor WebAssembly bietet eine aufregende Möglichkeit, interaktive Webanwendungen mit .NET und C# zu erstellen. Mit seinen zahlreichen Vorteilen und der einfachen Einrichtung ist es eine ausgezeichnete Wahl für Entwickler, die die Leistungsfähigkeit und Flexibilität von C# im Browser nutzen möchten. Es lohnt sich, die Möglichkeiten von Blazor WebAssembly in zukünftigen Projekten zu erkunden und zu nutzen.

Für weitere Details und eine ausführliche Anleitung besuche die offizielle Microsoft-Dokumentation.