Condividi tramite

struttura del progetto ASP.NET Core Blazor

Nota

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

Avviso

Questa versione di ASP.NET Core non è più supportata. Per altre informazioni, vedere i criteri di supporto di .NET e .NET Core. Per la versione corrente, vedere la versione .NET 9 di questo articolo.

Questo articolo descrive i file e le cartelle che costituiscono un'app Blazor generata da un Blazor modello di progetto.

Blazor Web App

Blazor Web App modello di progetto: blazor

Il Blazor Web App modello di progetto fornisce un singolo punto di partenza per l'uso Razor di componenti (.razor) per compilare qualsiasi stile di interfaccia utente Web, sia sul lato server che sul lato client sottoposti a rendering. Combina i punti di forza di Blazor Server e Blazor WebAssembly con il rendering lato server e lato client, il rendering in streaming, la navigazione avanzata e la gestione dei moduli e la possibilità di aggiungere interattività usando Blazor Server o Blazor WebAssembly per ogni componente.

Se nella creazione dell'app vengono selezionati sia il rendering lato client che il rendering interattivo lato server (SSR interattivo), il modello di progetto usa la modalità di rendering automatico interattivo. La modalità di rendering automatico usa inizialmente SSR interattivo mentre il bundle e il runtime dell'app .NET vengono scaricati nel browser. Dopo l'attivazione del runtime .NET WebAssembly, il rendering passa a CSR.

Il Blazor Web App modello consente il rendering lato server statico e interattivo usando un singolo progetto. Se si abilita anche il 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. I componenti che usano le modalità di rendering Interattivo WebAssembly o Interactive Auto devono trovarsi nel .Client progetto.

La struttura di cartelle dei componenti del .Client progetto è diversa dalla Blazor Web Appstruttura di cartelle principale del progetto perché il progetto principale è un progetto standard ASP.NET Core. Il progetto principale deve tenere conto di altri asset per ASP.NET progetti Core non correlati a Blazor. È possibile usare la struttura di cartelle dei componenti desiderata nel .Client progetto. Se lo si desidera, è possibile eseguire il mirroring del layout della cartella del componente del progetto principale..Client Si noti che gli spazi dei nomi potrebbero richiedere modifiche per tali asset, ad esempio i file di layout, se si spostano componenti in cartelle diverse rispetto all'uso del modello di progetto.

Altre informazioni sui componenti e sulle Razor e Blazor di rendering core.

In base alla modalità di rendering interattiva selezionata durante la creazione dell'app, la Layout cartella si trova nel progetto server nella Components cartella o nella radice del .Client progetto. La cartella contiene i componenti di layout e i fogli di stile seguenti:

  • Il MainLayout componente (MainLayout.razor) è il componente di layout dell'app.
  • MainLayout.razor.css è il foglio di stile collocato (accanto al componente) per il layout principale dell'app.
  • Il NavMenu componente (NavMenu.razor) implementa la navigazione sulla barra laterale. Il componente include NavLink componenti (NavLink), che eseguono il rendering dei collegamenti di spostamento ad altri Razor componenti. Il NavLink componente indica all'utente quale componente è attualmente visualizzato.
  • NavMenu.razor.css è il foglio di stile collocato per il menu di spostamento dell'app.
  • Il ReconnectModal componente riflette lo stato della connessione lato server nell'interfaccia utente e viene incluso quando la modalità di rendering interattiva dell'app è Interactive Server o Interactive Auto. Per altre informazioni, vedere ASP.NET Linee guida di baseBlazorSignalR.
  • ReconnectModal.razor.css è il foglio di stile collocato per il ReconnectModal componente.
  • ReconnectModal.razor.js è il file JavaScript collocato per il ReconnectModal componente.
  • Il MainLayout componente (MainLayout.razor) è il componente di layout dell'app.
  • MainLayout.razor.css è il foglio di stile collocato (accanto al componente) per il layout principale dell'app.
  • Il NavMenu componente (NavMenu.razor) implementa la navigazione sulla barra laterale. Il componente include NavLink componenti (NavLink), che eseguono il rendering dei collegamenti di spostamento ad altri Razor componenti. Il NavLink componente indica all'utente quale componente è attualmente visualizzato.
  • NavMenu.razor.css è il foglio di stile collocato per il menu di spostamento dell'app.

Il Routes componente (Routes.razor) si trova nel progetto server o nel progetto e configura il .Client routing usando il Router componente . Per i componenti interattivi lato client, il Router componente intercetta lo spostamento nel browser ed esegue il rendering della pagina corrispondente all'indirizzo richiesto.

La Components cartella del progetto server contiene i componenti lato Razor server dell'app. I componenti condivisi vengono spesso posizionati nella radice della Components cartella, mentre i componenti di layout e pagina vengono in genere inseriti nelle cartelle all'interno della Components cartella.

La Components/Pages cartella del progetto server contiene i componenti lato Razor server instradabili dell'app. La route per ogni pagina viene specificata usando la @page direttiva .

Il App componente (App.razor) è il componente radice dell'app con markup HTML <head> , il Routes componente e il Blazor<script> tag . Il componente radice è il primo componente caricato dall'app.

Un _Imports.razor file in ognuno dei server e .Client dei progetti include direttive comuni Razor per Razor i componenti di entrambi i progetti, ad esempio @using direttive per gli spazi dei nomi.

La Properties cartella del progetto server contiene la configurazione dell'ambiente di sviluppo nel launchSettings.json file .

Nota

Il http profilo precede il https profilo nel launchSettings.json file. Quando un'app viene eseguita con l'interfaccia della riga di comando di .NET, l'app viene eseguita in un endpoint HTTP perché il primo profilo trovato è http. L'ordine del profilo semplifica la transizione dell'adozione di HTTPS per gli utenti Linux e macOS. Se si preferisce avviare l'app con l'interfaccia della riga di comando di .NET senza dover passare l'opzione -lp https o --launch-profile https al dotnet watch comando (o dotnet run), è sufficiente posizionare il https profilo sopra il http profilo nel file.

La wwwroot cartella del progetto server è la cartella Radice Web per il progetto server che contiene gli asset statici pubblici dell'app.

Il Program.cs file del progetto server è il punto di ingresso del progetto che configura l'host dell'applicazione Web ASP.NET Core e contiene la logica di avvio dell'app, incluse le registrazioni del servizio, la configurazione, la registrazione e la pipeline di elaborazione delle richieste:

I file di impostazioni dell'app (appsettings.Development.json, appsettings.json) nel server o .Client nel progetto forniscono le impostazioni di configurazione. Nel progetto server i file di impostazioni si trovano nella radice del progetto. .Client Nel progetto i file di impostazioni vengono utilizzati dalla cartella Radice Web, wwwroot.

Nel progetto .Client:

  • La Pages cartella contiene componenti lato Razor client instradabili. La route per ogni pagina viene specificata usando la @page direttiva .

  • La wwwroot cartella è la cartella Radice Web per il .Client progetto che contiene gli asset statici pubblici dell'app.

  • Il Program.cs file è il punto di ingresso del progetto che configura l'host WebAssembly e contiene la logica di avvio del progetto, incluse le registrazioni del servizio, la configurazione, la registrazione e la pipeline di elaborazione delle richieste.

I file e le cartelle aggiuntivi possono essere visualizzati in un'app prodotta da un Blazor Web App modello di progetto quando sono configurate opzioni aggiuntive. Ad esempio, la generazione di un'app con ASP.NET Core Identity include asset aggiuntivi per le funzionalità di autenticazione e autorizzazione.

Blazor Server

Blazor Server modelli di progetto: blazorserver, blazorserver-empty

I Blazor Server modelli creano i file iniziali e la struttura di directory per un'app Blazor Server :

  • Se viene usato il blazorserver modello, l'app viene popolata con quanto segue:
    • Codice dimostrativo per un FetchData componente che carica i dati da un servizio di previsione meteo (WeatherForecastService) e l'interazione dell'utente con un Counter componente.
    • Toolkit front-end bootstrap .
  • Se viene usato il blazorserver-empty modello, l'app viene creata senza codice dimostrativo e Bootstrap.

Struttura del progetto:

  • Data cartella: contiene la classe e l'implementazione WeatherForecast di WeatherForecastService che fornisce dati meteo di esempio al componente dell'app FetchData .

  • Pages cartella: contiene i Blazor componenti instradabili Razor dell'app (.razor) e la pagina radice Razor di un'app Blazor Server . La route per ogni pagina viene specificata usando la @page direttiva . Il modello include quanto segue:

    • _Host.cshtml: pagina radice dell'app implementata come Razor pagina:
      • Quando una pagina dell'app viene inizialmente richiesta, viene eseguito il rendering della pagina e restituita nella risposta.
      • La pagina Host specifica dove viene eseguito il rendering del componente radice App (App.razor).
    • Counter component (Counter.razor): implementa la pagina Contatore.
    • Error component (Error.razor): viene eseguito il rendering quando si verifica un'eccezione non gestita nell'app.
    • FetchData component (FetchData.razor): implementa la pagina Recupera dati.
    • Index component (Index.razor): implementa la Home pagina.

  • Properties folder: contiene la configurazione dell'ambiente di sviluppo nel launchSettings.json file.

  • Shared cartella: contiene i componenti condivisi e i fogli di stile seguenti:

    • MainLayoutcomponent (MainLayout.razor): componente di layout dell'app.
    • MainLayout.razor.css: foglio di stile per il layout principale dell'app.
    • NavMenu component (NavMenu.razor): implementa lo spostamento sulla barra laterale. Include il componente (NavLink), che esegue il NavLink rendering dei collegamenti di spostamento ad altri Razor componenti. Il NavLink componente indica automaticamente uno stato selezionato quando viene caricato il relativo componente, che consente all'utente di comprendere quale componente è attualmente visualizzato.
    • NavMenu.razor.css: foglio di stile per il menu di spostamento dell'app.
    • SurveyPrompt componente (SurveyPrompt.razor): Blazor componente del sondaggio.

  • wwwroot folder: cartella Radice Web per l'app contenente gli asset statici pubblici dell'app.

  • _Imports.razor: include direttive comuni Razor da includere nei componenti dell'app (.razor), ad esempio @using direttive per gli spazi dei nomi.

  • App.razor: componente radice dell'app che configura il routing lato client usando il Router componente . Il Router componente intercetta lo spostamento nel browser ed esegue il rendering della pagina corrispondente all'indirizzo richiesto.

  • appsettings.json e i file di impostazioni dell'app ambientale: specificare le impostazioni di configurazione per l'app.

  • Program.cs: punto di ingresso dell'app che configura l'host ASP.NET Core e contiene la logica di avvio dell'app, incluse le registrazioni del servizio e la configurazione della pipeline di elaborazione delle richieste:

    • Specifica i servizi di inserimento delle dipendenze dell'app. I servizi vengono aggiunti chiamando AddServerSideBlazore viene WeatherForecastService aggiunto al contenitore del servizio per l'uso da parte del componente di esempio FetchData .
    • Configura la pipeline di gestione delle richieste dell'app:
      • MapBlazorHub viene chiamato per configurare un endpoint per la connessione in tempo reale con il browser. La connessione viene creata con SignalR, che è un framework per l'aggiunta di funzionalità Web in tempo reale alle app.
      • MapFallbackToPage("/_Host") viene chiamato per configurare la pagina radice dell'app (Pages/_Host.cshtml) e abilitare la navigazione.

I file e le cartelle aggiuntivi possono essere visualizzati in un'app prodotta da un Blazor Server modello di progetto quando sono configurate opzioni aggiuntive. Ad esempio, la generazione di un'app con ASP.NET Core Identity include asset aggiuntivi per le funzionalità di autenticazione e autorizzazione.

Blazor Server modello di progetto: blazorserver

Il Blazor Server modello crea i file iniziali e la struttura di directory per un'app Blazor Server . L'app viene popolata con codice dimostrativo per un FetchData componente che carica i dati da un servizio registrato, WeatherForecastServicee l'interazione dell'utente con un Counter componente.

  • Data cartella: contiene la classe e l'implementazione WeatherForecast di WeatherForecastService che fornisce dati meteo di esempio al componente dell'app FetchData .

  • Pages cartella: contiene i Blazor componenti instradabili Razor dell'app (.razor) e la pagina radice Razor di un'app Blazor Server . La route per ogni pagina viene specificata usando la @page direttiva . Il modello include quanto segue:

    • _Host.cshtml: pagina radice dell'app implementata come Razor pagina:
      • Quando una pagina dell'app viene inizialmente richiesta, viene eseguito il rendering della pagina e restituita nella risposta.
      • La pagina Host specifica dove viene eseguito il rendering del componente radice App (App.razor).
    • _Layout.cshtml: pagina di layout per la _Host.cshtml pagina radice dell'app.
    • Counter component (Counter.razor): implementa la pagina Contatore.
    • Error component (Error.razor): viene eseguito il rendering quando si verifica un'eccezione non gestita nell'app.
    • FetchData component (FetchData.razor): implementa la pagina Recupera dati.
    • Index component (Index.razor): implementa la Home pagina.

  • Properties folder: contiene la configurazione dell'ambiente di sviluppo nel launchSettings.json file.

  • Shared cartella: contiene i componenti condivisi e i fogli di stile seguenti:

    • MainLayoutcomponent (MainLayout.razor): componente di layout dell'app.
    • MainLayout.razor.css: foglio di stile per il layout principale dell'app.
    • NavMenu component (NavMenu.razor): implementa lo spostamento sulla barra laterale. Include il componente (NavLink), che esegue il NavLink rendering dei collegamenti di spostamento ad altri Razor componenti. Il NavLink componente indica automaticamente uno stato selezionato quando viene caricato il relativo componente, che consente all'utente di comprendere quale componente è attualmente visualizzato.
    • NavMenu.razor.css: foglio di stile per il menu di spostamento dell'app.
    • SurveyPrompt componente (SurveyPrompt.razor): Blazor componente del sondaggio.

  • wwwroot folder: cartella Radice Web per l'app contenente gli asset statici pubblici dell'app.

  • _Imports.razor: include direttive comuni Razor da includere nei componenti dell'app (.razor), ad esempio @using direttive per gli spazi dei nomi.

  • App.razor: componente radice dell'app che configura il routing lato client usando il Router componente . Il Router componente intercetta lo spostamento nel browser ed esegue il rendering della pagina corrispondente all'indirizzo richiesto.

  • appsettings.json e i file di impostazioni dell'app ambientale: specificare le impostazioni di configurazione per l'app.

  • Program.cs: punto di ingresso dell'app che configura l'host ASP.NET Core e contiene la logica di avvio dell'app, incluse le registrazioni del servizio e la configurazione della pipeline di elaborazione delle richieste:

    • Specifica i servizi di inserimento delle dipendenze dell'app. I servizi vengono aggiunti chiamando AddServerSideBlazore viene WeatherForecastService aggiunto al contenitore del servizio per l'uso da parte del componente di esempio FetchData .
    • Configura la pipeline di gestione delle richieste dell'app:
      • MapBlazorHub viene chiamato per configurare un endpoint per la connessione in tempo reale con il browser. La connessione viene creata con SignalR, che è un framework per l'aggiunta di funzionalità Web in tempo reale alle app.
      • MapFallbackToPage("/_Host") viene chiamato per configurare la pagina radice dell'app (Pages/_Host.cshtml) e abilitare la navigazione.

I file e le cartelle aggiuntivi possono essere visualizzati in un'app prodotta da un Blazor Server modello di progetto quando sono configurate opzioni aggiuntive. Ad esempio, la generazione di un'app con ASP.NET Core Identity include asset aggiuntivi per le funzionalità di autenticazione e autorizzazione.

Blazor Server modello di progetto: blazorserver

Il Blazor Server modello crea i file iniziali e la struttura di directory per un'app Blazor Server . L'app viene popolata con codice dimostrativo per un FetchData componente che carica i dati da un servizio registrato, WeatherForecastServicee l'interazione dell'utente con un Counter componente.

  • Data cartella: contiene la classe e l'implementazione WeatherForecast di WeatherForecastService che fornisce dati meteo di esempio al componente dell'app FetchData .

  • Pages cartella: contiene i Blazor componenti instradabili Razor dell'app (.razor) e la pagina radice Razor di un'app Blazor Server . La route per ogni pagina viene specificata usando la @page direttiva . Il modello include quanto segue:

    • _Host.cshtml: pagina radice dell'app implementata come Razor pagina:
      • Quando una pagina dell'app viene inizialmente richiesta, viene eseguito il rendering della pagina e restituita nella risposta.
      • La pagina Host specifica dove viene eseguito il rendering del componente radice App (App.razor).
    • Counter component (Counter.razor): implementa la pagina Contatore.
    • Error component (Error.razor): viene eseguito il rendering quando si verifica un'eccezione non gestita nell'app.
    • FetchData component (FetchData.razor): implementa la pagina Recupera dati.
    • Index component (Index.razor): implementa la Home pagina.

  • Properties folder: contiene la configurazione dell'ambiente di sviluppo nel launchSettings.json file.

  • Shared cartella: contiene i componenti condivisi e i fogli di stile seguenti:

    • MainLayoutcomponent (MainLayout.razor): componente di layout dell'app.
    • MainLayout.razor.css: foglio di stile per il layout principale dell'app.
    • NavMenu component (NavMenu.razor): implementa lo spostamento sulla barra laterale. Include il componente (NavLink), che esegue il NavLink rendering dei collegamenti di spostamento ad altri Razor componenti. Il NavLink componente indica automaticamente uno stato selezionato quando viene caricato il relativo componente, che consente all'utente di comprendere quale componente è attualmente visualizzato.
    • NavMenu.razor.css: foglio di stile per il menu di spostamento dell'app.
    • SurveyPrompt componente (SurveyPrompt.razor): Blazor componente del sondaggio.

  • wwwroot folder: cartella Radice Web per l'app contenente gli asset statici pubblici dell'app.

  • _Imports.razor: include direttive comuni Razor da includere nei componenti dell'app (.razor), ad esempio @using direttive per gli spazi dei nomi.

  • App.razor: componente radice dell'app che configura il routing lato client usando il Router componente . Il Router componente intercetta lo spostamento nel browser ed esegue il rendering della pagina corrispondente all'indirizzo richiesto.

  • appsettings.json e i file di impostazioni dell'app ambientale: specificare le impostazioni di configurazione per l'app.

  • Program.cs: punto di ingresso dell'app che configura l'host ASP.NET Core.

  • Startup.cs: contiene la logica di avvio dell'app. La Startup classe definisce due metodi:

    • ConfigureServices: configura i servizi di inserimento delle dipendenze (DI) dell'app. I servizi vengono aggiunti chiamando AddServerSideBlazore viene WeatherForecastService aggiunto al contenitore del servizio per l'uso da parte del componente di esempio FetchData .
    • Configure: configura la pipeline di gestione delle richieste dell'app:
      • MapBlazorHub viene chiamato per configurare un endpoint per la connessione in tempo reale con il browser. La connessione viene creata con SignalR, che è un framework per l'aggiunta di funzionalità Web in tempo reale alle app.
      • MapFallbackToPage("/_Host") viene chiamato per configurare la pagina radice dell'app (Pages/_Host.cshtml) e abilitare la navigazione.

I file e le cartelle aggiuntivi possono essere visualizzati in un'app prodotta da un Blazor Server modello di progetto quando sono configurate opzioni aggiuntive. Ad esempio, la generazione di un'app con ASP.NET Core Identity include asset aggiuntivi per le funzionalità di autenticazione e autorizzazione.

Blazor Server modello di progetto: blazorserver

Il Blazor Server modello crea i file iniziali e la struttura di directory per un'app Blazor Server . L'app viene popolata con codice dimostrativo per un FetchData componente che carica i dati da un servizio registrato, WeatherForecastServicee l'interazione dell'utente con un Counter componente.

  • Data cartella: contiene la classe e l'implementazione WeatherForecast di WeatherForecastService che fornisce dati meteo di esempio al componente dell'app FetchData .

  • Pages cartella: contiene i Blazor componenti instradabili Razor dell'app (.razor) e la pagina radice Razor di un'app Blazor Server . La route per ogni pagina viene specificata usando la @page direttiva . Il modello include quanto segue:

    • _Host.cshtml: pagina radice dell'app implementata come Razor pagina:
      • Quando una pagina dell'app viene inizialmente richiesta, viene eseguito il rendering della pagina e restituita nella risposta.
      • La pagina Host specifica dove viene eseguito il rendering del componente radice App (App.razor).
    • Counter component (Counter.razor): implementa la pagina Contatore.
    • Error component (Error.razor): viene eseguito il rendering quando si verifica un'eccezione non gestita nell'app.
    • FetchData component (FetchData.razor): implementa la pagina Recupera dati.
    • Index component (Index.razor): implementa la Home pagina.

  • Properties folder: contiene la configurazione dell'ambiente di sviluppo nel launchSettings.json file.

  • Shared cartella: contiene i componenti condivisi seguenti:

    • MainLayoutcomponent (MainLayout.razor): componente di layout dell'app.
    • NavMenu component (NavMenu.razor): implementa lo spostamento sulla barra laterale. Include il componente (NavLink), che esegue il NavLink rendering dei collegamenti di spostamento ad altri Razor componenti. Il NavLink componente indica automaticamente uno stato selezionato quando viene caricato il relativo componente, che consente all'utente di comprendere quale componente è attualmente visualizzato.
    • SurveyPrompt componente (SurveyPrompt.razor): Blazor componente del sondaggio.

  • wwwroot folder: cartella Radice Web per l'app contenente gli asset statici pubblici dell'app.

  • _Imports.razor: include direttive comuni Razor da includere nei componenti dell'app (.razor), ad esempio @using direttive per gli spazi dei nomi.

  • App.razor: componente radice dell'app che configura il routing lato client usando il Router componente . Il Router componente intercetta lo spostamento nel browser ed esegue il rendering della pagina corrispondente all'indirizzo richiesto.

  • appsettings.json e i file di impostazioni dell'app ambientale: specificare le impostazioni di configurazione per l'app.

  • Program.cs: punto di ingresso dell'app che configura l'host ASP.NET Core.

  • Startup.cs: contiene la logica di avvio dell'app. La Startup classe definisce due metodi:

    • ConfigureServices: configura i servizi di inserimento delle dipendenze (DI) dell'app. I servizi vengono aggiunti chiamando AddServerSideBlazore viene WeatherForecastService aggiunto al contenitore del servizio per l'uso da parte del componente di esempio FetchData .
    • Configure: configura la pipeline di gestione delle richieste dell'app:
      • MapBlazorHub viene chiamato per configurare un endpoint per la connessione in tempo reale con il browser. La connessione viene creata con SignalR, che è un framework per l'aggiunta di funzionalità Web in tempo reale alle app.
      • MapFallbackToPage("/_Host") viene chiamato per configurare la pagina radice dell'app (Pages/_Host.cshtml) e abilitare la navigazione.

I file e le cartelle aggiuntivi possono essere visualizzati in un'app prodotta da un Blazor Server modello di progetto quando sono configurate opzioni aggiuntive. Ad esempio, la generazione di un'app con ASP.NET Core Identity include asset aggiuntivi per le funzionalità di autenticazione e autorizzazione.

Autonomo Blazor WebAssembly

Modello di progetto autonomo Blazor WebAssembly : blazorwasm

Il Blazor WebAssembly modello crea i file iniziali e la struttura di directory per un'app autonoma Blazor WebAssembly :

  • Se viene usato il blazorwasm modello, l'app viene popolata con quanto segue:
    • Codice dimostrativo per un Weather componente che carica i dati da un asset statico (weather.json) e l'interazione dell'utente con un Counter componente.
    • Toolkit front-end bootstrap .
  • Il blazorwasm modello può anche essere generato senza pagine di esempio e stili.

Struttura del progetto:

  • Layout cartella: contiene i componenti di layout e i fogli di stile seguenti:
    • MainLayoutcomponent (MainLayout.razor): componente di layout dell'app.
    • MainLayout.razor.css: foglio di stile per il layout principale dell'app.
    • NavMenu component (NavMenu.razor): implementa lo spostamento sulla barra laterale. Include il componente (NavLink), che esegue il NavLink rendering dei collegamenti di spostamento ad altri Razor componenti. Il NavLink componente indica automaticamente uno stato selezionato quando viene caricato il relativo componente, che consente all'utente di comprendere quale componente è attualmente visualizzato.
    • NavMenu.razor.css: foglio di stile per il menu di spostamento dell'app.
  • Pages folder: contiene i Blazor componenti instradabili Razor dell'app (.razor). La route per ogni pagina viene specificata usando la @page direttiva . Il modello include i componenti seguenti:
    • Counter component (Counter.razor): implementa la pagina Contatore.
    • Index component (Index.razor): implementa la Home pagina.
    • Weather component (Weather.razor): implementa la pagina Meteo.

  • _Imports.razor: include direttive comuni Razor da includere nei componenti dell'app (.razor), ad esempio @using direttive per gli spazi dei nomi.

  • App.razor: componente radice dell'app che configura il routing lato client usando il Router componente . Il Router componente intercetta lo spostamento nel browser ed esegue il rendering della pagina corrispondente all'indirizzo richiesto.

  • Properties folder: contiene la configurazione dell'ambiente di sviluppo nel launchSettings.json file.

    Nota

    Il http profilo precede il https profilo nel launchSettings.json file. Quando un'app viene eseguita con l'interfaccia della riga di comando di .NET, l'app viene eseguita in un endpoint HTTP perché il primo profilo trovato è http. L'ordine del profilo semplifica la transizione dell'adozione di HTTPS per gli utenti Linux e macOS. Se si preferisce avviare l'app con l'interfaccia della riga di comando di .NET senza dover passare l'opzione -lp https o --launch-profile https al dotnet watch comando (o dotnet run), è sufficiente posizionare il https profilo sopra il http profilo nel file.

  • wwwroot cartella: la cartella Radice Web per l'app contenente gli asset statici pubblici dell'app, inclusi appsettings.json i file di impostazioni dell'app ambientale e le impostazioni dell'app per le impostazioni di configurazione e i dati meteo di esempio (sample-data/weather.json). La index.html pagina Web è la pagina radice dell'app implementata come pagina HTML:

    • Quando una pagina dell'app viene inizialmente richiesta, viene eseguito il rendering della pagina e restituita nella risposta.
    • La pagina specifica dove viene eseguito il rendering del componente radice App . Il rendering del componente viene eseguito nella posizione dell'elemento div DOM con un id valore (app<div id="app">Loading...</div>).

  • Program.cs: punto di ingresso dell'app che configura l'host WebAssembly:

    • Il App componente è il componente radice dell'app. Il App componente viene specificato come div elemento DOM con un id di app (<div id="app">Loading...</div> in wwwroot/index.html) alla raccolta di componenti radice (builder.RootComponents.Add<App>("#app")).
    • I servizi vengono aggiunti e configurati (ad esempio, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

I file e le cartelle aggiuntivi possono essere visualizzati in un'app prodotta da un Blazor WebAssembly modello di progetto quando sono configurate opzioni aggiuntive. Ad esempio, la generazione di un'app con ASP.NET Core Identity include asset aggiuntivi per le funzionalità di autenticazione e autorizzazione.

Blazor WebAssembly

Blazor WebAssembly modelli di progetto: blazorwasm, blazorwasm-empty

I Blazor WebAssembly modelli creano i file iniziali e la struttura di directory per un'app Blazor WebAssembly :

  • Se viene usato il blazorwasm modello, l'app viene popolata con quanto segue:
    • Codice dimostrativo per un FetchData componente che carica i dati da un asset statico (weather.json) e l'interazione dell'utente con un Counter componente.
    • Toolkit front-end bootstrap .
  • Se viene usato il blazorwasm-empty modello, l'app viene creata senza codice dimostrativo e Bootstrap.

Struttura del progetto:

  • Pages folder: contiene i Blazor componenti instradabili Razor dell'app (.razor). La route per ogni pagina viene specificata usando la @page direttiva . Il modello include i componenti seguenti:

    • Counter component (Counter.razor): implementa la pagina Contatore.
    • FetchData component (FetchData.razor): implementa la pagina Recupera dati.
    • Index component (Index.razor): implementa la Home pagina.

  • Properties folder: contiene la configurazione dell'ambiente di sviluppo nel launchSettings.json file.

  • Shared cartella: contiene i componenti condivisi e i fogli di stile seguenti:

    • MainLayoutcomponent (MainLayout.razor): componente di layout dell'app.
    • MainLayout.razor.css: foglio di stile per il layout principale dell'app.
    • NavMenu component (NavMenu.razor): implementa lo spostamento sulla barra laterale. Include il componente (NavLink), che esegue il NavLink rendering dei collegamenti di spostamento ad altri Razor componenti. Il NavLink componente indica automaticamente uno stato selezionato quando viene caricato il relativo componente, che consente all'utente di comprendere quale componente è attualmente visualizzato.
    • NavMenu.razor.css: foglio di stile per il menu di spostamento dell'app.
    • SurveyPromptcomponente () (SurveyPrompt.razorASP.NET Core in .NET 7 o versioni precedenti): Blazor componente del sondaggio.

  • wwwroot folder: la cartella Radice Web per l'app contenente gli asset statici pubblici dell'app, inclusi appsettings.json i file di impostazioni dell'app ambientale e per le impostazioni di configurazione. La index.html pagina Web è la pagina radice dell'app implementata come pagina HTML:

    • Quando una pagina dell'app viene inizialmente richiesta, viene eseguito il rendering della pagina e restituita nella risposta.
    • La pagina specifica dove viene eseguito il rendering del componente radice App . Il rendering del componente viene eseguito nella posizione dell'elemento div DOM con un id valore (app<div id="app">Loading...</div>).

  • _Imports.razor: include direttive comuni Razor da includere nei componenti dell'app (.razor), ad esempio @using direttive per gli spazi dei nomi.

  • App.razor: componente radice dell'app che configura il routing lato client usando il Router componente . Il Router componente intercetta lo spostamento nel browser ed esegue il rendering della pagina corrispondente all'indirizzo richiesto.

  • Program.cs: punto di ingresso dell'app che configura l'host WebAssembly:

    • Il App componente è il componente radice dell'app. Il App componente viene specificato come div elemento DOM con un id di app (<div id="app">Loading...</div> in wwwroot/index.html) alla raccolta di componenti radice (builder.RootComponents.Add<App>("#app")).
    • I servizi vengono aggiunti e configurati (ad esempio, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

I file e le cartelle aggiuntivi possono essere visualizzati in un'app prodotta da un Blazor WebAssembly modello di progetto quando sono configurate opzioni aggiuntive. Ad esempio, la generazione di un'app con ASP.NET Core Identity include asset aggiuntivi per le funzionalità di autenticazione e autorizzazione.

Una Blazor WebAssembly ospitata include i progetti principali di ASP.NET seguenti:

  • "Client": l'app Blazor WebAssembly .
  • "Server": un'app che gestisce i dati meteo e dell'app Blazor WebAssembly ai client.
  • "Shared": progetto che gestisce classi, metodi e risorse comuni.

La soluzione viene generata dal Blazor WebAssembly modello di progetto in Visual Studio con la casella di controllo ASP.NET Core Hosted selezionata o con l'opzione -ho|--hosted usando il comando dell'interfaccia della riga di comando di dotnet new blazorwasm .NET. Per altre informazioni, vedere Strumenti per ASP.NET Core Blazor.

La struttura del progetto dell'app sul lato client in una soluzione Webassembly ospitata Blazor ("Client" progetto) corrisponde alla struttura del progetto per un'app autonoma Blazor WebAssembly . File aggiuntivi in una soluzione ospitata Blazor WebAssembly :

  • Il progetto "Server" include un controller delle previsioni meteo in Controllers/WeatherForecastController.cs che restituisce i dati meteo al componente del Client progetto "FetchData".
  • Il progetto "Shared" include una classe di previsioni meteo in WeatherForecast.cs che rappresenta i dati meteo per i progetti "Client" e "Server".

Blazor WebAssembly

Blazor WebAssembly modello di progetto: blazorwasm

Il Blazor WebAssembly modello crea i file iniziali e la struttura di directory per un'app Blazor WebAssembly . L'app viene popolata con codice dimostrativo per un FetchData componente che carica i dati da un asset statico, weather.jsone l'interazione dell'utente con un Counter componente.

  • Pages folder: contiene i Blazor componenti instradabili Razor dell'app (.razor). La route per ogni pagina viene specificata usando la @page direttiva . Il modello include i componenti seguenti:

    • Counter component (Counter.razor): implementa la pagina Contatore.
    • FetchData component (FetchData.razor): implementa la pagina Recupera dati.
    • Index component (Index.razor): implementa la Home pagina.

  • Properties folder: contiene la configurazione dell'ambiente di sviluppo nel launchSettings.json file.

  • Shared cartella: contiene i componenti condivisi e i fogli di stile seguenti:

    • MainLayoutcomponent (MainLayout.razor): componente di layout dell'app.
    • MainLayout.razor.css: foglio di stile per il layout principale dell'app.
    • NavMenu component (NavMenu.razor): implementa lo spostamento sulla barra laterale. Include il componente (NavLink), che esegue il NavLink rendering dei collegamenti di spostamento ad altri Razor componenti. Il NavLink componente indica automaticamente uno stato selezionato quando viene caricato il relativo componente, che consente all'utente di comprendere quale componente è attualmente visualizzato.
    • NavMenu.razor.css: foglio di stile per il menu di spostamento dell'app.
    • SurveyPrompt componente (SurveyPrompt.razor): Blazor componente del sondaggio.

  • wwwroot folder: la cartella Radice Web per l'app contenente gli asset statici pubblici dell'app, inclusi appsettings.json i file di impostazioni dell'app ambientale e per le impostazioni di configurazione. La index.html pagina Web è la pagina radice dell'app implementata come pagina HTML:

    • Quando una pagina dell'app viene inizialmente richiesta, viene eseguito il rendering della pagina e restituita nella risposta.
    • La pagina specifica dove viene eseguito il rendering del componente radice App . Il rendering del componente viene eseguito nella posizione dell'elemento div DOM con un id valore (app<div id="app">Loading...</div>).

  • _Imports.razor: include direttive comuni Razor da includere nei componenti dell'app (.razor), ad esempio @using direttive per gli spazi dei nomi.

  • App.razor: componente radice dell'app che configura il routing lato client usando il Router componente . Il Router componente intercetta lo spostamento nel browser ed esegue il rendering della pagina corrispondente all'indirizzo richiesto.

  • Program.cs: punto di ingresso dell'app che configura l'host WebAssembly:

    • Il App componente è il componente radice dell'app. Il App componente viene specificato come div elemento DOM con un id di app (<div id="app">Loading...</div> in wwwroot/index.html) alla raccolta di componenti radice (builder.RootComponents.Add<App>("#app")).
    • I servizi vengono aggiunti e configurati (ad esempio, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

I file e le cartelle aggiuntivi possono essere visualizzati in un'app prodotta da un Blazor WebAssembly modello di progetto quando sono configurate opzioni aggiuntive. Ad esempio, la generazione di un'app con ASP.NET Core Identity include asset aggiuntivi per le funzionalità di autenticazione e autorizzazione.

Una Blazor WebAssembly ospitata include i progetti principali di ASP.NET seguenti:

  • "Client": l'app Blazor WebAssembly .
  • "Server": un'app che gestisce i dati meteo e dell'app Blazor WebAssembly ai client.
  • "Shared": progetto che gestisce classi, metodi e risorse comuni.

La soluzione viene generata dal Blazor WebAssembly modello di progetto in Visual Studio con la casella di controllo ASP.NET Core Hosted selezionata o con l'opzione -ho|--hosted usando il comando dell'interfaccia della riga di comando di dotnet new blazorwasm .NET. Per altre informazioni, vedere Strumenti per ASP.NET Core Blazor.

La struttura del progetto dell'app sul lato client in una soluzione Webassembly ospitata Blazor ("Client" progetto) corrisponde alla struttura del progetto per un'app autonoma Blazor WebAssembly . File aggiuntivi in una soluzione ospitata Blazor WebAssembly :

  • Il progetto "Server" include un controller delle previsioni meteo in Controllers/WeatherForecastController.cs che restituisce i dati meteo al componente del Client progetto "FetchData".
  • Il progetto "Shared" include una classe di previsioni meteo in WeatherForecast.cs che rappresenta i dati meteo per i progetti "Client" e "Server".

Blazor WebAssembly

Blazor WebAssembly modello di progetto: blazorwasm

Il Blazor WebAssembly modello crea i file iniziali e la struttura di directory per un'app Blazor WebAssembly . L'app viene popolata con codice dimostrativo per un FetchData componente che carica i dati da un asset statico, weather.jsone l'interazione dell'utente con un Counter componente.

  • Pages folder: contiene i Blazor componenti instradabili Razor dell'app (.razor). La route per ogni pagina viene specificata usando la @page direttiva . Il modello include i componenti seguenti:

    • Counter component (Counter.razor): implementa la pagina Contatore.
    • FetchData component (FetchData.razor): implementa la pagina Recupera dati.
    • Index component (Index.razor): implementa la Home pagina.

  • Properties folder: contiene la configurazione dell'ambiente di sviluppo nel launchSettings.json file.

  • Shared cartella: contiene i componenti condivisi e i fogli di stile seguenti:

    • MainLayoutcomponent (MainLayout.razor): componente di layout dell'app.
    • MainLayout.razor.css: foglio di stile per il layout principale dell'app.
    • NavMenu component (NavMenu.razor): implementa lo spostamento sulla barra laterale. Include il componente (NavLink), che esegue il NavLink rendering dei collegamenti di spostamento ad altri Razor componenti. Il NavLink componente indica automaticamente uno stato selezionato quando viene caricato il relativo componente, che consente all'utente di comprendere quale componente è attualmente visualizzato.
    • NavMenu.razor.css: foglio di stile per il menu di spostamento dell'app.
    • SurveyPrompt componente (SurveyPrompt.razor): Blazor componente del sondaggio.

  • wwwroot folder: la cartella Radice Web per l'app contenente gli asset statici pubblici dell'app, inclusi appsettings.json i file di impostazioni dell'app ambientale e per le impostazioni di configurazione. La index.html pagina Web è la pagina radice dell'app implementata come pagina HTML:

    • Quando una pagina dell'app viene inizialmente richiesta, viene eseguito il rendering della pagina e restituita nella risposta.
    • La pagina specifica dove viene eseguito il rendering del componente radice App . Il rendering del componente viene eseguito nella posizione dell'elemento div DOM con un id valore (app<div id="app">Loading...</div>).

  • _Imports.razor: include direttive comuni Razor da includere nei componenti dell'app (.razor), ad esempio @using direttive per gli spazi dei nomi.

  • App.razor: componente radice dell'app che configura il routing lato client usando il Router componente . Il Router componente intercetta lo spostamento nel browser ed esegue il rendering della pagina corrispondente all'indirizzo richiesto.

  • Program.cs: punto di ingresso dell'app che configura l'host WebAssembly:

    • Il App componente è il componente radice dell'app. Il App componente viene specificato come div elemento DOM con un id di app (<div id="app">Loading...</div> in wwwroot/index.html) alla raccolta di componenti radice (builder.RootComponents.Add<App>("#app")).
    • I servizi vengono aggiunti e configurati (ad esempio, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

I file e le cartelle aggiuntivi possono essere visualizzati in un'app prodotta da un Blazor WebAssembly modello di progetto quando sono configurate opzioni aggiuntive. Ad esempio, la generazione di un'app con ASP.NET Core Identity include asset aggiuntivi per le funzionalità di autenticazione e autorizzazione.

Una Blazor WebAssembly ospitata include i progetti principali di ASP.NET seguenti:

  • "Client": l'app Blazor WebAssembly .
  • "Server": un'app che gestisce i dati meteo e dell'app Blazor WebAssembly ai client.
  • "Shared": progetto che gestisce classi, metodi e risorse comuni.

La soluzione viene generata dal Blazor WebAssembly modello di progetto in Visual Studio con la casella di controllo ASP.NET Core Hosted selezionata o con l'opzione -ho|--hosted usando il comando dell'interfaccia della riga di comando di dotnet new blazorwasm .NET. Per altre informazioni, vedere Strumenti per ASP.NET Core Blazor.

La struttura del progetto dell'app sul lato client in una soluzione Webassembly ospitata Blazor ("Client" progetto) corrisponde alla struttura del progetto per un'app autonoma Blazor WebAssembly . File aggiuntivi in una soluzione ospitata Blazor WebAssembly :

  • Il progetto "Server" include un controller delle previsioni meteo in Controllers/WeatherForecastController.cs che restituisce i dati meteo al componente del Client progetto "FetchData".
  • Il progetto "Shared" include una classe di previsioni meteo in WeatherForecast.cs che rappresenta i dati meteo per i progetti "Client" e "Server".

Blazor WebAssembly

Blazor WebAssembly modello di progetto: blazorwasm

Il Blazor WebAssembly modello crea i file iniziali e la struttura di directory per un'app Blazor WebAssembly . L'app viene popolata con codice dimostrativo per un FetchData componente che carica i dati da un asset statico, weather.jsone l'interazione dell'utente con un Counter componente.

  • Pages folder: contiene i Blazor componenti instradabili Razor dell'app (.razor). La route per ogni pagina viene specificata usando la @page direttiva . Il modello include i componenti seguenti:

    • Counter component (Counter.razor): implementa la pagina Contatore.
    • FetchData component (FetchData.razor): implementa la pagina Recupera dati.
    • Index component (Index.razor): implementa la Home pagina.

  • Properties folder: contiene la configurazione dell'ambiente di sviluppo nel launchSettings.json file.

  • Shared cartella: contiene i componenti condivisi seguenti:

    • MainLayoutcomponent (MainLayout.razor): componente di layout dell'app.
    • NavMenu component (NavMenu.razor): implementa lo spostamento sulla barra laterale. Include il componente (NavLink), che esegue il NavLink rendering dei collegamenti di spostamento ad altri Razor componenti. Il NavLink componente indica automaticamente uno stato selezionato quando viene caricato il relativo componente, che consente all'utente di comprendere quale componente è attualmente visualizzato.
    • SurveyPrompt componente (SurveyPrompt.razor): Blazor componente del sondaggio.

  • wwwroot folder: la cartella Radice Web per l'app contenente gli asset statici pubblici dell'app, inclusi appsettings.json i file di impostazioni dell'app ambientale e per le impostazioni di configurazione. La index.html pagina Web è la pagina radice dell'app implementata come pagina HTML:

    • Quando una pagina dell'app viene inizialmente richiesta, viene eseguito il rendering della pagina e restituita nella risposta.
    • La pagina specifica dove viene eseguito il rendering del componente radice App . Il rendering del componente viene eseguito nella posizione dell'elemento app DOM (<app>Loading...</app>).

  • _Imports.razor: include direttive comuni Razor da includere nei componenti dell'app (.razor), ad esempio @using direttive per gli spazi dei nomi.

  • App.razor: componente radice dell'app che configura il routing lato client usando il Router componente . Il Router componente intercetta lo spostamento nel browser ed esegue il rendering della pagina corrispondente all'indirizzo richiesto.

  • Program.cs: punto di ingresso dell'app che configura l'host WebAssembly:

    • Il App componente è il componente radice dell'app. Il App componente viene specificato come app elemento DOM (<app>Loading...</app> in wwwroot/index.html) alla raccolta di componenti radice (builder.RootComponents.Add<App>("app")).
    • I servizi vengono aggiunti e configurati (ad esempio, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

I file e le cartelle aggiuntivi possono essere visualizzati in un'app prodotta da un Blazor WebAssembly modello di progetto quando sono configurate opzioni aggiuntive. Ad esempio, la generazione di un'app con ASP.NET Core Identity include asset aggiuntivi per le funzionalità di autenticazione e autorizzazione.

Una Blazor WebAssembly ospitata include i progetti principali di ASP.NET seguenti:

  • "Client": l'app Blazor WebAssembly .
  • "Server": un'app che gestisce i dati meteo e dell'app Blazor WebAssembly ai client.
  • "Shared": progetto che gestisce classi, metodi e risorse comuni.

La soluzione viene generata dal Blazor WebAssembly modello di progetto in Visual Studio con la casella di controllo ASP.NET Core Hosted selezionata o con l'opzione -ho|--hosted usando il comando dell'interfaccia della riga di comando di dotnet new blazorwasm .NET. Per altre informazioni, vedere Strumenti per ASP.NET Core Blazor.

La struttura del progetto dell'app sul lato client in una soluzione Webassembly ospitata Blazor ("Client" progetto) corrisponde alla struttura del progetto per un'app autonoma Blazor WebAssembly . File aggiuntivi in una soluzione ospitata Blazor WebAssembly :

  • Il progetto "Server" include un controller delle previsioni meteo in Controllers/WeatherForecastController.cs che restituisce i dati meteo al componente del Client progetto "FetchData".
  • Il progetto "Shared" include una classe di previsioni meteo in WeatherForecast.cs che rappresenta i dati meteo per i progetti "Client" e "Server".

Posizione dello Blazor script

Lo script Blazor viene utilizzato come asset Web statico con compressione automatica e impronta digitale. Per ulteriori informazioni, vedere ASP.NET Core Blazor file statici.

In , Blazor Web Applo Blazor script si trova nel Components/App.razor file :

<script src="@Assets["_framework/blazor.web.js"]"></script>

In un'app Blazor Server lo Blazor script si trova nel Pages/_Host.cshtml file :

<script src="_framework/blazor.server.js"></script>

Lo Blazor script viene gestito da una risorsa incorporata nel framework condiviso ASP.NET Core.

In , Blazor Web Applo Blazor script si trova nel Components/App.razor file :

<script src="_framework/blazor.web.js"></script>

In un'app Blazor Server lo Blazor script si trova nel Pages/_Host.cshtml file :

<script src="_framework/blazor.server.js"></script>

Lo Blazor script viene gestito da una risorsa incorporata nel framework condiviso ASP.NET Core.

In un'app Blazor Server lo Blazor script si trova nel Pages/_Host.cshtml file :

<script src="_framework/blazor.server.js"></script>

Lo Blazor script viene gestito da una risorsa incorporata nel framework condiviso ASP.NET Core.

In un'app Blazor Server lo Blazor script si trova nel Pages/_Layout.cshtml file :

<script src="_framework/blazor.server.js"></script>

Lo Blazor script viene gestito da una risorsa incorporata nel framework condiviso ASP.NET Core.

In un'app Blazor Server lo Blazor script si trova nel Pages/_Host.cshtml file :

<script src="_framework/blazor.server.js"></script>

Per un'app Blazor Web App o , Blazor Server il progetto deve contenere almeno un Razor file di componente (.razor) per includere automaticamente lo Blazor script quando l'app viene pubblicata. Se il progetto non contiene almeno un Razor componente, impostare la RequiresAspNetWebAssets proprietà MSBuild su true nel file di progetto dell'app per includere lo Blazor script:

<RequiresAspNetWebAssets>true</RequiresAspNetWebAssets>

In un'app Blazor WebAssembly il Blazor contenuto dello script si trova nel wwwroot/index.html file:

<script src="_framework/blazor.webassembly#[.{fingerprint}].js"></script>

Quando l'app viene pubblicata, il {fingerprint} segnaposto viene sostituito automaticamente con un hash univoco per il busting della cache.

<script src="_framework/blazor.webassembly.js"></script>

Posizione e <head><body> contenuto

In un Blazor Web Appoggetto e <head><body> il contenuto si trova nel Components/App.razor file .

In un'app Blazor Server<head> e <body> il contenuto si trova nel Pages/_Host.cshtml file.

In un'app Blazor Server<head> e <body> il contenuto si trova nel Pages/_Layout.cshtml file.

In un'app Blazor Server<head> e <body> il contenuto si trova nel Pages/_Host.cshtml file.

In un'app Blazor WebAssembly<head> e <body> il contenuto si trova nel wwwroot/index.html file.

Doppia Blazor Server/Blazor WebAssembly app

Per creare un'app che possa essere eseguita come Blazor Server un'app o un'appBlazor WebAssembly, un approccio consiste nell'inserire tutti i componenti e la logica dell'app in una Razor libreria di classi (RCL) e fare riferimento all'RCL da progetti e Blazor Server separatiBlazor WebAssembly. Per i servizi comuni le cui implementazioni differiscono in base al modello di hosting, definire le interfacce del servizio nell'RCL e implementare i servizi nei Blazor Server progetti e Blazor WebAssembly .

Risorse aggiuntive

  • Last updated on