Blazor von Grund auf: Kapitel 2 — Deine erste Blazor-App

· 2 Min. Lesezeit
Blazor .NET Web Development Series
Available in: Deutsch · English · Español · Français · Português · 한국어 · 日本語 · Русский · 中文 · العربية · हिन्दी · Polski · Türkçe · Bahasa Indonesia · Nederlands

Willkommen zu Kapitel 2 von Blazor von Grund auf. Wenn du Kapitel 1 verpasst hast, lies es zuerst, damit das Rendering-Konzept noch frisch ist.

In diesem Kapitel erstellen wir eine neue Blazor-App, starten sie lokal und verstehen die wichtigsten Dateien im Projekt.

Schritt 1: Projekt erstellen

Im Terminal:

dotnet new blazor -o BlazorFromScratch
cd BlazorFromScratch

Damit wird eine .NET 9 Blazor Web App mit Standardstruktur erstellt.

Wenn dein Tool nach einem Interaktivitätsmodell fragt, starte mit Interactive Server. Dieser Modus ist zum Lernen am einfachsten.

Schritt 2: Lokal starten

Starte die App:

dotnet watch

Öffne dann die URL aus dem Terminal (meist https://localhost:5xxx). Du solltest die Standard-App mit Home, Counter und Weather sehen.

Wenn das funktioniert, ist deine Umgebung bereit.

Schritt 3: Projektstruktur verstehen

Diese Dateien und Ordner sind am Anfang wichtig:

  • Program.cs — registriert Services und konfiguriert die HTTP-Pipeline.
  • Components/App.razor — Root-Komponente der App.
  • Components/Routes.razor — Routing für Seiten.
  • Components/Pages/ — routbare Seiten wie Home und Counter.
  • Components/Layout/ — gemeinsames Layout (MainLayout.razor, Navigation).
  • wwwroot/ — statische Assets (CSS, Bilder, Favicon).
  • appsettings.json — Konfigurationswerte.

Du musst noch nicht alles verstehen. Für jetzt reicht es, den Ort von UI und Startkonfiguration zu kennen.

Schritt 4: Erste Änderung

Öffne Components/Pages/Home.razor und ersetze den Inhalt durch:

@page "/"

<PageTitle>Blazor von Grund auf</PageTitle>

<h1>Blazor von Grund auf</h1>
<p>Kapitel 2 läuft lokal.</p>

Datei speichern und Browser aktualisieren. Mit dotnet watch wird sofort neu geladen.

Diese kleine Änderung bestätigt den gesamten Ablauf: ändern -> bauen -> rendern.

Schritt 5: Program.cs einmal lesen

Du musst es nicht auswendig lernen, aber diese Zeilen solltest du erkennen:

  • AddRazorComponents() aktiviert Razor-Komponenten.
  • AddInteractiveServerComponents() aktiviert interaktive Server-Komponenten.
  • MapRazorComponents<App>() mappt die Root-Komponente auf Endpunkte.

So verstehst du, wie die App startet und welche Rendering-Funktionen aktiv sind.

Häufige Probleme

Wenn etwas fehlschlägt, liegt es meist daran:

  • Altes SDK: dotnet --version ausführen und .NET 9 prüfen.
  • HTTPS-Zertifikat: dotnet dev-certs https --trust ausführen.
  • Port-Konflikt: alte dotnet-Prozesse stoppen und neu starten.

Als Nächstes

In Kapitel 3 gehen wir tief in Komponenten: Parameter, Komposition und wiederverwendbare UI-Strukturen.