Strumenti per ASP.NET Core Blazor

• 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 Web App: crea un'app Blazor Web che supporta il rendering interattivo lato server (SSR interattivo) e il rendering lato client (CSR). Il Blazor Web App modello è 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.

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

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

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

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 Web App con il rendering lato server interattivo predefinito (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
  

  Nota

  Il modello di progetto ospitato Blazor WebAssembly non è disponibile in ASP.NET Core 8.0 o versione successiva. Per creare un'app ospitata Blazor WebAssembly usando un SDK .NET 8.0 o versione successiva, passare l'opzione -f|--framework con un framework di destinazione 7.0 (net7.0):

  dotnet new blazorwasm -o BlazorApp -ho -f net7.0
  

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
  

  Nota

  Il modello di progetto ospitato Blazor WebAssembly non è disponibile in ASP.NET Core 8.0 o versione successiva. Per creare un'app ospitata Blazor WebAssembly usando un SDK .NET 8.0 o versione successiva, passare l'opzione -f|--framework con il moniker del framework di destinazione ,ad esempio net6.0:

  dotnet new blazorwasm -o BlazorApp -ho -f net6.0
  

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

  dotnet new blazorserver -o BlazorApp