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 8 di questo articolo.
Avviso
Questa versione di ASP.NET Core non è più supportata. Per altre informazioni, vedere Criteri di supporto di .NET e .NET Core. 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 i file e le cartelle che costituiscono un'app Blazor generata da un Blazor modello di progetto.
App Web Blazor
Blazor Modello di progetto app Web: blazor
Il Blazor modello di progetto App Web fornisce un singolo punto di partenza per l'uso Razor di componenti per compilare qualsiasi stile di interfaccia utente Web, sia sul lato server che sul lato client sottoposti a rendering. Combina i punti di forza dei modelli esistenti Blazor Server e Blazor WebAssembly di hosting con il rendering lato server, 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.
Per impostazione predefinita, il Blazor modello app Web abilita 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.
Per altre informazioni, vedere ASP.NET Modalità di rendering coreBlazor.
Progetto server:
Components
cartella:Layout
cartella: contiene i componenti di layout e i fogli di stile seguenti:MainLayout
component (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 ilNavLink
rendering dei collegamenti di spostamento ad altri Razor componenti. Il NavLink componente indica all'utente quale componente è attualmente visualizzato.NavMenu.razor.css
: foglio di stile per il menu di spostamento dell'app.
Pages
cartella: contiene i componenti sul lato Razor server instradabili dell'app (.razor
). La route per ogni pagina viene specificata usando la@page
direttiva . Il modello include quanto segue:Counter
component (Counter.razor
): implementa la pagina Contatore .Error
component (Error.razor
): implementa la pagina Errore .Home
component (Home.razor
): implementa la Home pagina.Weather
component (Weather.razor
): implementa la pagina Previsioni meteo.
App
component (App.razor
): componente radice dell'app con markup HTML<head>
, componenteRoutes
e Blazor<script>
tag. Il componente radice è il primo componente caricato dall'app.Routes
component (Routes.razor
): configura il 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._Imports.razor
: include direttive comuni Razor da includere nei componenti dell'app di cui è stato eseguito il rendering del server (.razor
), ad esempio@using
le direttive per gli spazi dei nomi.
Properties
folder: contiene la configurazione dell'ambiente di sviluppo nellaunchSettings.json
file.Nota
Il
http
profilo precede ilhttps
profilo nellaunchSettings.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
aldotnet watch
comando (odotnet run
), è sufficiente posizionare ilhttps
profilo sopra ilhttp
profilo nel file.wwwroot
folder: cartella Radice Web per il progetto server contenente gli asset statici pubblici dell'app.Program.cs
file: il punto di ingresso del progetto server che configura l'host dell'applicazione Web principale di ASP.NET 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 servizi per Razor i componenti vengono aggiunti chiamando AddRazorComponents. AddInteractiveServerComponents aggiunge servizi per supportare il rendering dei componenti Interactive Server. AddInteractiveWebAssemblyComponents aggiunge servizi per supportare il rendering dei componenti Interactive WebAssembly.
- MapRazorComponents individua i componenti disponibili e specifica il componente radice per l'app (il primo componente caricato), che per impostazione predefinita è il
App
componente (App.razor
). AddInteractiveServerRenderMode configura il rendering interattivo lato server (SSR interattivo) per l'app. AddInteractiveWebAssemblyRenderMode configura la modalità di rendering Interactive WebAssembly per l'app.
File di impostazioni dell'app (
appsettings.Development.json
,appsettings.json
): specificare le impostazioni di configurazione per il progetto server.
Progetto client (
.Client
):Pages
cartella: contiene i componenti lato Razor client instradabili dell'app (.razor
). La route per ogni pagina viene specificata usando la@page
direttiva . Il modello includeCounter
il componente (Counter.razor
) che implementa la pagina Contatore .La struttura di cartelle dei componenti del
.Client
progetto differisce dalla Blazor struttura principale della cartella di progetto dell'app Web 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.Il
.Client
progetto è puramente un Blazor progetto e non è necessario integrarlo altrettanto con le funzionalità e le specifiche diBlazor ASP.NET Core, quindi usa una struttura di cartelle dei componenti meno complessa. Tuttavia, è 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.Cartella Radice Web per il progetto lato client contenente gli asset statici pubblici dell'app, inclusi i file di impostazioni dell'app (
appsettings.Development.json
,appsettings.json
) che forniscono le impostazioni di configurazione per il progetto lato client.Program.cs
file: punto di ingresso del progetto sul lato client 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._Imports.razor
: include direttive comuni Razor da includere nei componenti dell'app di cui è stato eseguito il rendering WebAssembly (.razor
), ad esempio@using
direttive per gli spazi dei nomi.
I file e le cartelle aggiuntivi possono essere visualizzati in un'app prodotta da un Blazor modello di progetto app Web 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 unCounter
componente. - Toolkit front-end bootstrap .
- Codice dimostrativo per un
- 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'implementazioneWeatherForecast
diWeatherForecastService
che fornisce dati meteo di esempio al componente dell'appFetchData
.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 nellaunchSettings.json
file.Shared
cartella: contiene i componenti condivisi e i fogli di stile seguenti:MainLayout
component (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 ilNavLink
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 esempioFetchData
. - 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.
- Specifica i servizi di inserimento delle dipendenze dell'app. I servizi vengono aggiunti chiamando AddServerSideBlazore viene
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, WeatherForecastService
e l'interazione dell'utente con un Counter
componente.
Data
cartella: contiene la classe e l'implementazioneWeatherForecast
diWeatherForecastService
che fornisce dati meteo di esempio al componente dell'appFetchData
.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 nellaunchSettings.json
file.Shared
cartella: contiene i componenti condivisi e i fogli di stile seguenti:MainLayout
component (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 ilNavLink
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 esempioFetchData
. - 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.
- Specifica i servizi di inserimento delle dipendenze dell'app. I servizi vengono aggiunti chiamando AddServerSideBlazore viene
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, WeatherForecastService
e l'interazione dell'utente con un Counter
componente.
Data
cartella: contiene la classe e l'implementazioneWeatherForecast
diWeatherForecastService
che fornisce dati meteo di esempio al componente dell'appFetchData
.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 nellaunchSettings.json
file.Shared
cartella: contiene i componenti condivisi e i fogli di stile seguenti:MainLayout
component (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 ilNavLink
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. LaStartup
classe definisce due metodi:ConfigureServices
: configura i servizi di inserimento delle dipendenze (DI) dell'app. I servizi vengono aggiunti chiamando AddServerSideBlazore vieneWeatherForecastService
aggiunto al contenitore del servizio per l'uso da parte del componente di esempioFetchData
.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, WeatherForecastService
e l'interazione dell'utente con un Counter
componente.
Data
cartella: contiene la classe e l'implementazioneWeatherForecast
diWeatherForecastService
che fornisce dati meteo di esempio al componente dell'appFetchData
.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 nellaunchSettings.json
file.Shared
cartella: contiene i componenti condivisi seguenti:MainLayout
component (MainLayout.razor
): componente di layout dell'app.NavMenu
component (NavMenu.razor
): implementa lo spostamento sulla barra laterale. Include il componente (NavLink), che esegue ilNavLink
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. LaStartup
classe definisce due metodi:ConfigureServices
: configura i servizi di inserimento delle dipendenze (DI) dell'app. I servizi vengono aggiunti chiamando AddServerSideBlazore vieneWeatherForecastService
aggiunto al contenitore del servizio per l'uso da parte del componente di esempioFetchData
.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 unCounter
componente. - Toolkit front-end bootstrap .
- Codice dimostrativo per un
- 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:MainLayout
component (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 ilNavLink
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 nellaunchSettings.json
file.Nota
Il
http
profilo precede ilhttps
profilo nellaunchSettings.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
aldotnet watch
comando (odotnet run
), è sufficiente posizionare ilhttps
profilo sopra ilhttp
profilo nel file.wwwroot
cartella: la cartella Radice Web per l'app contenente gli asset statici pubblici dell'app, inclusiappsettings.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
). Laindex.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'elementodiv
DOM con unid
valore (<div id="app">Loading...</div>
app
).
Program.cs
: punto di ingresso dell'app che configura l'host WebAssembly:- Il
App
componente è il componente radice dell'app. IlApp
componente viene specificato comediv
elemento DOM con unid
diapp
(<div id="app">Loading...</div>
inwwwroot/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>()
).
- Il
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 unCounter
componente. - Toolkit front-end bootstrap .
- Codice dimostrativo per un
- 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 nellaunchSettings.json
file.Shared
cartella: contiene i componenti condivisi e i fogli di stile seguenti:MainLayout
component (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 ilNavLink
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
ASP.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, inclusiappsettings.json
i file di impostazioni dell'app ambientale e per le impostazioni di configurazione. Laindex.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'elementodiv
DOM con unid
valore (<div id="app">Loading...</div>
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. IlApp
componente viene specificato comediv
elemento DOM con unid
diapp
(<div id="app">Loading...</div>
inwwwroot/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>()
).
- Il
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 soluzione ospitata Blazor WebAssembly 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 delFetchData
progetto "Client". - 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.json
e 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 nellaunchSettings.json
file.Shared
cartella: contiene i componenti condivisi e i fogli di stile seguenti:MainLayout
component (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 ilNavLink
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, inclusiappsettings.json
i file di impostazioni dell'app ambientale e per le impostazioni di configurazione. Laindex.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'elementodiv
DOM con unid
valore (<div id="app">Loading...</div>
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. IlApp
componente viene specificato comediv
elemento DOM con unid
diapp
(<div id="app">Loading...</div>
inwwwroot/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>()
).
- Il
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 soluzione ospitata Blazor WebAssembly 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 delFetchData
progetto "Client". - 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.json
e 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 nellaunchSettings.json
file.Shared
cartella: contiene i componenti condivisi e i fogli di stile seguenti:MainLayout
component (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 ilNavLink
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, inclusiappsettings.json
i file di impostazioni dell'app ambientale e per le impostazioni di configurazione. Laindex.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'elementodiv
DOM con unid
valore (<div id="app">Loading...</div>
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. IlApp
componente viene specificato comediv
elemento DOM con unid
diapp
(<div id="app">Loading...</div>
inwwwroot/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>()
).
- Il
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 soluzione ospitata Blazor WebAssembly 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 delFetchData
progetto "Client". - 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.json
e 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 nellaunchSettings.json
file.Shared
cartella: contiene i componenti condivisi seguenti:MainLayout
component (MainLayout.razor
): componente di layout dell'app.NavMenu
component (NavMenu.razor
): implementa lo spostamento sulla barra laterale. Include il componente (NavLink), che esegue ilNavLink
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, inclusiappsettings.json
i file di impostazioni dell'app ambientale e per le impostazioni di configurazione. Laindex.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'elementoapp
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. IlApp
componente viene specificato comeapp
elemento DOM (<app>Loading...</app>
inwwwroot/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>()
).
- Il
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 soluzione ospitata Blazor WebAssembly 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 delFetchData
progetto "Client". - 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 Blazor script viene gestito da una risorsa incorporata nel framework condiviso ASP.NET Core.
In un'app Blazor Web lo 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>
In un'app Blazor Server lo Blazor script si trova nel Pages/_Host.cshtml
file :
<script src="_framework/blazor.server.js"></script>
In un'app Blazor Server lo Blazor script si trova nel Pages/_Layout.cshtml
file :
<script src="_framework/blazor.server.js"></script>
In un'app Blazor Server lo Blazor script si trova nel Pages/_Host.cshtml
file :
<script src="_framework/blazor.server.js"></script>
In un'app Blazor WebAssembly il Blazor contenuto dello script si trova nel wwwroot/index.html
file:
<script src="_framework/blazor.webassembly.js"></script>
Posizione e <head>
<body>
contenuto
In un'app Blazor <head>
Web e <body>
il contenuto si trova nel Components/App.razor
file .
In un'app <head>
Blazor Server e <body>
il contenuto si trova nel Pages/_Host.cshtml
file.
In un'app <head>
Blazor Server e <body>
il contenuto si trova nel Pages/_Layout.cshtml
file.
In un'app <head>
Blazor Server e <body>
il contenuto si trova nel Pages/_Host.cshtml
file.
In un'app <head>
Blazor WebAssembly 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 WebAssembly separatiBlazor Server. 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 .