Condividi tramite

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 con diversi strumenti:

  • Visual Studio (VS): l'ambiente di sviluppo integrato (IDE) più completo per gli sviluppatori .NET in Windows. Include una serie di strumenti e funzionalità per elevare e migliorare ogni fase di sviluppo software.
  • Visual Studio Code (VS Code) è un editor di codice open source multipiattaforma che può essere usato per sviluppare Blazor app.
  • Interfaccia della riga di comando .NET. L'interfaccia della riga di comando .NET è una toolchain multipiattaforma per lo sviluppo, la compilazione, l'esecuzione e la pubblicazione di applicazioni .NET. L'interfaccia della riga di comando di .NET è inclusa in .NET SDK ed è in esecuzione in qualsiasi piattaforma supportata dall'SDK.

Selezionare il pivot di questo articolo che corrisponde alla scelta degli strumenti.

Per creare un'app Blazor con Visual Studio, 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.

  • Per altre informazioni sulle opzioni nella finestra di dialogo Informazioni aggiuntive, vedere la Blazor sezione Modelli di progetto e opzioni del modello.

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

Visual Studio Code è un ambiente di sviluppo integrato (IDE) open source e multipiattaforma che può essere usato per sviluppare Blazor app.

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.

Se non si ha familiarità con VS Code, vedere la documentazione di VS Code. Se non si ha familiarità con .NET SDK, vedere Che cos'è .NET SDK? e gli articoli associati nella documentazione di .NET SDK.

Creare un nuovo progetto:

  • Aprire VS Code.

  • Passare alla visualizzazione Esplora risorse e selezionare il pulsante Crea progetto .NET. In alternativa, è possibile visualizzare il riquadro comandi usando CTRL+MAIUSC+P, quindi digitare ".NET" e trovare e selezionare il comando .NET: Nuovo progetto.

  • Selezionare il modello di Blazor progetto dall'elenco.

  • Nella finestra di dialogo Percorso progetto creare o selezionare una cartella per il progetto.

  • Nel riquadro comandi specificare un nome per il progetto o accettare il nome predefinito.

  • Selezionare Crea progetto per creare il progetto o modificare le opzioni del progetto selezionando Mostra tutte le opzioni del modello. Per altre informazioni sui modelli e sulle opzioni, vedere la Blazor sezione Modelli di progetto e opzioni del modello.

  • Premere F5 sulla tastiera per eseguire l'app con il debugger o CTRL+F5 per eseguire l'app senza il debugger.

    Il riquadro comandi chiede di selezionare un debugger. Selezionare C# dall'elenco.

    Selezionare quindi la configurazione di avvio https .

  • Per arrestare l'app, premere MAIUSC+F5 sulla tastiera.

Le istruzioni di Visual Studio Code (VS Code) per lo sviluppo di ASP.NET Core in alcune parti della Blazor documentazione usano l'interfaccia della riga di comando di .NET, che fa parte di .NET SDK. I comandi dell'interfaccia della riga di comando di .NET vengono eseguiti nel terminale integrato di VS Code, che per impostazione predefinita è una shell dei comandi di PowerShell. Il terminale viene aperto selezionando Nuovo terminale dal menu Terminale nella barra dei menu.

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

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.

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

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",
    ...
],
...

.NET SDK è un set di librerie e strumenti usati dagli sviluppatori per creare applicazioni e librerie .NET.

Installare .NET SDK. I comandi vengono eseguiti in una shell dei comandi usando l'interfaccia della riga di comando di .NET.

Se in precedenza sono stati installati uno o più SDK .NET e si vuole visualizzare la versione attiva, eseguire il comando seguente in una shell dei comandi:

dotnet --version

Se non si ha familiarità con .NET SDK, vedere Che cos'è .NET SDK? e gli articoli associati nella documentazione di .NET SDK.

Creare un nuovo progetto:

  • Passare alla directory usando il cd comando in cui si vuole creare la cartella del progetto , ad esempio cd c:/users/Bernie_Kopell/Documents.

  • Per un'esperienza di app Blazor Web con rendering predefinito sul lato server interattivo (SSR interattivo), eseguire il comando seguente:

    dotnet new blazor -o BlazorApp

  • 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

Creare un nuovo progetto:

  • Passare alla directory usando il cd comando in cui si vuole creare la cartella del progetto , ad esempio cd c:/users/Bernie_Kopell/Documents.

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

    dotnet new blazorserver -o BlazorApp

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

    dotnet new blazorwasm -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

Creare un nuovo progetto:

  • Passare alla directory usando il cd comando in cui si vuole creare la cartella del progetto , ad esempio cd c:/users/Bernie_Kopell/Documents.

  • 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

Per altre informazioni sui modelli e sulle opzioni, vedere la Blazor sezione Modelli di progetto e opzioni del modello.

Eseguire l'app

Importante

Quando si esegue un'app Blazor Web, eseguire l'app dal progetto server della soluzione, ovvero il progetto con un nome che non termina con .Client.

Importante

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

Premere CTRL+F5 sulla tastiera per eseguire l'app senza il debugger.

Visual Studio visualizza la finestra di dialogo seguente quando un progetto non è configurato per l'uso di SSL:

Finestra di dialogo Considera attendibile il certificato autofirmato

Selezionare Sì se si considera attendibile il certificato SSL principale ASP.NET.

Verrà visualizzata la finestra di dialogo seguente:

Finestra di dialogo Avviso di sicurezza

Selezionare Sì per confermare il rischio e installare il certificato.

Per informazioni sull'attendibilità del certificato di sviluppo HTTPS per il browser Firefox, vedere Applicare HTTPS in ASP.NET Core.

Visual Studio:

  • Compila ed esegue l'app.
  • Avvia il browser predefinito in https://localhost:{PORT}, che visualizza l'interfaccia utente dell'app. Il {PORT} segnaposto è la porta casuale assegnata durante la creazione dell'app. Se è necessario modificare la porta a causa di un conflitto di porte locali, modificare la porta nel file del Properties/launchSettings.json progetto.

Per informazioni sull'attendibilità del certificato di sviluppo HTTPS per browser diversi da Firefox, vedere il materiale sussidiario sull'attendibilità dei certificati di sviluppo HTTPS. Quando si usa il browser Firefox, vedere il materiale sussidiario sull'attendibilità dei certificati per Firefox.

In VS Code premere CTRL+F5 (Windows) o ⌘+F5 (macOS) per eseguire l'app senza eseguire il debug.

Al prompt Seleziona debugger nel riquadro comandi nella parte superiore dell'interfaccia utente di VS Code selezionare C#. Al prompt successivo selezionare il profilo HTTPS ([https]).

Il browser predefinito viene avviato in https://localhost:{PORT}, che visualizza l'interfaccia utente dell'app. Il {PORT} segnaposto è la porta casuale assegnata durante la creazione dell'app. Se è necessario modificare la porta a causa di un conflitto di porte locali, modificare la porta nel file del Properties/launchSettings.json progetto.

Per informazioni sull'attendibilità del certificato di sviluppo HTTPS per browser diversi da Firefox, vedere il materiale sussidiario sull'attendibilità dei certificati di sviluppo HTTPS. Quando si usa il browser Firefox, vedere la sezione relativa alle indicazioni sull'attendibilità dei certificati per Firefox .

In una shell dei comandi aperta alla cartella radice del progetto eseguire il dotnet watch comando per compilare e avviare l'app:

dotnet watch

Il browser predefinito viene avviato in https://localhost:{PORT}, che visualizza l'interfaccia utente dell'app. Il {PORT} segnaposto è la porta casuale assegnata durante la creazione dell'app. Se è necessario modificare la porta a causa di un conflitto di porte locali, modificare la porta nel file del Properties/launchSettings.json progetto.

Quando un'app creata dal Blazor modello di progetto app Web viene eseguita con l'interfaccia della riga di comando di .NET, l'app viene eseguita in un endpoint HTTP (non sicuro) perché il primo profilo trovato nel file delle impostazioni di avvio dell'app (Properties/launchSettings.json) è il profilo HTTP (non sicuro), denominato http. Il profilo HTTP è stato inserito nella prima posizione per facilitare la transizione dell'adozione della sicurezza SSL/HTTPS per gli utenti non Windows.

Un approccio per l'esecuzione dell'app con SSL/HTTPS consiste nel passare l'opzione --launch-profile|-lpcon il nome del httpsdotnet watch profilo al comando:

dotnet watch -lp https

Un approccio alternativo consiste nello spostare il https profilo sopra il http profilo nel Properties/launchSettings.json file e salvare la modifica. Dopo aver modificato l'ordine del profilo nel file, il dotnet watch comando usa sempre il https profilo per impostazione predefinita.

Arrestare l'app

Arrestare l'app usando uno degli approcci seguenti:

  • Chiudere la finestra del browser.
  • In Visual Studio:

    • Usare il pulsante Arresta nella barra dei menu di Visual Studio:

      Pulsante Arresta nella barra dei menu di Visual Studio

    • Premere MAIUSC+F5 sulla tastiera.

Arrestare l'app usando l'approccio seguente:

  1. Chiudere la finestra del browser.
  2. In VS Code, una delle due opzioni seguenti:
    • Scegliere Arresta debug dal menu Esegui.
    • Premere MAIUSC+F5 sulla tastiera.

Arrestare l'app usando l'approccio seguente:

  1. Chiudere la finestra del browser.
  2. Nella shell dei comandi premere CTRL+C (Windows) o ⌘+C (macOS).

File di soluzione di Visual Studio (.sln)

Una soluzione è un contenitore per organizzare uno o più progetti di codice correlati. I file di soluzione usano un formato univoco e non devono essere modificati direttamente.

Visual Studio e Visual Studio Code (VS Code) usano un file di soluzione (.sln) per archiviare le impostazioni per una soluzione. L'interfaccia della riga di comando di .NET non organizza i progetti usando un file di soluzione, ma 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.

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 ulteriori informazioni, vedi le seguenti risorse:

Blazor modelli di progetto e opzioni di modello

Il Blazor framework fornisce modelli di progetto 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
  • Modello di progetto app autonomo Blazor WebAssembly : 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.

I termini e i concetti di rendering usati nelle sottosezioni seguenti vengono introdotti 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.

Modalità di rendering interattiva

  • 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, usare 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, usare 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.

Importante

Quando si usa un'app Blazor Web, la maggior parte dei componenti di esempio della Blazor documentazione richiede interattività per funzionare e dimostrare i concetti trattati negli articoli. Quando si testa un componente di esempio fornito da un articolo, assicurarsi che l'app adotta interattività globale o che il componente adotta una modalità di rendering interattiva.

Posizione interattività

Opzioni di posizione interattività:

  • Per pagina/componente: il valore predefinito configura l'interattività per pagina o per componente.
  • Globale: l'uso di questa opzione configura 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.

Pagine di esempio

Per includere pagine di esempio e un layout basato sullo stile bootstrap, usare l'opzione Includi pagine di esempio. Disabilitare questa opzione per il progetto senza pagine di esempio e stili bootstrap.

Indicazioni aggiuntive sulle opzioni dei modelli

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 blazorserver -h
    • dotnet new blazorserver-empty -h
    • dotnet new blazorwasm -h
    • dotnet new blazorwasm-empty -h

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 blazorserver -h
    • dotnet new blazorwasm -h

Risorse aggiuntive