Strumenti per ASP.NET Core Blazor

  • Articolo

Nota

Questa non è la versione più recente di questo articolo. Per la versione corrente, vedere la versione .NET 8 di questo articolo.

Importante

Queste informazioni si riferiscono a un prodotto non definitive che può essere modificato in modo sostanziale prima che venga rilasciato commercialmente. Microsoft non riconosce alcuna garanzia, espressa o implicita, in merito alle informazioni qui fornite.

Per la versione corrente, vedere la versione .NET 8 di questo articolo.

Questo articolo descrive gli strumenti per la creazione Blazor di app su varie piattaforme. Selezionare la piattaforma nella parte superiore di questo articolo.

Per creare un'app Blazor in Windows, usare le indicazioni seguenti:

  • Installare la versione più recente di Visual Studio con il carico di lavoro ASP.NET e sviluppo Web.

  • Creare un nuovo progetto usando uno dei modelli disponibili Blazor :

    • Blazor App Web: crea un'app Blazor Web che supporta il rendering interattivo lato server (SSR interattivo) e il rendering lato client (CSR). Il Blazor modello App Web è consigliato per iniziare Blazor a usare per informazioni sulle funzionalità lato server e sul lato Blazor client.
    • Blazor WebAssembly App autonoma: crea un'app Web client autonoma che può essere distribuita come sito statico.

Selezionare Avanti.

  • Installare la versione più recente di Visual Studio con il carico di lavoro ASP.NET e sviluppo Web.

  • Creare un nuovo progetto:

    • Per un'esperienza Blazor Server , scegliere il Blazor Server modello App , che include codice dimostrativo e Bootstrap, oppure il Blazor Server modello App empty senza codice dimostrativo e Bootstrap. Selezionare Avanti.
    • Per un'esperienza autonoma Blazor WebAssembly , scegliere il Blazor WebAssembly modello App , che include codice dimostrativo e Bootstrap oppure il Blazor WebAssembly modello App empty senza codice dimostrativo e Bootstrap. Selezionare Avanti.

  • Installare la versione più recente di Visual Studio con il carico di lavoro ASP.NET e sviluppo Web.

  • Creare un nuovo progetto:

    • Per un'esperienza Blazor Server , scegliere il Blazor Server modello App . Selezionare Avanti.
    • Per un'esperienza Blazor WebAssembly , scegliere il Blazor WebAssembly modello App . Selezionare Avanti.
  • Specificare un nome progetto e verificare che il percorso sia corretto.

Nota

I termini e i concetti di rendering usati nelle linee guida seguenti sono illustrati nelle sezioni seguenti dell'articolo Panoramica sui concetti fondamentali:

Le indicazioni dettagliate sulle modalità di rendering sono disponibili nell'articolo ASP.NET Modalità di rendering coreBlazor.

  • Per un'app Blazor Web nella finestra di dialogo Informazioni aggiuntive:

    • Elenco a discesa modalità di rendering interattivo

      • Il rendering lato server interattivo (SSR interattivo) è abilitato per impostazione predefinita con l'opzione Server .
      • Per abilitare solo l'interattività con il rendering lato client (CSR), selezionare l'opzione WebAssembly .
      • Per abilitare entrambe le modalità di rendering interattive e la possibilità di passare automaticamente da una modalità di rendering all'altra in fase di esecuzione, selezionare l'opzione Modalità di rendering automatica (Server e WebAssembly ).
      • Se l'interattività è impostata su None, l'app generata non ha interattività. L'app è configurata solo per il rendering lato server statico.

      La modalità di rendering automatico interattivo usa inizialmente SSR interattivo mentre il bundle e il runtime dell'app .NET vengono scaricati nel browser. Dopo l'attivazione del runtime WebAssembly .NET, la modalità di rendering passa al rendering Interattivo WebAssembly.

      Per impostazione predefinita, il Blazor modello app Web abilita ssr statico e interattivo usando un singolo progetto. Se si abilita anche csr, il progetto include un progetto client aggiuntivo (.Client) per i componenti basati su WebAssembly. L'output compilato dal progetto client viene scaricato nel browser ed eseguito nel client. Tutti i componenti che usano webAssembly o le modalità di rendering automatica devono essere compilati dal progetto client.

      Per altre informazioni, vedere ASP.NET Modalità di rendering coreBlazor.

    • Elenco a discesa Località interattività

      • Per pagina/componente: il valore predefinito configura l'interattività per pagina o per componente.
      • Globale: selezionando questa opzione viene impostata l'interattività a livello globale per l'intera app.

      La posizione di interattività può essere impostata solo se la modalità di rendering interattiva non None è abilitata e l'autenticazione non è abilitata.

    • Per includere pagine di esempio e un layout basato sullo stile bootstrap, selezionare la casella di controllo Includi pagine di esempio. Disabilitare questa opzione per il progetto senza pagine di esempio e stili bootstrap.

    Per altre informazioni, vedere ASP.NET Modalità di rendering coreBlazor.

  • Per un'app ospitataBlazor WebAssembly, selezionare la casella di controllo ASP.NET Core Hosted nella finestra di dialogo Informazioni aggiuntive.

  • Seleziona Crea.

  • Premere CTRL+F5 (Windows) o ⌘+F5 (macOS) per eseguire l'app.

Quando si esegue una soluzione ospitataBlazor WebAssembly in Visual Studio, il progetto di avvio della soluzione è il Server progetto.

Per altre informazioni sull'attendibilità del certificato di sviluppo HTTPS di ASP.NET Core, vedere Applicare HTTPS in ASP.NET Core.

Importante

Quando si esegue un'app ospitata Blazor WebAssembly , eseguire l'app dal progetto della Server soluzione.

Quando l'app viene avviata, viene usato solo il Properties/launchSettings.json file nel Server progetto.

Per creare un'app Blazor in Linux o macOS, usare le indicazioni seguenti:

Usare l'interfaccia della riga di comando di .NET per eseguire i comandi in una shell dei comandi.

Installare la versione più recente di .NET Core SDK. Se in precedenza è stato installato l'SDK, è possibile determinare la versione installata eseguendo il comando seguente:

dotnet --version

Installare la versione più recente di Visual Studio Code per la piattaforma.

Installare C # Dev Kit per Visual Studio Code. Per altre informazioni, vedere Eseguire il debug di app ASP.NET CoreBlazor.

Creare un nuovo progetto:

  • Per un'esperienza di app Blazor Web con rendering predefinito sul lato server interattivo, eseguire il comando seguente in una shell dei comandi che usa il blazor modello di progetto:

    dotnet new blazor -o BlazorApp

    Per abilitare solo il rendering lato client, usare l'opzione -int|--interactivity impostata su WebAssembly:

    dotnet new blazor -o BlazorApp -int WebAssembly

    Per abilitare il rendering lato server interattivo seguito dal rendering lato client, usare l'opzione -int|--interactivity impostata su Auto:

    dotnet new blazor -o BlazorApp -int Auto

    Se l'interattività è disabilitata impostando l'opzione -int|--interactivity su None, l'app generata non ha interattività. L'app è configurata solo per il rendering lato server statico:

    dotnet new blazor -o BlazorApp -int None

    La modalità di rendering automatico interattivo usa inizialmente il rendering lato server interattivo (SSR interattivo) mentre il bundle e il runtime dell'app .NET vengono scaricati nel browser. Dopo l'attivazione del runtime .NET WebAssembly, la modalità di rendering passa alla modalità di rendering Interactive WebAssembly.

    Per impostazione predefinita, il Blazor modello app Web abilita il rendering lato server statico e interattivo usando un singolo progetto. Se si abilita anche la modalità di rendering Interactive WebAssembly, il progetto include un progetto client aggiuntivo (.Client) per i componenti basati su WebAssembly. L'output compilato dal progetto client viene scaricato nel browser ed eseguito nel client. Tutti i componenti che usano le modalità di rendering Interactive WebAssembly o Interactive Auto devono essere compilati dal progetto client.

    Per altre informazioni, vedere ASP.NET Modalità di rendering coreBlazor.

    Le app impostano per impostazione predefinita la posizione di interattività in base al componente o alla pagina. Per stabilire l'interattività nell'intera app, usare l'opzione -ai|--all-interactive :

    dotnet new blazor -o BlazorApp -ai

    Se si seleziona questa opzione, l'interattività viene impostata per l'intera app nel App componente specificando una modalità di rendering per i componenti e Routes di primo livelloHeadOutlet. L'impostazione dell'interattività su questi componenti propaga l'interattività a tutti i componenti figlio nell'app.

    La posizione di interattività può essere impostata solo se la modalità di rendering interattiva (-int|--interactivity) non None è abilitata e l'autenticazione non è abilitata.

    Per creare un'app senza pagine di esempio e stili, usare l'opzione -e|--empty :

    dotnet new blazor -o BlazorApp -e

  • Per un'esperienza autonoma Blazor WebAssembly , eseguire il comando seguente in una shell dei comandi che usa il blazorwasm modello:

    dotnet new blazorwasm -o BlazorApp

    Per creare un'app autonoma Blazor WebAssembly senza pagine di esempio e stili, usare l'opzione -e|--empty :

    dotnet new blazorwasm -o BlazorApp -e

Creare un nuovo progetto:

  • Per un'esperienza Blazor Server con il codice dimostrativo e Bootstrap, eseguire il comando seguente:

    dotnet new blazorserver -o BlazorApp

  • In alternativa, creare un'app Blazor Server senza codice dimostrativo e Bootstrap usando il modello di blazorserver-empty progetto:

    dotnet new blazorserver-empty -o BlazorApp

  • Per un'esperienza autonoma Blazor WebAssembly con codice dimostrativo e Bootstrap, eseguire il comando seguente:

    dotnet new blazorwasm -o BlazorApp

  • In alternativa, creare un'app autonoma Blazor WebAssembly senza codice dimostrativo e Bootstrap usando il blazorwasm-empty modello di progetto:

    dotnet new blazorwasm-empty -o BlazorApp

  • Per un'esperienza ospitata Blazor WebAssembly con codice dimostrativo e Bootstrap, aggiungere l'opzione ospitata (-ho/--hosted) al comando :

    dotnet new blazorwasm -o BlazorApp -ho

  • In alternativa, creare un'app ospitata Blazor WebAssembly senza codice dimostrativo e Bootstrap usando il blazorwasm-empty modello con l'opzione ospitata:

    dotnet new blazorwasm-empty -o BlazorApp -ho

Creare un nuovo progetto:

  • Per un'esperienza Blazor WebAssembly , eseguire il comando seguente:

    dotnet new blazorwasm -o BlazorApp

  • Per un'esperienza ospitata Blazor WebAssembly , aggiungere l'opzione hosted (-ho o --hosted) al comando :

    dotnet new blazorwasm -o BlazorApp -ho

  • Per un'esperienza Blazor Server , eseguire il comando seguente:

    dotnet new blazorserver -o BlazorApp

Aprire la cartella BlazorApp in Visual Studio Code.

Quando Visual Studio Code richiede di aggiungere asset per compilare ed eseguire il debug del progetto, selezionare Sì.

Se Visual Studio Code non offre automaticamente l'aggiunta di asset di compilazione e debug (la .vscode cartella con launch.json e i tasks.json file), selezionare Visualizza>riquadro comandi e digitare ".NET" nella casella di ricerca. Nell'elenco dei comandi selezionare il comando ".NET: Generate Assets for Build and Debug".

Nota

Per altre informazioni sulla configurazione e sull'uso di Visual Studio Code, vedere la documentazione di Visual Studio Code.

Il file del progetto include la inspectUri proprietà per il proxy di Properties/launchSettings.json debug per tutti i profili nella profiles sezione del file:

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",

Configurazione dell'avvio e dell'attività ospitata Blazor WebAssembly

Per le soluzioni ospitateBlazor WebAssembly, aggiungere (o spostare) la .vscode cartella con launch.json e tasks.json i file alla cartella padre della soluzione, ovvero la cartella che contiene le cartelle di progetto tipiche: Client, Servere Shared. Aggiornare o confermare che la configurazione nei launch.json file e tasks.json e eseseguono un'app ospitata Blazor WebAssembly dal Server progetto.

Importante

Quando si esegue un'app ospitata Blazor WebAssembly , eseguire l'app dal progetto della Server soluzione.

Quando l'app viene avviata, viene usato solo il Properties/launchSettings.json file nel Server progetto.

Esaminare il Properties/launchSettings.json file e determinare l'URL dell'app dalla applicationUrl proprietà . A seconda della versione del framework, il protocollo URL è sicuro (HTTPS) https://localhost:{PORT} o non sicuro (HTTP), http://localhost:{PORT}dove il {PORT} segnaposto è una porta assegnata. Prendere nota dell'URL da usare nel launch.json file.

Nella configurazione di avvio del .vscode/launch.json file:

  • Impostare la directory di lavoro corrente (cwd) sulla cartella del Server progetto.
  • Indicare l'URL dell'app con la url proprietà . Usare il valore registrato in precedenza dal Properties/launchSettings.json file.
"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
"url": "{URL}"

Nella configurazione precedente:

  • Il {SERVER APP FOLDER} segnaposto è la Server cartella del progetto, in Servergenere .
  • Il {URL} segnaposto è l'URL dell'app, specificato nel file dell'app Properties/launchSettings.json nella applicationUrl proprietà .

Se Google Chrome è preferibile rispetto a Microsoft Edge, aggiornare o aggiungere una proprietà aggiuntiva di "browser": "chrome" alla configurazione.

File di esempio .vscode/launch.json seguente:

  • Imposta la directory di lavoro corrente sulla Server cartella .
  • Imposta l'URL dell'app su http://localhost:7268.
  • Modifica il browser predefinito da Microsoft Edge a Google Chrome.
"cwd": "${workspaceFolder}/Server",
"url": "http://localhost:7268",
"browser": "chrome"

Il file completo .vscode/launch.json :

{
  "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"
    }
  ]
}

In .vscode/tasks.jsonaggiungere un build argomento che specifica il percorso del Server file di progetto dell'app:

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

Nell'argomento precedente:

  • Il {SERVER APP FOLDER} segnaposto è la Server cartella del progetto, in Servergenere .
  • Il {PROJECT NAME} segnaposto è il nome dell'app, in genere in base al nome della soluzione seguito da .Server in un'app generata dal Blazor WebAssembly modello di progetto.

File di esempio .vscode/tasks.json con un Server progetto denominato BlazorHosted nella Server cartella della soluzione:

{
  "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"
    }
  ]
}

Premere CTRL+F5 (Windows) o ⌘+F5 (macOS) per eseguire l'app.

Nota

Al momento è supportato solo il debug del browser.

Non è possibile ricompilare automaticamente l'app back-end Server di una soluzione ospitata Blazor WebAssembly durante il debug, ad esempio eseguendo l'app con dotnet watch run.

.vscode/launch.json (launch configurazione):

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

Nella configurazione precedente per la directory di lavoro corrente (cwd), il {SERVER APP FOLDER} segnaposto è la Server cartella del progetto, in genere "Server".

Se viene usato Microsoft Edge e Google Chrome non è installato nel sistema, aggiungere una proprietà aggiuntiva di "browser": "edge" alla configurazione.

Esempio per una cartella di progetto di Server e che genera Microsoft Edge come browser per le esecuzioni di debug anziché il browser predefinito Google Chrome:

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

.vscode/tasks.json (dotnet argomenti di comando ):

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

Nell'argomento precedente:

  • Il {SERVER APP FOLDER} segnaposto è la Server cartella del progetto, in genere "Server".
  • Il {PROJECT NAME} segnaposto è il nome dell'app, in genere in base al nome della soluzione seguito da ".Server" in un'app generata dal Blazor modello di progetto.

L'esempio seguente dell'esercitazione per l'uso con un'app Blazor WebAssembly usa il nome di una cartella di Server progetto e un nome di progetto di BlazorWebAssemblySignalRApp.Server:SignalR

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

Premere CTRL+F5 (Windows) o ⌘+F5 (macOS) per eseguire l'app.

Considerare attendibile un certificato di sviluppo

Per altre informazioni, vedere Applicare HTTPS in ASP.NET Core.

File di soluzione di Visual Studio (.sln)

Una soluzione è un contenitore per organizzare uno o più progetti di codice correlati. Visual Studio usa un file di soluzione (.sln) per archiviare le impostazioni per una soluzione. I file di soluzione usano un formato univoco e non devono essere modificati direttamente.

Gli strumenti all'esterno di Visual Studio possono interagire con i file della soluzione:

  • L'interfaccia della riga di comando di .NET può creare file di soluzione ed elencare/modificare i progetti nei file della soluzione tramite il dotnet sln comando . Altri comandi dell'interfaccia della riga di comando di .NET usano il percorso del file della soluzione per vari comandi di pubblicazione, test e creazione di pacchetti.
  • Visual Studio Code può eseguire il dotnet sln comando e altri comandi dell'interfaccia della riga di comando di .NET tramite il terminale integrato, ma non usa direttamente le impostazioni in un file di soluzione.

In tutta la documentazione viene usata la Blazor soluzione per descrivere le app create dal Blazor WebAssembly modello di progetto con l'opzione ASP.NET Core Hosted abilitata o da un Blazor Hybrid modello di progetto. Le app prodotte da questi modelli di progetto includono un file di soluzione () per.sln impostazione predefinita. Per le app ospitate Blazor WebAssembly in cui lo sviluppatore non usa Visual Studio, il file della soluzione può essere ignorato o eliminato se non viene usato con i comandi dell'interfaccia della riga di comando di .NET.

Per altre informazioni, vedere le risorse seguenti nella documentazione di Visual Studio:

Usare Visual Studio Code per lo sviluppo multipiattaforma Blazor

Visual Studio Code è un ambiente di sviluppo integrato (IDE) open source e multipiattaforma che può essere usato per sviluppare Blazor app. Usare l'interfaccia della riga di comando di .NET per creare una nuova Blazor app per lo sviluppo con Visual Studio Code. Per altre informazioni, vedere la versione linux/macOS di questo articolo.

Per altre informazioni sulla configurazione e sull'uso di Visual Studio Code, vedere la documentazione di Visual Studio Code.

Blazor opzioni modello

Il Blazor framework fornisce modelli per la creazione di nuove app. I modelli vengono usati per creare nuovi Blazor progetti e soluzioni indipendentemente dagli strumenti selezionati per Blazor lo sviluppo (Visual Studio, Visual Studio Code o l'interfaccia della riga di comando di .NET):

  • Blazor Modello di progetto app Web: blazor
  • Blazor WebAssembly Modello di progetto app autonomo: blazorwasm
  • Blazor Server modelli di progetto: blazorserver, blazorserver-empty
  • Blazor WebAssembly modelli di progetto: blazorwasm, blazorwasm-empty
  • Blazor Server modello di progetto: blazorserver
  • Blazor WebAssembly modello di progetto: blazorwasm

Per altre informazioni sui Blazor modelli di progetto, vedere ASP.NET struttura del progetto CoreBlazor.

Per altre informazioni sulle opzioni dei modelli, vedere le risorse seguenti:

  • I modelli predefiniti di .NET per dotnet new articolo nella documentazione di .NET Core:
  • Passaggio dell'opzione della Guida (-h o --help) al comando dell'interfaccia della dotnet new riga di comando in una shell dei comandi:
    • dotnet new blazor -h
    • dotnet new blazorwasm -h
  • I modelli predefiniti di .NET per dotnet new articolo nella documentazione di .NET Core:
  • Passaggio dell'opzione della Guida (-h o --help) al comando dell'interfaccia della dotnet new riga di comando in una shell dei comandi:
    • dotnet new blazorserver -h
    • dotnet new blazorserver-empty -h
    • dotnet new blazorwasm -h
    • dotnet new blazorwasm-empty -h
  • I modelli predefiniti di .NET per dotnet new articolo nella documentazione di .NET Core:
  • Passaggio dell'opzione della Guida (-h o --help) al comando dell'interfaccia della dotnet new riga di comando in una shell dei comandi:
    • dotnet new blazorserver -h
    • dotnet new blazorwasm -h

Risorse aggiuntive