Vad är Blazor, var passar det i .NET-ekosystemet, och vilka render modes finns det? Vi skapar vårt första Blazor Web App och får syn på projektstrukturen.
Blazor är Microsofts ramverk för att bygga interaktiva webbgränssnitt med C# i stället för JavaScript. Det är en del av ASP.NET Core och kom första gången i .NET Core 3.0 (2019). I .NET 8 (2023) introducerades Blazor Web App som samlar alla rendringsmodeller under ett tak. I .NET 10 (november 2025, LTS) har modellen mognat med deklarativ tillståndspersistens ([PersistentState]), förbättrad formulärvalidering (AddValidation()), nytt 404-mönster (NotFoundPage) och passkeys i Identity.
.razor. Komponenten innehåller både HTML-markup och C#-kod. Blazor renderar komponenten till HTML och håller den synkad med C#-tillståndet.
I .NET 10 finns fyra sätt att rendera en Blazor-komponent. Du kan blanda dem i samma app, ner till komponentnivå.
| Mode | Var körs koden? | När passar det? |
|---|---|---|
| Static SSR | Servern, en gång per request | Innehållssidor, SEO, formulär utan interaktivitet |
| Server | Servern, via SignalR-kanal | Snabb start, kräver konstant uppkoppling |
| WebAssembly | I webbläsaren (WASM) | Offline-stöd, ingen serverlast efter laddning |
| Auto | Server först, byter till WASM när nedladdat | Bästa av båda världar för publika appar |
Förutsättningar: .NET 10 SDK (kontrollera med dotnet --version — ska visa 10.x) och Visual Studio 2022 17.14+ eller VS Code med C# Dev Kit. .NET 10 är en LTS-release och stöds till november 2028.
.razor och C# återspeglas direkt i webbläsaren utan omstart.ReconnectModal-komponent för Server-läget och stöd för passkeys i Identity-mallen.# Skapa en ny katalog och gå in i den
mkdir MinForstaBlazor
cd MinForstaBlazor
# Skapa Blazor Web App-projektet (interaktiv server-rendering)
dotnet new blazor -o BlazorApp --interactivity Server
# Gå in i projektet och starta det
cd BlazorApp
dotnet runÖppna https://localhost:5001 i webbläsaren — du ser standardmallen med en sidlista och en räknare som ökar när du klickar.
En frisk Blazor Web App ser ut så här:
BlazorApp/
├── Components/
│ ├── Layout/
│ │ ├── MainLayout.razor # App-skalet (header, sidebar)
│ │ └── NavMenu.razor # Sidnavigering
│ ├── Pages/
│ │ ├── Home.razor # Startsida (rutten "/")
│ │ ├── Counter.razor # Räknarexempel
│ │ └── Weather.razor # Tabellexempel
│ ├── App.razor # Rot-HTML-dokumentet
│ ├── Routes.razor # Router-konfiguration
│ └── _Imports.razor # Globala @using-direktiv
├── wwwroot/ # Statiska filer (CSS, bilder, JS)
├── Program.cs # App-start och DI-konfiguration
├── appsettings.json # Konfiguration
└── BlazorApp.csproj # ProjektfilStarta projektet med dotnet watch i stället för dotnet run. Då laddas ändringar i .razor-filer om automatiskt i webbläsaren när du sparar.
dotnet watchProgram.cs, ändrade rutter) krävs en full omstart — dotnet watch upptäcker oftast detta och startar om automatiskt.
Skapa filen Components/Pages/Hello.razor:
@page "/hello"
<PageTitle>Hello YH</PageTitle>
<h1>Hej, @namn!</h1>
<input @bind="namn" placeholder="Ditt namn" />
@code {
private string namn = "YH-student";
}Spara filen, gå till /hello i webbläsaren och skriv i fältet — rubriken uppdateras direkt när du klickar utanför fältet. Detta är Blazors grundprincip i miniatyr: markup + C# + reaktiv UI.
Lös övningarna självständigt. Det finns inget facit — lärandet sker i processen.
dotnet watch och bekräfta att räknaren fungerar.
Components/ och försök beskriva med dina egna ord vad den gör. Vad är skillnaden mellan App.razor och Routes.razor?
/om-mig där du presenterar dig själv. Inkludera bild, kort text och en lista över tre tekniker du är intresserad av. Lägg till sidan i NavMenu.
--interactivity Server och ett med --interactivity WebAssembly. Notera skillnader i mappstruktur, vad som händer i Program.cs, och hur första-laddningen känns.
dotnet watch som ditt vanliga arbetsflöde och commita projektet till Git redan idag.