共用方式為

ASP.NET Core Blazor 專案結構

  • 發行項

注意

這不是這篇文章的最新版本。 如需目前的版本，請參閱 本文的 .NET 9 版本。

警告

不再支援此版本的 ASP.NET Core。 如需詳細資訊，請參閱 .NET 和 .NET Core 支援原則。 如需目前版本，請參閱本文的 .NET 8 版本。

重要

這些發行前產品的相關資訊在產品正式發行前可能會有大幅修改。 Microsoft 對此處提供的資訊，不做任何明確或隱含的瑕疵擔保。

如需目前的版本，請參閱 本文的 .NET 9 版本。

本文說明組成從 Blazor 專案範本所產生 Blazor 應用程式的檔案和資料夾。

Blazor Web App

Blazor Web App 專案範本：blazor

Blazor Web App 專案範本提供單一起點，可使用 Razor 元件 (.razor) 來建置任何樣式的 Web UI，無論是伺服器端轉譯還是用戶端轉譯。 其結合了現有 Blazor Server 和 Blazor WebAssembly 主控模型的優點與伺服器轉譯、串流轉譯、增強的導覽和表單處理，以及以個別元件方式使用 Blazor Server 或 Blazor WebAssembly 以新增互動功能的能力。

如果在應用程式建立時同時選取用戶端轉譯 (CSR) 和互動式伺服器端轉譯 (互動式 SSR)，專案範本會使用互動式自動轉譯模式。 當 .NET 應用程式套件組合和執行階段下載至瀏覽器時，自動轉譯模式一開始會使用互動式 SSR。 啟動 .NET WebAssembly 執行階段之後，轉譯會切換至 CSR。

Blazor Web App 範本會使用單一專案來啟用靜態和互動式伺服器端轉譯。 如果您也啟用互動式 WebAssembly 轉譯，則專案會包含 WebAssembly 元件的額外用戶端專案 (.Client)。 用戶端專案的建置輸出會下載至瀏覽器，並在用戶端上執行。 使用互動式 WebAssembly 或互動式自動轉譯模式的元件必須位於 .Client 專案中。

.Client 專案的元件資料夾結構與 Blazor Web App 的主要專案資料夾結構不同，因為主要專案是標準 ASP.NET Core 專案。 主要專案必須考慮與 Blazor 無關的 ASP.NET Core 專案的其他資產。 您可以在 .Client 專案中使用想要的任何元件資料夾結構。 您可以視需要鏡像 .Client 專案中主要專案的元件資料夾配置。 請注意，如果您將元件移至與專案範本所使用資料夾不同的資料夾，命名空間可能需要調整配置檔案等資產。

如需元件和轉譯模式的詳細資訊，請參閱 ASP.NET Core Razor 元件和 ASP.NET Core Blazor 轉譯模式文章。

根據應用程式建立時選取的互動式轉譯模式，Layout 資料夾位於 Components 資料夾的伺服器專案或 .Client 專案的根目錄中。 資料夾包含下列配置元件和樣式表：

  • MainLayout 元件 (MainLayout.razor) 是應用程式的配置元件。
  • MainLayout.razor.css 是應用程式主要配置的樣式表。
  • NavMenu 元件 (NavMenu.razor) 會實作提要欄位導覽。 此元件包含 NavLink 元件 (NavLink)，會轉譯其他 Razor 元件的導覽連結。 NavLink 元件會向使用者指出目前顯示哪個元件。
  • NavMenu.razor.css 是應用程式導覽功能表的樣式表。

Routes元件 (Routes.razor) 位於伺服器專案或 .Client 專案中，並使用 Router 元件來設定路由。 針對用戶端互動式元件，Router 元件會攔截瀏覽器瀏覽，並轉譯符合所要求位址的頁面。

伺服器專案的 Components 資料夾會儲存應用程式的伺服器端 Razor 元件。 共用元件通常會放在 Components 資料夾的根目錄，而版面配置和頁面元件通常會放在 Components 資料夾內的資料夾中。

伺服器專案的 Components/Pages 資料夾包含應用程式的可路由伺服器端 Razor 元件。 每個頁面的路由都是使用 @page 指示詞來指定。

App 元件 (App.razor) 是具有 HTML <head> 標記、Routes 元件和 Blazor<script> 標記的應用程式根元件。 根元件是應用程式載入的第一個元件。

每個伺服器和 .Client 專案中的 _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 應用程式主機，並包含應用程式的啟動邏輯，包括服務註冊、設定、記錄和要求處理管線。

位於伺服器或 .Client 專案中的應用程式設定檔案 (appsettings.Development.json、appsettings.json) 提供組態設定。 在伺服器專案中，設定檔案位於專案的根目錄中。 在 .Client 專案中，會從 Web 根資料夾 wwwroot 取用設定檔案。

在 .Client 專案中：

  • Pages 資料夾包含可路由用戶端 Razor 元件。 每個頁面的路由都是使用 @page 指示詞來指定。

  • wwwroot 資料夾是保存應用程式公用靜態資產之 .Client 專案的 Web 根資料夾。

  • Program.cs 檔案是專案的進入點，可設定 WebAssembly 主機，並包含專案的啟動邏輯，包括服務註冊、設定、記錄和要求處理管線。

當設定其他選項時，其他檔案和資料夾可能會出現在從 Blazor Web App 專案範本產生的應用程式中。 例如，使用 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) 的根頁面，並啟用瀏覽。

當設定其他選項時，其他檔案和資料夾可能會出現在從 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) 的根頁面，並啟用瀏覽。

當設定其他選項時，其他檔案和資料夾可能會出現在從 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 App 中，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 App 中，<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 專案中實作服務。

其他資源