ASP.NET Core Blazor 專案結構
注意
這不是這篇文章的最新版本。 如需目前版本,請參閱本文的 .NET 8 版本。
警告
不再支援此版本的 ASP.NET Core。 如需詳細資訊,請參閱 .NET 和 .NET Core 支援原則。 如需目前版本,請參閱本文的 .NET 8 版本。
本文說明組成從 Blazor 專案範本所產生 Blazor 應用程式的檔案和資料夾。
Blazor Web 應用程式
Blazor Web 應用程式專案範本:blazor
BlazorWeb 應用程式專案範本提供單一起點,使用 Razor 元件來建置任何樣式的 Web UI,無論是伺服器端轉譯還是用戶端轉譯。 其結合了現有 Blazor Server 和 Blazor WebAssembly 主控模型的優點與伺服器轉譯、串流轉譯、增強的導覽和表單處理,以及以個別元件方式使用 Blazor Server 或 Blazor WebAssembly 以新增互動功能的能力。
如果在應用程式建立時同時選取用戶端轉譯 (CSR) 和互動式伺服器端轉譯 (互動式 SSR),專案範本會使用互動式自動轉譯模式。 當 .NET 應用程式套件組合和執行階段下載至瀏覽器時,自動轉譯模式一開始會使用互動式 SSR。 啟動 .NET WebAssembly 執行階段之後,轉譯會切換至 CSR。
根據預設,Blazor Web 應用程式範本會使用單一專案來啟用靜態和互動式伺服器端轉譯。 如果您也啟用互動式 WebAssembly 轉譯,則專案會包含 WebAssembly 元件的額外用戶端專案 (.Client
)。 用戶端專案的建置輸出會下載至瀏覽器,並在用戶端上執行。 使用互動式 WebAssembly 或互動式自動轉譯模式的元件必須位於 .Client
專案中。
如需詳細資訊,請參閱 ASP.NET Core Blazor 轉譯模式。
伺服器專案:
Components
資料夾:Layout
資料夾:包含下列配置元件和樣式表:MainLayout
元件 (MainLayout.razor
):應用程式的配置元件。MainLayout.razor.css
:應用程式主要配置的樣式表。NavMenu
元件 (NavMenu.razor
):實作資訊看板導覽。 包含NavLink
元件 (NavLink),此元件會轉譯其他 Razor 元件的導覽連結。 NavLink 元件會向使用者指出目前顯示哪個元件。NavMenu.razor.css
:應用程式的導覽功能表樣式表。
Pages
資料夾:包含應用程式的可路由伺服器端 Razor 元件 (.razor
)。 每個頁面的路由都是使用@page
指示詞來指定。 範本包含下列項目:Counter
元件 (Counter.razor
):實作 [計數器] 頁面。Error
元件 (Error.razor
):實作 [錯誤] 頁面。Home
元件 (Home.razor
):實作 Home 頁面。Weather
元件 (Weather.razor
):實作 [天氣預報] 頁面。
App
元件 (App.razor
):具有 HTML<head>
標記、Routes
元件和 Blazor<script>
標記的應用程式根元件。 根元件是應用程式載入的第一個元件。Routes
元件 (Routes.razor
):使用 Router 元件設定路由。 針對用戶端互動式元件,Router 元件會攔截瀏覽器瀏覽,並轉譯符合所要求位址的頁面。_Imports.razor
:包含要包含在伺服器轉譯應用程式元件中的通用 Razor 指示詞 (.razor
),例如命名空間的@using
指示詞。
Properties
資料夾:保存launchSettings.json
檔案中的開發環境組態。注意
http
設定檔在launchSettings.json
檔案中的https
設定檔之前。 使用 .NET CLI 執行應用程式時,應用程式會在 HTTP 端點執行,因為找到的第一個設定檔是http
。 設定檔順序可簡化採用適用於 Linux 和 macOS 使用者的 HTTPS 轉換。 如果您想要使用 .NET CLI 啟動應用程式,而不需要將-lp https
或--launch-profile https
選項傳遞至dotnet watch
(或dotnet run
) 命令,只要將https
設定檔放置在檔案中的http
設定檔上方即可。wwwroot
資料夾:伺服器專案的 Web 根資料夾,當中包含應用程式的公用靜態資產。Program.cs
檔案:伺服器專案的進入點,可設定 ASP.NET Core Web 應用程式主機,並包含應用程式的啟動邏輯,包括服務註冊、組態、記錄和要求處理管線。- 呼叫 AddRazorComponents 以新增 Razor 元件的服務。 AddInteractiveServerComponents 新增服務以支援轉譯互動式伺服器元件。 AddInteractiveWebAssemblyComponents 會新增服務以支援轉譯互動式 WebAssembly 元件。
- MapRazorComponents 會探索可用的元件,並指定應用程式的根元件 (載入的第一個元件),其預設為
App
元件 (App.razor
)。 AddInteractiveServerRenderMode 會設定應用程式的互動式伺服器端轉譯 (互動式 SSR)。 AddInteractiveWebAssemblyRenderMode 會設定應用程式的互動式 WebAssembly 轉譯模式。
應用程式設定檔案 (
appsettings.Development.json
、appsettings.json
):提供伺服器專案的組態設定。
用戶端專案 (
.Client
):Pages
資料夾:包含應用程式的可路由用戶端 Razor 元件 (.razor
)。 每個頁面的路由都是使用@page
指示詞來指定。 範本包含Counter
實作 [計數器] 頁面的元件 (Counter.razor
)。.Client
專案的元件資料夾結構與 Blazor Web 應用程式的主要專案資料夾結構不同,因為主要專案是標準 ASP.NET Core 專案。 主要專案必須考慮與 Blazor 無關的 ASP.NET Core 專案的其他資產。.Client
專案純粹是 Blazor 專案,不需要與 ASP.NET Core 的非 Blazor 功能和規格整合,因此會使用較不複雜的元件資料夾結構。 不過,您可以在.Client
專案中使用想要的任何元件資料夾結構。 您可以視需要鏡像.Client
專案中主要專案的元件資料夾配置。 請注意,如果您將元件移至與專案範本所使用資料夾不同的資料夾,命名空間可能需要調整配置檔案等資產。用戶端專案的 Web 根資料夾,當中包含應用程式的公用靜態資產,包括提供用戶端專案的組態設定的應用程式設定檔案 (
appsettings.Development.json
、appsettings.json
)。Program.cs
檔案:用戶端專案的進入點,可設定 WebAssembly 主機,並包含專案的啟動邏輯,包括服務註冊、組態、記錄和要求處理管線。_Imports.razor
:包含要包含在 WebAssembly 轉譯應用程式元件中的通用 Razor 指示詞 (.razor
),例如命名空間的@using
指示詞。
當設定其他選項時,其他檔案和資料夾可能會出現在從 Blazor Web 應用程式專案範本產生的應用程式中。 例如,使用 ASP.NET Core Identity 產生應用程式,包括驗證和授權功能的其他資產。
Blazor Server
Blazor Server 專案範本:blazorserver
、blazorserver-empty
Blazor Server 範本會建立 Blazor Server 應用程式的初始檔案和目錄結構:
- 如果使用
blazorserver
範本,應用程式會填入下列內容:- 從氣象預報服務 (
WeatherForecastService
) 載入資料的FetchData
元件示範程式碼,以及使用者與Counter
元件互動。 - Bootstrap 前端工具組。
- 從氣象預報服務 (
- 如果使用
blazorserver-empty
範本,則會在沒有示範程式碼和 Bootstrap 的情況下建立應用程式。
專案結構:
Data
資料夾:包含WeatherForecast
類別和實作WeatherForecastService
,提供應用程式FetchData
元件的範例天氣資料。Pages
資料夾:包含 Blazor 應用程式的可路由 Razor 元件 (.razor
) 和 Blazor Server 應用程式的根 Razor 頁面。 每個頁面的路由都是使用@page
指示詞來指定。 範本包含下列項目:_Host.cshtml
:實作為 Razor Page 的應用程式根頁面:- 一開始要求應用程式的任何頁面時,此頁面會在回應中轉譯並傳回。
- [主機] 頁面會指定轉譯根
App
元件 (App.razor
) 的位置。
Counter
元件 (Counter.razor
):實作 [計數器] 頁面。Error
元件 (Error.razor
):在應用程式中發生未處理的例外狀況時轉譯。FetchData
元件 (FetchData.razor
):實作 [擷取資料] 頁面。Index
元件 (Index.razor
):實作 Home 頁面。
Properties
資料夾:保存launchSettings.json
檔案中的開發環境組態。Shared
資料夾:包含下列共用元件和樣式表:MainLayout
元件 (MainLayout.razor
):應用程式的配置元件。MainLayout.razor.css
:應用程式主要配置的樣式表。NavMenu
元件 (NavMenu.razor
):實作資訊看板導覽。 包含NavLink
元件 (NavLink),此元件會轉譯其他 Razor 元件的導覽連結。 NavLink 元件會在載入其元件時自動指出選取的狀態,這可協助使用者了解目前顯示的元件。NavMenu.razor.css
:應用程式的導覽功能表樣式表。SurveyPrompt
元件 (SurveyPrompt.razor
):Blazor 問卷元件。
wwwroot
資料夾:應用程式的 Web 根資料夾,當中包含應用程式的公用靜態資產。_Imports.razor
:包含要包含在應用程式元件中的通用 Razor 指示詞 (.razor
),例如命名空間的@using
指示詞。App.razor
:使用 Router 元件設定用戶端路由的應用程式根元件。 Router 元件會攔截瀏覽器瀏覽,並轉譯符合所要求位址的頁面。appsettings.json
和環境應用程式設定檔案:提供應用程式的組態設定。Program.cs
:設定 ASP.NET Core 主機 的應用程式進入點,並包含應用程式的啟動邏輯,包括服務註冊和要求處理管線設定:- 指定應用程式的相依性插入 (DI) 服務。 您可呼叫 AddServerSideBlazor 來新增服務,且
WeatherForecastService
會新增至服務容器,以供範例FetchData
元件使用。 - 設定應用程式的要求處理管線:
- 會呼叫 MapBlazorHub 來設定與瀏覽器即時連線的端點。 連線是使用 SignalR 所建立,這是將即時 Web 功能新增至應用程式的架構。
- 呼叫
MapFallbackToPage("/_Host")
以設定應用程式 (Pages/_Host.cshtml
) 的根頁面,並啟用瀏覽。
- 指定應用程式的相依性插入 (DI) 服務。 您可呼叫 AddServerSideBlazor 來新增服務,且
當設定其他選項時,其他檔案和資料夾可能會出現在從 Blazor Server 專案範本產生的應用程式中。 例如,使用 ASP.NET Core Identity 產生應用程式,包括驗證和授權功能的其他資產。
Blazor Server 專案範本:blazorserver
範本 Blazor Server 會建立 Blazor Server 應用程式的初始檔案和目錄結構。 應用程式會填入 FetchData
元件的示範程式碼,該元件會從已註冊的服務、WeatherForecastService
以及使用者與 Counter
元件互動來載入資料。
Data
資料夾:包含WeatherForecast
類別和實作WeatherForecastService
,提供應用程式FetchData
元件的範例天氣資料。Pages
資料夾:包含 Blazor 應用程式的可路由 Razor 元件 (.razor
) 和 Blazor Server 應用程式的根 Razor 頁面。 每個頁面的路由都是使用@page
指示詞來指定。 範本包含下列項目:_Host.cshtml
:實作為 Razor Page 的應用程式根頁面:- 一開始要求應用程式的任何頁面時,此頁面會在回應中轉譯並傳回。
- [主機] 頁面會指定轉譯根
App
元件 (App.razor
) 的位置。
_Layout.cshtml
:應用程式的_Host.cshtml
根頁面的配置頁面。Counter
元件 (Counter.razor
):實作 [計數器] 頁面。Error
元件 (Error.razor
):在應用程式中發生未處理的例外狀況時轉譯。FetchData
元件 (FetchData.razor
):實作 [擷取資料] 頁面。Index
元件 (Index.razor
):實作 Home 頁面。
Properties
資料夾:保存launchSettings.json
檔案中的開發環境組態。Shared
資料夾:包含下列共用元件和樣式表:MainLayout
元件 (MainLayout.razor
):應用程式的配置元件。MainLayout.razor.css
:應用程式主要配置的樣式表。NavMenu
元件 (NavMenu.razor
):實作資訊看板導覽。 包含NavLink
元件 (NavLink),此元件會轉譯其他 Razor 元件的導覽連結。 NavLink 元件會在載入其元件時自動指出選取的狀態,這可協助使用者了解目前顯示的元件。NavMenu.razor.css
:應用程式的導覽功能表樣式表。SurveyPrompt
元件 (SurveyPrompt.razor
):Blazor 問卷元件。
wwwroot
資料夾:應用程式的 Web 根資料夾,當中包含應用程式的公用靜態資產。_Imports.razor
:包含要包含在應用程式元件中的通用 Razor 指示詞 (.razor
),例如命名空間的@using
指示詞。App.razor
:使用 Router 元件設定用戶端路由的應用程式根元件。 Router 元件會攔截瀏覽器瀏覽,並轉譯符合所要求位址的頁面。appsettings.json
和環境應用程式設定檔案:提供應用程式的組態設定。Program.cs
:設定 ASP.NET Core 主機 的應用程式進入點,並包含應用程式的啟動邏輯,包括服務註冊和要求處理管線設定:- 指定應用程式的相依性插入 (DI) 服務。 您可呼叫 AddServerSideBlazor 來新增服務,且
WeatherForecastService
會新增至服務容器,以供範例FetchData
元件使用。 - 設定應用程式的要求處理管線:
- 會呼叫 MapBlazorHub 來設定與瀏覽器即時連線的端點。 連線是使用 SignalR 所建立,這是將即時 Web 功能新增至應用程式的架構。
- 呼叫
MapFallbackToPage("/_Host")
以設定應用程式 (Pages/_Host.cshtml
) 的根頁面,並啟用瀏覽。
- 指定應用程式的相依性插入 (DI) 服務。 您可呼叫 AddServerSideBlazor 來新增服務,且
當設定其他選項時,其他檔案和資料夾可能會出現在從 Blazor Server 專案範本產生的應用程式中。 例如,使用 ASP.NET Core Identity 產生應用程式,包括驗證和授權功能的其他資產。
Blazor Server 專案範本:blazorserver
範本 Blazor Server 會建立 Blazor Server 應用程式的初始檔案和目錄結構。 應用程式會填入 FetchData
元件的示範程式碼,該元件會從已註冊的服務、WeatherForecastService
以及使用者與 Counter
元件互動來載入資料。
Data
資料夾:包含WeatherForecast
類別和實作WeatherForecastService
,提供應用程式FetchData
元件的範例天氣資料。Pages
資料夾:包含 Blazor 應用程式的可路由 Razor 元件 (.razor
) 和 Blazor Server 應用程式的根 Razor 頁面。 每個頁面的路由都是使用@page
指示詞來指定。 範本包含下列項目:_Host.cshtml
:實作為 Razor Page 的應用程式根頁面:- 一開始要求應用程式的任何頁面時,此頁面會在回應中轉譯並傳回。
- [主機] 頁面會指定轉譯根
App
元件 (App.razor
) 的位置。
Counter
元件 (Counter.razor
):實作 [計數器] 頁面。Error
元件 (Error.razor
):在應用程式中發生未處理的例外狀況時轉譯。FetchData
元件 (FetchData.razor
):實作 [擷取資料] 頁面。Index
元件 (Index.razor
):實作 Home 頁面。
Properties
資料夾:保存launchSettings.json
檔案中的開發環境組態。Shared
資料夾:包含下列共用元件和樣式表:MainLayout
元件 (MainLayout.razor
):應用程式的配置元件。MainLayout.razor.css
:應用程式主要配置的樣式表。NavMenu
元件 (NavMenu.razor
):實作資訊看板導覽。 包含NavLink
元件 (NavLink),此元件會轉譯其他 Razor 元件的導覽連結。 NavLink 元件會在載入其元件時自動指出選取的狀態,這可協助使用者了解目前顯示的元件。NavMenu.razor.css
:應用程式的導覽功能表樣式表。SurveyPrompt
元件 (SurveyPrompt.razor
):Blazor 問卷元件。
wwwroot
資料夾:應用程式的 Web 根資料夾,當中包含應用程式的公用靜態資產。_Imports.razor
:包含要包含在應用程式元件中的通用 Razor 指示詞 (.razor
),例如命名空間的@using
指示詞。App.razor
:使用 Router 元件設定用戶端路由的應用程式根元件。 Router 元件會攔截瀏覽器瀏覽,並轉譯符合所要求位址的頁面。appsettings.json
和環境應用程式設定檔案:提供應用程式的組態設定。Program.cs
:設定 ASP.NET Core 主機的應用程式進入點。Startup.cs
:包含應用程式的啟動邏輯。Startup
類別會定義兩種方法:ConfigureServices
:指定應用程式的相依性插入 (DI) 服務。 您可呼叫 AddServerSideBlazor 來新增服務,且WeatherForecastService
會新增至服務容器,以供範例FetchData
元件使用。Configure
:設定應用程式的要求處理管線:- 會呼叫 MapBlazorHub 來設定與瀏覽器即時連線的端點。 連線是使用 SignalR 所建立,這是將即時 Web 功能新增至應用程式的架構。
- 呼叫
MapFallbackToPage("/_Host")
以設定應用程式 (Pages/_Host.cshtml
) 的根頁面,並啟用瀏覽。
當設定其他選項時,其他檔案和資料夾可能會出現在從 Blazor Server 專案範本產生的應用程式中。 例如,使用 ASP.NET Core Identity 產生應用程式,包括驗證和授權功能的其他資產。
Blazor Server 專案範本:blazorserver
範本 Blazor Server 會建立 Blazor Server 應用程式的初始檔案和目錄結構。 應用程式會填入 FetchData
元件的示範程式碼,該元件會從已註冊的服務、WeatherForecastService
以及使用者與 Counter
元件互動來載入資料。
Data
資料夾:包含WeatherForecast
類別和實作WeatherForecastService
,提供應用程式FetchData
元件的範例天氣資料。Pages
資料夾:包含 Blazor 應用程式的可路由 Razor 元件 (.razor
) 和 Blazor Server 應用程式的根 Razor 頁面。 每個頁面的路由都是使用@page
指示詞來指定。 範本包含下列項目:_Host.cshtml
:實作為 Razor Page 的應用程式根頁面:- 一開始要求應用程式的任何頁面時,此頁面會在回應中轉譯並傳回。
- [主機] 頁面會指定轉譯根
App
元件 (App.razor
) 的位置。
Counter
元件 (Counter.razor
):實作 [計數器] 頁面。Error
元件 (Error.razor
):在應用程式中發生未處理的例外狀況時轉譯。FetchData
元件 (FetchData.razor
):實作 [擷取資料] 頁面。Index
元件 (Index.razor
):實作 Home 頁面。
Properties
資料夾:保存launchSettings.json
檔案中的開發環境組態。Shared
資料夾:包含下列共用元件:MainLayout
元件 (MainLayout.razor
):應用程式的配置元件。NavMenu
元件 (NavMenu.razor
):實作資訊看板導覽。 包含NavLink
元件 (NavLink),此元件會轉譯其他 Razor 元件的導覽連結。 NavLink 元件會在載入其元件時自動指出選取的狀態,這可協助使用者了解目前顯示的元件。SurveyPrompt
元件 (SurveyPrompt.razor
):Blazor 問卷元件。
wwwroot
資料夾:應用程式的 Web 根資料夾,當中包含應用程式的公用靜態資產。_Imports.razor
:包含要包含在應用程式元件中的通用 Razor 指示詞 (.razor
),例如命名空間的@using
指示詞。App.razor
:使用 Router 元件設定用戶端路由的應用程式根元件。 Router 元件會攔截瀏覽器瀏覽,並轉譯符合所要求位址的頁面。appsettings.json
和環境應用程式設定檔案:提供應用程式的組態設定。Program.cs
:設定 ASP.NET Core 主機的應用程式進入點。Startup.cs
:包含應用程式的啟動邏輯。Startup
類別會定義兩種方法:ConfigureServices
:指定應用程式的相依性插入 (DI) 服務。 您可呼叫 AddServerSideBlazor 來新增服務,且WeatherForecastService
會新增至服務容器,以供範例FetchData
元件使用。Configure
:設定應用程式的要求處理管線:- 會呼叫 MapBlazorHub 來設定與瀏覽器即時連線的端點。 連線是使用 SignalR 所建立,這是將即時 Web 功能新增至應用程式的架構。
- 呼叫
MapFallbackToPage("/_Host")
以設定應用程式 (Pages/_Host.cshtml
) 的根頁面,並啟用瀏覽。
當設定其他選項時,其他檔案和資料夾可能會出現在從 Blazor Server 專案範本產生的應用程式中。 例如,使用 ASP.NET Core Identity 產生應用程式,包括驗證和授權功能的其他資產。
獨立 Blazor WebAssembly
獨立 Blazor WebAssembly 專案範本:blazorwasm
Blazor WebAssembly 範本會建立獨立 Blazor WebAssembly 應用程式的初始檔案和目錄結構:
- 如果使用
blazorwasm
範本,應用程式會填入下列內容:- 從靜態資產 (
weather.json
) 載入資料的Weather
元件示範程式碼,以及使用者與Counter
元件互動。 - Bootstrap 前端工具組。
- 從靜態資產 (
- 也可以產生
blazorwasm
範本,而不需要範例頁面和樣式。
專案結構:
Layout
資料夾:包含下列配置元件和樣式表:MainLayout
元件 (MainLayout.razor
):應用程式的配置元件。MainLayout.razor.css
:應用程式主要配置的樣式表。NavMenu
元件 (NavMenu.razor
):實作資訊看板導覽。 包含NavLink
元件 (NavLink),此元件會轉譯其他 Razor 元件的導覽連結。 NavLink 元件會在載入其元件時自動指出選取的狀態,這可協助使用者了解目前顯示的元件。NavMenu.razor.css
:應用程式的導覽功能表樣式表。
Pages
資料夾:包含 Blazor 應用程式的可路由 Razor 元件 (.razor
)。 每個頁面的路由都是使用@page
指示詞來指定。 範本包括下列元件:Counter
元件 (Counter.razor
):實作 [計數器] 頁面。Index
元件 (Index.razor
):實作 Home 頁面。Weather
元件 (Weather.razor
):實作 [天氣] 頁面。
_Imports.razor
:包含要包含在應用程式元件中的通用 Razor 指示詞 (.razor
),例如命名空間的@using
指示詞。App.razor
:使用 Router 元件設定用戶端路由的應用程式根元件。 Router 元件會攔截瀏覽器瀏覽,並轉譯符合所要求位址的頁面。Properties
資料夾:保存launchSettings.json
檔案中的開發環境組態。注意
http
設定檔在launchSettings.json
檔案中的https
設定檔之前。 使用 .NET CLI 執行應用程式時,應用程式會在 HTTP 端點執行,因為找到的第一個設定檔是http
。 設定檔順序可簡化採用適用於 Linux 和 macOS 使用者的 HTTPS 轉換。 如果您想要使用 .NET CLI 啟動應用程式,而不需要將-lp https
或--launch-profile https
選項傳遞至dotnet watch
(或dotnet run
) 命令,只要將https
設定檔放置在檔案中的http
設定檔上方即可。wwwroot
資料夾:包含應用程式公用靜態資產的應用程式 Web 根資料夾,包括組態設定和範例天氣資料 (sample-data/weather.json
) 的appsettings.json
和環境應用程式設定檔案。index.html
網頁是實作為 HTML 頁面的應用程式根頁面:- 一開始要求應用程式的任何頁面時,此頁面會在回應中轉譯並傳回。
- 頁面會指定轉譯根
App
元件的位置。 元件會轉譯在div
DOM 元素的位置,且具有app
的id
(<div id="app">Loading...</div>
)。
Program.cs
:設定 WebAssembly 主機的應用程式進入點:App
元件是應用程式的根元件。App
元件會指定為div
DOM 元素,且其具有app
的id
(wwwroot/index.html
中的<div id="app">Loading...</div>
),且位於根元件集合 (builder.RootComponents.Add<App>("#app")
)。- 會新增並設定服務 (例如,
builder.Services.AddSingleton<IMyDependency, MyDependency>()
)。
當設定其他選項時,其他檔案和資料夾可能會出現在從 Blazor WebAssembly 專案範本產生的應用程式中。 例如,使用 ASP.NET Core Identity 產生應用程式,包括驗證和授權功能的其他資產。
Blazor WebAssembly
Blazor WebAssembly 專案範本:blazorwasm
、blazorwasm-empty
Blazor WebAssembly 範本會建立 Blazor WebAssembly 應用程式的初始檔案和目錄結構:
- 如果使用
blazorwasm
範本,應用程式會填入下列內容:- 從靜態資產 (
weather.json
) 載入資料的FetchData
元件示範程式碼,以及使用者與Counter
元件互動。 - Bootstrap 前端工具組。
- 從靜態資產 (
- 如果使用
blazorwasm-empty
範本,則會在沒有示範程式碼和 Bootstrap 的情況下建立應用程式。
專案結構:
Pages
資料夾:包含 Blazor 應用程式的可路由 Razor 元件 (.razor
)。 每個頁面的路由都是使用@page
指示詞來指定。 範本包括下列元件:Counter
元件 (Counter.razor
):實作 [計數器] 頁面。FetchData
元件 (FetchData.razor
):實作 [擷取資料] 頁面。Index
元件 (Index.razor
):實作 Home 頁面。
Properties
資料夾:保存launchSettings.json
檔案中的開發環境組態。Shared
資料夾:包含下列共用元件和樣式表:MainLayout
元件 (MainLayout.razor
):應用程式的配置元件。MainLayout.razor.css
:應用程式主要配置的樣式表。NavMenu
元件 (NavMenu.razor
):實作資訊看板導覽。 包含NavLink
元件 (NavLink),此元件會轉譯其他 Razor 元件的導覽連結。 NavLink 元件會在載入其元件時自動指出選取的狀態,這可協助使用者了解目前顯示的元件。NavMenu.razor.css
:應用程式的導覽功能表樣式表。SurveyPrompt
元件 (SurveyPrompt.razor
) (.NET 7 或更早版本的 ASP.NET Core):Blazor 問卷元件。
wwwroot
資料夾:包含應用程式公用靜態資產的應用程式 Web 根資料夾,包括組態設定的appsettings.json
和環境應用程式設定檔案。index.html
網頁是實作為 HTML 頁面的應用程式根頁面:- 一開始要求應用程式的任何頁面時,此頁面會在回應中轉譯並傳回。
- 頁面會指定轉譯根
App
元件的位置。 元件會轉譯在div
DOM 元素的位置,且具有app
的id
(<div id="app">Loading...</div>
)。
_Imports.razor
:包含要包含在應用程式元件中的通用 Razor 指示詞 (.razor
),例如命名空間的@using
指示詞。App.razor
:使用 Router 元件設定用戶端路由的應用程式根元件。 Router 元件會攔截瀏覽器瀏覽,並轉譯符合所要求位址的頁面。Program.cs
:設定 WebAssembly 主機的應用程式進入點:App
元件是應用程式的根元件。App
元件會指定為div
DOM 元素,且其具有app
的id
(wwwroot/index.html
中的<div id="app">Loading...</div>
),且位於根元件集合 (builder.RootComponents.Add<App>("#app")
)。- 會新增並設定服務 (例如,
builder.Services.AddSingleton<IMyDependency, MyDependency>()
)。
當設定其他選項時,其他檔案和資料夾可能會出現在從 Blazor WebAssembly 專案範本產生的應用程式中。 例如,使用 ASP.NET Core Identity 產生應用程式,包括驗證和授權功能的其他資產。
裝載的 Blazor WebAssembly 解決方案包含下列 ASP.NET Core 專案:
- 「Client」:Blazor WebAssembly 應用程式。
- 「Server」:提供 Blazor WebAssembly 應用程式和天氣資料給用戶端的應用程式。
- 「Shared」:維護一般類別、方法和資源的專案。
解決方案是從 Visual Studio 中的 Blazor WebAssembly 專案範本產生,並已選取 [ASP.NET Core 託管] 核取方塊,或使用 .NET CLI 的 dotnet new blazorwasm
命令搭配 -ho|--hosted
選項。 如需詳細資訊,請參閱 ASP.NET Core Blazor 工具。
託管 Blazor Webassembly 解決方案 (「Client」專案) 中用戶端應用程式的專案結構與獨立 Blazor WebAssembly 應用程式的專案結構相同。 託管 Blazor WebAssembly 解決方案中的其他檔案:
- 「Server」專案包含的氣象預報控制站
Controllers/WeatherForecastController.cs
,會將天氣資料傳回「Client」專案的FetchData
元件。 - 「Shared」專案包含的天氣預報類別
WeatherForecast.cs
,代表「Client」和「Server」專案的天氣資料。
Blazor WebAssembly
Blazor WebAssembly 專案範本:blazorwasm
範本 Blazor WebAssembly 會建立 Blazor WebAssembly 應用程式的初始檔案和目錄結構。 應用程式會填入 FetchData
元件的示範程式碼,該元件會從靜態資產、weather.json
以及使用者與 Counter
元件互動來載入資料。
Pages
資料夾:包含 Blazor 應用程式的可路由 Razor 元件 (.razor
)。 每個頁面的路由都是使用@page
指示詞來指定。 範本包括下列元件:Counter
元件 (Counter.razor
):實作 [計數器] 頁面。FetchData
元件 (FetchData.razor
):實作 [擷取資料] 頁面。Index
元件 (Index.razor
):實作 Home 頁面。
Properties
資料夾:保存launchSettings.json
檔案中的開發環境組態。Shared
資料夾:包含下列共用元件和樣式表:MainLayout
元件 (MainLayout.razor
):應用程式的配置元件。MainLayout.razor.css
:應用程式主要配置的樣式表。NavMenu
元件 (NavMenu.razor
):實作資訊看板導覽。 包含NavLink
元件 (NavLink),此元件會轉譯其他 Razor 元件的導覽連結。 NavLink 元件會在載入其元件時自動指出選取的狀態,這可協助使用者了解目前顯示的元件。NavMenu.razor.css
:應用程式的導覽功能表樣式表。SurveyPrompt
元件 (SurveyPrompt.razor
):Blazor 問卷元件。
wwwroot
資料夾:包含應用程式公用靜態資產的應用程式 Web 根資料夾,包括組態設定的appsettings.json
和環境應用程式設定檔案。index.html
網頁是實作為 HTML 頁面的應用程式根頁面:- 一開始要求應用程式的任何頁面時,此頁面會在回應中轉譯並傳回。
- 頁面會指定轉譯根
App
元件的位置。 元件會轉譯在div
DOM 元素的位置,且具有app
的id
(<div id="app">Loading...</div>
)。
_Imports.razor
:包含要包含在應用程式元件中的通用 Razor 指示詞 (.razor
),例如命名空間的@using
指示詞。App.razor
:使用 Router 元件設定用戶端路由的應用程式根元件。 Router 元件會攔截瀏覽器瀏覽,並轉譯符合所要求位址的頁面。Program.cs
:設定 WebAssembly 主機的應用程式進入點:App
元件是應用程式的根元件。App
元件會指定為div
DOM 元素,且其具有app
的id
(wwwroot/index.html
中的<div id="app">Loading...</div>
),且位於根元件集合 (builder.RootComponents.Add<App>("#app")
)。- 會新增並設定服務 (例如,
builder.Services.AddSingleton<IMyDependency, MyDependency>()
)。
當設定其他選項時,其他檔案和資料夾可能會出現在從 Blazor WebAssembly 專案範本產生的應用程式中。 例如,使用 ASP.NET Core Identity 產生應用程式,包括驗證和授權功能的其他資產。
裝載的 Blazor WebAssembly 解決方案包含下列 ASP.NET Core 專案:
- 「Client」:Blazor WebAssembly 應用程式。
- 「Server」:提供 Blazor WebAssembly 應用程式和天氣資料給用戶端的應用程式。
- 「Shared」:維護一般類別、方法和資源的專案。
解決方案是從 Visual Studio 中的 Blazor WebAssembly 專案範本產生,並已選取 [ASP.NET Core 託管] 核取方塊,或使用 .NET CLI 的 dotnet new blazorwasm
命令搭配 -ho|--hosted
選項。 如需詳細資訊,請參閱 ASP.NET Core Blazor 工具。
託管 Blazor Webassembly 解決方案 (「Client」專案) 中用戶端應用程式的專案結構與獨立 Blazor WebAssembly 應用程式的專案結構相同。 託管 Blazor WebAssembly 解決方案中的其他檔案:
- 「Server」專案包含的氣象預報控制站
Controllers/WeatherForecastController.cs
,會將天氣資料傳回「Client」專案的FetchData
元件。 - 「Shared」專案包含的天氣預報類別
WeatherForecast.cs
,代表「Client」和「Server」專案的天氣資料。
Blazor WebAssembly
Blazor WebAssembly 專案範本:blazorwasm
範本 Blazor WebAssembly 會建立 Blazor WebAssembly 應用程式的初始檔案和目錄結構。 應用程式會填入 FetchData
元件的示範程式碼,該元件會從靜態資產、weather.json
以及使用者與 Counter
元件互動來載入資料。
Pages
資料夾:包含 Blazor 應用程式的可路由 Razor 元件 (.razor
)。 每個頁面的路由都是使用@page
指示詞來指定。 範本包括下列元件:Counter
元件 (Counter.razor
):實作 [計數器] 頁面。FetchData
元件 (FetchData.razor
):實作 [擷取資料] 頁面。Index
元件 (Index.razor
):實作 Home 頁面。
Properties
資料夾:保存launchSettings.json
檔案中的開發環境組態。Shared
資料夾:包含下列共用元件和樣式表:MainLayout
元件 (MainLayout.razor
):應用程式的配置元件。MainLayout.razor.css
:應用程式主要配置的樣式表。NavMenu
元件 (NavMenu.razor
):實作資訊看板導覽。 包含NavLink
元件 (NavLink),此元件會轉譯其他 Razor 元件的導覽連結。 NavLink 元件會在載入其元件時自動指出選取的狀態,這可協助使用者了解目前顯示的元件。NavMenu.razor.css
:應用程式的導覽功能表樣式表。SurveyPrompt
元件 (SurveyPrompt.razor
):Blazor 問卷元件。
wwwroot
資料夾:包含應用程式公用靜態資產的應用程式 Web 根資料夾,包括組態設定的appsettings.json
和環境應用程式設定檔案。index.html
網頁是實作為 HTML 頁面的應用程式根頁面:- 一開始要求應用程式的任何頁面時,此頁面會在回應中轉譯並傳回。
- 頁面會指定轉譯根
App
元件的位置。 元件會轉譯在div
DOM 元素的位置,且具有app
的id
(<div id="app">Loading...</div>
)。
_Imports.razor
:包含要包含在應用程式元件中的通用 Razor 指示詞 (.razor
),例如命名空間的@using
指示詞。App.razor
:使用 Router 元件設定用戶端路由的應用程式根元件。 Router 元件會攔截瀏覽器瀏覽,並轉譯符合所要求位址的頁面。Program.cs
:設定 WebAssembly 主機的應用程式進入點:App
元件是應用程式的根元件。App
元件會指定為div
DOM 元素,且其具有app
的id
(wwwroot/index.html
中的<div id="app">Loading...</div>
),且位於根元件集合 (builder.RootComponents.Add<App>("#app")
)。- 會新增並設定服務 (例如,
builder.Services.AddSingleton<IMyDependency, MyDependency>()
)。
當設定其他選項時,其他檔案和資料夾可能會出現在從 Blazor WebAssembly 專案範本產生的應用程式中。 例如,使用 ASP.NET Core Identity 產生應用程式,包括驗證和授權功能的其他資產。
裝載的 Blazor WebAssembly 解決方案包含下列 ASP.NET Core 專案:
- 「Client」:Blazor WebAssembly 應用程式。
- 「Server」:提供 Blazor WebAssembly 應用程式和天氣資料給用戶端的應用程式。
- 「Shared」:維護一般類別、方法和資源的專案。
解決方案是從 Visual Studio 中的 Blazor WebAssembly 專案範本產生,並已選取 [ASP.NET Core 託管] 核取方塊,或使用 .NET CLI 的 dotnet new blazorwasm
命令搭配 -ho|--hosted
選項。 如需詳細資訊,請參閱 ASP.NET Core Blazor 工具。
託管 Blazor Webassembly 解決方案 (「Client」專案) 中用戶端應用程式的專案結構與獨立 Blazor WebAssembly 應用程式的專案結構相同。 託管 Blazor WebAssembly 解決方案中的其他檔案:
- 「Server」專案包含的氣象預報控制站
Controllers/WeatherForecastController.cs
,會將天氣資料傳回「Client」專案的FetchData
元件。 - 「Shared」專案包含的天氣預報類別
WeatherForecast.cs
,代表「Client」和「Server」專案的天氣資料。
Blazor WebAssembly
Blazor WebAssembly 專案範本:blazorwasm
範本 Blazor WebAssembly 會建立 Blazor WebAssembly 應用程式的初始檔案和目錄結構。 應用程式會填入 FetchData
元件的示範程式碼,該元件會從靜態資產、weather.json
以及使用者與 Counter
元件互動來載入資料。
Pages
資料夾:包含 Blazor 應用程式的可路由 Razor 元件 (.razor
)。 每個頁面的路由都是使用@page
指示詞來指定。 範本包括下列元件:Counter
元件 (Counter.razor
):實作 [計數器] 頁面。FetchData
元件 (FetchData.razor
):實作 [擷取資料] 頁面。Index
元件 (Index.razor
):實作 Home 頁面。
Properties
資料夾:保存launchSettings.json
檔案中的開發環境組態。Shared
資料夾:包含下列共用元件:MainLayout
元件 (MainLayout.razor
):應用程式的配置元件。NavMenu
元件 (NavMenu.razor
):實作資訊看板導覽。 包含NavLink
元件 (NavLink),此元件會轉譯其他 Razor 元件的導覽連結。 NavLink 元件會在載入其元件時自動指出選取的狀態,這可協助使用者了解目前顯示的元件。SurveyPrompt
元件 (SurveyPrompt.razor
):Blazor 問卷元件。
wwwroot
資料夾:包含應用程式公用靜態資產的應用程式 Web 根資料夾,包括組態設定的appsettings.json
和環境應用程式設定檔案。index.html
網頁是實作為 HTML 頁面的應用程式根頁面:- 一開始要求應用程式的任何頁面時,此頁面會在回應中轉譯並傳回。
- 頁面會指定轉譯根
App
元件的位置。 元件會在app
DOM 元素 (<app>Loading...</app>
) 的位置轉譯。
_Imports.razor
:包含要包含在應用程式元件中的通用 Razor 指示詞 (.razor
),例如命名空間的@using
指示詞。App.razor
:使用 Router 元件設定用戶端路由的應用程式根元件。 Router 元件會攔截瀏覽器瀏覽,並轉譯符合所要求位址的頁面。Program.cs
:設定 WebAssembly 主機的應用程式進入點:App
元件是應用程式的根元件。App
元件會指定為app
DOM 元素,(wwwroot/index.html
中的<app>Loading...</app>
),且位於根元件集合 (builder.RootComponents.Add<App>("app")
)。- 會新增並設定服務 (例如,
builder.Services.AddSingleton<IMyDependency, MyDependency>()
)。
當設定其他選項時,其他檔案和資料夾可能會出現在從 Blazor WebAssembly 專案範本產生的應用程式中。 例如,使用 ASP.NET Core Identity 產生應用程式,包括驗證和授權功能的其他資產。
裝載的 Blazor WebAssembly 解決方案包含下列 ASP.NET Core 專案:
- 「Client」:Blazor WebAssembly 應用程式。
- 「Server」:提供 Blazor WebAssembly 應用程式和天氣資料給用戶端的應用程式。
- 「Shared」:維護一般類別、方法和資源的專案。
解決方案是從 Visual Studio 中的 Blazor WebAssembly 專案範本產生,並已選取 [ASP.NET Core 託管] 核取方塊,或使用 .NET CLI 的 dotnet new blazorwasm
命令搭配 -ho|--hosted
選項。 如需詳細資訊,請參閱 ASP.NET Core Blazor 工具。
託管 Blazor Webassembly 解決方案 (「Client」專案) 中用戶端應用程式的專案結構與獨立 Blazor WebAssembly 應用程式的專案結構相同。 託管 Blazor WebAssembly 解決方案中的其他檔案:
- 「Server」專案包含的氣象預報控制站
Controllers/WeatherForecastController.cs
,會將天氣資料傳回「Client」專案的FetchData
元件。 - 「Shared」專案包含的天氣預報類別
WeatherForecast.cs
,代表「Client」和「Server」專案的天氣資料。
Blazor 指令碼的位置
Blazor 指令碼會從 ASP.NET Core 共用架構中的內嵌資源提供。
在 Blazor Web 應用程式中,Blazor 指令碼位於 Components/App.razor
檔案中:
<script src="_framework/blazor.web.js"></script>
在 Blazor Server 應用程式中,Blazor 指令碼位於 Pages/_Host.cshtml
檔案中:
<script src="_framework/blazor.server.js"></script>
在 Blazor Server 應用程式中,Blazor 指令碼位於 Pages/_Host.cshtml
檔案中:
<script src="_framework/blazor.server.js"></script>
在 Blazor Server 應用程式中,Blazor 指令碼位於 Pages/_Layout.cshtml
檔案中:
<script src="_framework/blazor.server.js"></script>
在 Blazor Server 應用程式中,Blazor 指令碼位於 Pages/_Host.cshtml
檔案中:
<script src="_framework/blazor.server.js"></script>
在 Blazor WebAssembly 應用程式中,Blazor 指令碼内容位於 wwwroot/index.html
檔案中:
<script src="_framework/blazor.webassembly.js"></script>
<head>
和 <body>
內容的位置
在 Blazor Web 應用程式中,<head>
和 <body>
內容位於 Components/App.razor
檔案中。
在 Blazor Server 應用程式中,<head>
和 <body>
內容位於 Pages/_Host.cshtml
檔案中。
在 Blazor Server 應用程式中,<head>
和 <body>
內容位於 Pages/_Layout.cshtml
檔案中。
在 Blazor Server 應用程式中,<head>
和 <body>
內容位於 Pages/_Host.cshtml
檔案中。
在 Blazor WebAssembly 應用程式中,<head>
和 <body>
內容位於 wwwroot/index.html
檔案中。
雙重 Blazor Server/Blazor WebAssembly 應用程式
若要建立可執行為 Blazor Server 應用程式或 Blazor WebAssembly 應用程式的應用程式,其中一種方法是將所有應用程式邏輯和元件放入 Razor 類別庫 (RCL) 並從個別 Blazor Server 和 Blazor WebAssembly 專案參考 RCL。 對於實作會根據裝載模型而有所不同的常見服務,請在 RCL 中定義服務介面,並在 Blazor Server 和 Blazor WebAssembly 專案中實作服務。