Verktyg för ASP.NET Core Blazor

Artikel
02/03/2025

Notera

Det här är inte den senaste versionen av den här artikeln. Den aktuella versionen finns i den .NET 9-versionen av den här artikeln.

Varning

Den här versionen av ASP.NET Core stöds inte längre. Mer information finns i .NET och .NET Core Support Policy. För den nuvarande versionen, se .NET 9-versionen av den här artikeln.

Viktig

Den här informationen gäller en förhandsversionsprodukt som kan ändras avsevärt innan den släpps kommersiellt. Microsoft lämnar inga garantier, uttryckliga eller underförstådda, med avseende på den information som tillhandahålls här.

För den aktuella versionen, se .NET 9-versionen av den här artikeln.

I den här artikeln beskrivs verktyg för att skapa Blazor appar med hjälp av flera verktyg:

Visual Studio (VS): Den mest omfattande integrerade utvecklingsmiljön (IDE) för .NET-utvecklare i Windows. Innehåller en matris med verktyg och funktioner för att höja och förbättra varje steg i programvaruutvecklingen.
Visual Studio Code (VS Code) är en kodredigerare med öppen källkod som kan användas för att utveckla Blazor appar.
.NET CLI: .NET-kommandoradsgränssnittet (CLI) är en plattformsoberoende verktygskedja för att utveckla, skapa, köra och publicera .NET-program. .NET CLI ingår i .NET SDK och körs på alla plattformar som stöds av SDK.

Välj den pivot i denna artikel som matchar ditt verktygsval.

Om du vill skapa en Blazor app med Visual Studio använder du följande vägledning:

Installera den senaste versionen av Visual Studio med arbetsbelastningen ASP.NET och webbutveckling.
Skapa ett nytt projekt med någon av de tillgängliga Blazor mallarna:
- Blazor Web App: Skapar en Blazor webbapp som stöder interaktiv återgivning på serversidan (interaktiv SSR) och återgivning på klientsidan (CSR). Mallen Blazor Web App rekommenderas för att komma igång med Blazor för att lära dig mer om Blazor funktioner på serversidan och klientsidan.
- Blazor WebAssembly fristående app: Skapar en fristående klientwebbapp som kan distribueras som en statisk webbplats.

Välj Nästa.

Installera den senaste versionen av Visual Studio med arbetsuppsättningen ASP.NET och webbutveckling.
Skapa ett nytt projekt:
- För en Blazor Server upplevelse väljer du mallen Blazor Server App, som innehåller demonstrationskod och Bootstrapeller mallen Blazor Server App Empty utan demonstrationskod och Bootstrap. Välj Nästa.
- För en fristående Blazor WebAssembly upplevelse väljer du mallen Blazor WebAssembly App, som innehåller demonstrationskod och Bootstrap, eller mallen Blazor WebAssembly App Empty utan demonstrationskod och Bootstrap. Välj Nästa.

Installera den senaste versionen av Visual Studio med ASP.NET och webbutveckling-arbetsbelastning.
Skapa ett nytt projekt:
- För en Blazor Server upplevelse väljer du mallen Blazor Server App. Välj Nästa.
- För en Blazor WebAssembly upplevelse väljer du mallen Blazor WebAssembly App. Välj Nästa.

Ange ett projektnamn och bekräfta att plats är korrekt.
Mer information om alternativen i dialogrutan Ytterligare information finns i avsnittet Blazor projektmallar och mallalternativ.

Anteckning

Den värdbaserade Blazor WebAssembly projektmallen är inte tillgänglig i ASP.NET Core 8.0 eller senare. Om du vill skapa en värdbaserad Blazor WebAssembly app måste ett Framework- tidigare alternativ än .NET 8.0 markeras med kryssrutan ASP.NET Core Hosted.

För en värdbaseradBlazor WebAssembly app markerar du kryssrutan ASP.NET Core Hosted i dialogrutan Ytterligare information.

Välj Skapa.

Visual Studio Code är en IDE (Integrated Development Environment) med öppen källkod som kan användas för att utveckla Blazor appar.

Installera den senaste versionen av Visual Studio Code för din plattform.

Installera C# Dev Kit för Visual Studio Code. Mer information finns i Felsöka ASP.NET Core Blazor-appar.

Om du inte har använt VS Code tidigare kan du läsa dokumentationen om VS Code. Om du är nybörjare på .NET SDK kan du läsa Vad är .NET SDK? och tillhörande artiklar i .NET SDK-dokumentationen.

Skapa ett nytt projekt:

Öppna VS Code.
Gå till vyn Explorer och välj knappen Skapa .NET Project. Du kan också ta upp kommandopaletten med hjälp av Ctrl+Skift+Poch sedan skriva ".NET" och leta upp och välja kommandot .NET: New Project.
Välj den Blazor projektmallen från listan.
I dialogrutan Projektplats skapar eller väljer du en mapp för projektet.
I kommandopalettenanger du ett namn för projektet eller godkänner standardnamnet.
Välj Skapa projekt för att skapa projektet eller justera projektets alternativ genom att välja Visa alla mallalternativ. Mer information om mallar och alternativ finns i avsnittet Blazor projektmallar och mallalternativ.
Tryck på F5 på tangentbordet för att köra appen med felsökningsprogrammet eller Ctrl+F5 för att köra appen utan felsökningsprogrammet.

I -kommandopaletten uppmanas du att välja ett felsökningsprogram. Välj C# i listan.

Välj sedan https starta konfigurationen.
Om du vill stoppa appen trycker du på Skift+F5 på tangentbordet.

Visual Studio Code-instruktionerna (VS Code) för ASP.NET Core-utveckling i vissa delar av Blazor dokumentationen använder .NET CLI-, som ingår i .NET SDK. .NET CLI-kommandon utfärdas i VS Code:s integrerade Terminal, som standard är ett PowerShell-kommandogränssnitt. Terminal öppnas genom att välja Ny terminal från menyn Terminal i menyraden.

Mer information om konfiguration och användning av Visual Studio Code finns i dokumentationen Visual Studio Code.

Hostad Blazor WebAssembly lansering och uppgiftskonfiguration

För värdbaserade Blazor WebAssemblylösningarlägger du till (eller flyttar) mappen .vscode med launch.json och tasks.json filer i lösningens överordnade mapp, som är den mapp som innehåller de vanliga projektmapparna: Client, Serveroch Shared. Uppdatera eller bekräfta att konfigurationen i launch.json- och tasks.json-filerna kör en värdbaserad Blazor WebAssembly app från Server-projektet.

Granska Properties/launchSettings.json-filen och fastställa appens URL från egenskapen applicationUrl. Beroende på ramverksversionen är URL-protokollet antingen säkert (HTTPS) https://localhost:{PORT} eller osäkert (HTTP) http://localhost:{PORT}, där platshållaren för {PORT} är en tilldelad port. Observera URL:en för användning i filen launch.json.

I startkonfigurationen av .vscode/launch.json-filen:

Ange den aktuella arbetskatalogen (cwd) till mappen Server projekt.
Ange appens URL med egenskapen url. Använd värdet som registrerades tidigare från filen Properties/launchSettings.json.

"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
"url": "{URL}"

I föregående konfiguration:

Platshållaren {SERVER APP FOLDER} är Server-projektets mapp, vanligtvis Server.
Platshållaren {URL} är appens URL, som anges i appens Properties/launchSettings.json-fil i egenskapen applicationUrl.

Om Google Chrome föredras framför Microsoft Edge uppdaterar eller lägger du till ytterligare en egenskap för "browser": "chrome" i konfigurationen.

Följande exempel .vscode/launch.json fil:

Anger den aktuella arbetskatalogen till mappen Server.
Anger url:en för appen till http://localhost:7268.
Ändrar standardwebbläsaren från Microsoft Edge till Google Chrome.

"cwd": "${workspaceFolder}/Server",
"url": "http://localhost:7268",
"browser": "chrome"

Den fullständiga .vscode/launch.json filen:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "blazorwasm",
      "name": "Launch and Debug Blazor WebAssembly Application",
      "request": "launch",
      "cwd": "${workspaceFolder}/Server",
      "url": "http://localhost:7268",
      "browser": "chrome"
    }
  ]
}

I .vscode/tasks.jsonlägger du till ett build argument som anger sökvägen till Server-appens projektfil:

"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",

I föregående argument:

Platshållaren {SERVER APP FOLDER} är Server-projektets mapp, vanligtvis Server.
Platshållaren {PROJECT NAME} är appens namn, vanligtvis baserat på lösningens namn följt av .Server i en app som genereras från Blazor WebAssembly-projektmallen.

Ett exempel .vscode/tasks.json fil med ett Server projekt med namnet BlazorHosted i mappen Server i lösningen:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
        "args": [
          "build",
          "${workspaceFolder}/Server/BlazorHosted.Server.csproj",
          "/property:GenerateFullPaths=true",
          "/consoleloggerparameters:NoSummary",
        ],
        "group": "build",
        "presentation": {
          "reveal": "silent"
        },
        "problemMatcher": "$msCompile"
    }
  ]
}

Notera

Endast webbläsarfelsökning stöds just nu.

Du kan inte automatiskt återskapa backend-appen Server i en värdbaserad lösning Blazor WebAssembly under felsökning, till exempel genom att köra appen med dotnet watch run.

.vscode/launch.json (launch konfiguration):

...
"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
...

I den föregående konfigurationen för den aktuella arbetskatalogen (cwd) är platshållaren {SERVER APP FOLDER} mappen för Server-projektet, vanligen "Server".

Om Microsoft Edge används och Google Chrome inte är installerat på systemet lägger du till ytterligare en egenskap för "browser": "edge" i konfigurationen.

Exempel på en projektmapp med Server och som skapar Microsoft Edge när webbläsaren för felsökning körs i stället för standardwebbläsaren Google Chrome:

...
"cwd": "${workspaceFolder}/Server",
"browser": "edge"
...

.vscode/tasks.json (dotnet kommando argument):

...
"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",
...

I föregående argument:

Platshållaren {SERVER APP FOLDER} är Server projektmapp, vanligtvis "Server".
Platshållaren {PROJECT NAME} är appens namn, vanligtvis baserat på lösningens namn följt av ".Server" i en app som genereras från Blazor-projektmallen.

I följande exempel från -självstudien, där SignalR används med en Blazor WebAssembly-applikation, använder en projektmapp som heter Server och projektet har namnet BlazorWebAssemblySignalRApp.Server.

...
"args": [
  "build",
    "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj",
    ...
],
...

.NET SDK är en uppsättning bibliotek och verktyg som utvecklare använder för att skapa .NET-program och -bibliotek.

Installera .NET SDK. Kommandon utfärdas i ett kommandogränssnitt med hjälp av .NET CLI-.

Om du tidigare har installerat en eller flera .NET SDK:er och vill se din aktiva version kör du följande kommando i ett kommandogränssnitt:

dotnet --version

Om du är nybörjare på .NET SDK kan du läsa Vad är .NET SDK? och tillhörande artiklar i .NET SDK-dokumentationen.

Skapa ett nytt projekt:

Ändra till katalogen med kommandot cd där du vill skapa projektmappen (till exempel cd c:/users/Bernie_Kopell/Documents).
Kör följande kommando för en Blazor Web App upplevelse med interaktiv återgivning på serversidan (interaktiv SSR):
```
dotnet new blazor -o BlazorApp
```
För en fristående Blazor WebAssembly kör du följande kommando i ett kommandogränssnitt som använder mallen blazorwasm:
```
dotnet new blazorwasm -o BlazorApp
```

Skapa ett nytt projekt:

Ändra till katalogen med kommandot cd där du vill skapa projektmappen (till exempel cd c:/users/Bernie_Kopell/Documents).
Kör följande kommando för en Blazor Server upplevelse med demonstrationskod och Bootstrap.
```
dotnet new blazorserver -o BlazorApp
```
Kör följande kommando för en fristående Blazor WebAssembly erfarenhet av demonstrationskod och Bootstrap:
```
dotnet new blazorwasm -o BlazorApp
```
För en värdbaserad Blazor WebAssembly-upplevelse med demonstrationskod och Bootstrap, lägg till det värdbaserade alternativet (-ho/--hosted) i kommandot:
```
dotnet new blazorwasm -o BlazorApp -ho
```
Not

Den värdbaserade Blazor WebAssembly projektmallen är inte tillgänglig i ASP.NET Core 8.0 eller senare. Om du vill skapa en värdbaserad Blazor WebAssembly app med hjälp av en .NET 8.0 eller senare SDK skickar du alternativet -f|--framework med ett 7.0-målramverk (net7.0):
```
dotnet new blazorwasm -o BlazorApp -ho -f net7.0
```

Skapa ett nytt projekt:

Ändra till katalogen med kommandot cd där du vill skapa projektmappen (till exempel cd c:/users/Bernie_Kopell/Documents).
Kör följande kommando för en Blazor WebAssembly upplevelse:
```
dotnet new blazorwasm -o BlazorApp
```
För en värdbaserad Blazor WebAssembly-upplevelse lägger du till det värdbaserade alternativet (-ho eller --hosted) i kommandot:
```
dotnet new blazorwasm -o BlazorApp -ho
```
Not

Den värdbaserade Blazor WebAssembly projektmallen är inte tillgänglig i ASP.NET Core 8.0 eller senare. Om du vill skapa en värdbaserad Blazor WebAssembly app med hjälp av en .NET 8.0 eller senare SDK skickar du alternativet -f|--framework med målramverksmonikern (till exempel net6.0):
```
dotnet new blazorwasm -o BlazorApp -ho -f net6.0
```
Kör följande kommando för en Blazor Server upplevelse:
```
dotnet new blazorserver -o BlazorApp
```

Mer information om mallar och alternativ finns i avsnittet Blazor projektmallar och mallalternativ.

Kör appen

Viktig

När du kör en Blazor Web Appkör du appen från lösningens serverprojekt, vilket är projektet med ett namn som inte slutar i .Client.

Viktig

När du kör en värdbaserad Blazor WebAssembly app kör du appen från lösningens Server projekt.

Tryck på Ctrl+F5 på tangentbordet för att köra appen utan felsökningsprogrammet.

Visual Studio visar följande dialogruta när ett projekt inte har konfigurerats för att använda SSL:

dialogrutan Lita på självsignerat certifikat

Välj Ja om du litar på ASP.NET Core SSL-certifikatet.

Följande dialogruta visas:

dialogrutan för säkerhetsvarning

Välj Ja för att bekräfta risken och installera certifikatet.

Visual Studio:

Kompilerar och kör appen.
Startar standardwebbläsaren på https://localhost:{PORT}, som visar appens användargränssnitt. Platshållaren {PORT} är den slumpmässiga port som tilldelas när appen skapas. Om du behöver ändra porten på grund av en lokal portkonflikt ändrar du porten i projektets Properties/launchSettings.json-fil.

I VS Code trycker du på Ctrl+F5 för att köra appen utan att felsöka.

På uppmaningen Välj felsökningsprogram i kommandopaletten överst i VS Code-användargränssnittet väljer du C#. I nästa prompt väljer du HTTPS-profilen ([https]).

Standardwebbläsaren startas på https://localhost:{PORT}, som visar appens användargränssnitt. Platshållaren {PORT} är den slumpmässiga port som tilldelas när appen skapas. Om du behöver ändra porten på grund av en lokal portkonflikt ändrar du porten i projektets Properties/launchSettings.json-fil.

I ett kommandogränssnitt som öppnas i projektets rotmapp kör du kommandot dotnet watch för att kompilera och starta appen:

dotnet watch

När en app som skapats från Blazor Web App-projektmallen körs med .NET CLI körs appen på en HTTP-slutpunkt (osäker) eftersom den första profilen som finns i appens startinställningsfil (Properties/launchSettings.json) är HTTP-profilen (osäker) med namnet http. HTTP-profilen placerades i den första positionen för att underlätta övergången av SSL/HTTPS-säkerhet för icke-Windows-användare.

En metod för att köra appen med SSL/HTTPS är att skicka alternativet -lp|--launch-profile med https profilnamn till kommandot dotnet watch:

dotnet watch -lp https

En annan metod är att flytta https profilen ovanför http profilen i Properties/launchSettings.json-filen och spara ändringen. När du har ändrat profilordningen i filen använder kommandot dotnet watch alltid https profilen som standard.

Stoppa appen

Stoppa appen med någon av följande metoder:

Stäng webbläsarfönstret.
I Visual Studio, antingen:
- Använd knappen Stoppa i Visual Studio-menyraden:
- Tryck på Skift+F5 på tangentbordet.

Stoppa appen med hjälp av följande metod:

Stäng webbläsarfönstret.
I VS Code, antingen:
- På menyn Kör väljer du Sluta felsöka.
- Tryck på Skift+F5 på tangentbordet.

Stoppa appen med hjälp av följande metod:

Stäng webbläsarfönstret.
Tryck på Ctrl+Ci kommandogränssnittet.

Visual Studio-lösningsfil (`.sln`)

En lösning är en container för att organisera ett eller flera relaterade kodprojekt. Lösningsfiler använder ett unikt format och är inte avsedda att redigeras direkt.

Visual Studio och Visual Studio Code (VS Code) använda en lösningsfil (.sln) för att lagra inställningar för en lösning. .NET CLI- organiserar inte projekt med hjälp av en lösningsfil, men den kan skapa lösningsfiler och lista/ändra projekten i lösningsfiler via kommandot dotnet sln. Andra .NET CLI-kommandon använder sökvägen till lösningsfilen för olika kommandon för publicering, testning och paketering.

I dokumentationen för Blazor används lösning för att beskriva appar som skapats från Blazor WebAssembly-projektmallen med alternativet ASP.NET Core Hosted aktiverat eller från en Blazor Hybrid projektmall. Appar som skapats från dessa projektmallar innehåller en lösningsfil (.sln). För värdbaserade Blazor WebAssembly appar där utvecklaren inte använder Visual Studio kan lösningsfilen ignoreras eller tas bort om den inte används med .NET CLI-kommandon.

Mer information finns i följande resurser:

Blazor projektmallar och mallalternativ

Det Blazor ramverket innehåller projektmallar för att skapa nya appar. Mallarna används för att skapa nya Blazor projekt och lösningar oavsett vilka verktyg du väljer för Blazor utveckling (Visual Studio, Visual Studio Code eller .NET-kommandoradsgränssnittet (CLI)):

Blazor Web App projektmall: blazor
Fristående Blazor WebAssembly-appprojektmall: blazorwasm

Blazor Server projektmallar: blazorserver, blazorserver-empty
Blazor WebAssembly projektmallar: blazorwasm, blazorwasm-empty

Blazor Server projektmall: blazorserver
Blazor WebAssembly projektmall: blazorwasm

Mer information om Blazor projektmallar finns i ASP.NET Core Blazor projektstruktur.

Återgivning av termer och begrepp som används i följande underavsnitt introduceras i följande avsnitt i översiktsartikeln Fundamentals:

Detaljerad vägledning om återgivningslägen tillhandahålls av artikeln om ASP.NET Core Blazor återgivningslägen.

Interaktivt återgivningsläge

Interaktiv återgivning på serversidan (interaktiv SSR) aktiveras med alternativet Server.
Om du bara vill aktivera interaktivitet med återgivning på klientsidan (CSR) använder du alternativet WebAssembly.
Om du vill aktivera både interaktiva återgivningslägen och förmågan att automatiskt växla mellan dem under körning, använd alternativet Auto (Server och WebAssembly) (automatiskt) återgivningsläge.
Om interaktivitet är inställt på Nonehar den genererade appen ingen interaktivitet. Appen är endast konfigurerad för statisk återgivning på serversidan.

I det interaktiva auto-rendering-läget används ursprungligen interaktiv SSR medan .NET-applikationspaketet och runtime laddas ned till webbläsaren. När .NET WebAssembly-körningen har aktiverats växlar återgivningsläget till Interaktiv WebAssembly-återgivning.

Mallen Blazor Web App möjliggör både statisk och interaktiv SSR med hjälp av ett enda projekt. Om du även aktiverar CSR innehåller projektet ytterligare ett klientprojekt (.Client) för dina WebAssembly-baserade komponenter. De inbyggda utdata från klientprojektet laddas ned till webbläsaren och körs på klienten. Alla komponenter som använder webassembly- eller automatiska återgivningslägen måste skapas från klientprojektet.

Viktig

När du använder en Blazor Web Appkräver de flesta Blazor dokumentationsexempelkomponenter interaktivitet för att fungera och demonstrera de begrepp som beskrivs i artiklarna. När du testar en exempelkomponent som tillhandahålls av en artikel kontrollerar du att appen antingen använder global interaktivitet eller att komponenten använder ett interaktivt återgivningsläge.

Plats för interaktivitet

Platsalternativ för interaktivitet:

Per sida/komponent: Standardinställningen konfigurerar interaktivitet per sida eller per komponent.
Global: Med det här alternativet konfigureras interaktivitet globalt för hela appen.

Interaktivitetsplats kan bara anges om interaktivt återgivningsläge inte är None och autentisering inte är aktiverat.

Exempelsidor

Om du vill inkludera exempelsidor och en layout som baseras på Bootstrap-formatering använder du alternativet Ta med exempelsidor. Inaktivera det här alternativet för projekt utan exempelsidor och Bootstrap-formatering.

Ytterligare vägledning om mallalternativ

ASP.NET Core Blazor återgivningslägen
Standardmallarna .NET för dotnet new article i .NET Core-dokumentationen:
- blazor
- blazorwasm
Skicka hjälpalternativet (-h eller --help) till kommandot dotnet new CLI i ett kommandogränssnitt:
- dotnet new blazor -h
- dotnet new blazorwasm -h

Mer information om mallalternativ finns i följande resurser:

Standardmallarna .NET för dotnet new article i .NET Core-dokumentationen:
- blazorserver (innehåller blazorserver-empty alternativ)
- blazorwasm (inkluderar alternativ för blazorwasm-empty)
Skicka hjälpalternativet (-h eller --help) till kommandot dotnet new CLI i ett kommandogränssnitt:
- dotnet new blazorserver -h
- dotnet new blazorserver-empty -h
- dotnet new blazorwasm -h
- dotnet new blazorwasm-empty -h

Mer information om mallalternativ finns i följande resurser:

Standardmallarna .NET för dotnet new article i .NET Core-dokumentationen:
- blazorserver
- blazorwasm
Skicka hjälpalternativet (-h eller --help) till kommandot dotnet new CLI i ett kommandogränssnitt:
- dotnet new blazorserver -h
- dotnet new blazorwasm -h

Dela via

Verktyg för ASP.NET Core Blazor

Kör appen

Stoppa appen

Visual Studio-lösningsfil (`.sln`)

Blazor projektmallar och mallalternativ

Interaktivt återgivningsläge

Plats för interaktivitet

Exempelsidor

Ytterligare vägledning om mallalternativ

Ytterligare resurser

Ytterligare resurser

Dela via

Verktyg för ASP.NET Core Blazor

Kör appen

Stoppa appen

Visual Studio-lösningsfil (.sln)

Blazor projektmallar och mallalternativ

Interaktivt återgivningsläge

Plats för interaktivitet

Exempelsidor

Ytterligare vägledning om mallalternativ

Ytterligare resurser

Ytterligare resurser

Visual Studio-lösningsfil (`.sln`)