學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程式（中）

• 2022 年 9 月 4 日
• 筆記
• AspNet, net6

四、創建一個Blazor應用程式

1. 第一種創建Blazor應用程式的方式。在Visual Studio 2022啟動介面中選擇「創建新項目」，如下圖。

圖2-5

2. 第二種創建Blazor應用程式的方式是。在Visual Studio 2022啟動介面中選擇「繼續但無需程式碼」，然後在Visual Studio 2022的主介面中選擇菜單–>文件–>新建–>項目。如下圖。

     圖2-6

3.  在彈出的「創建新項目」的對話框中做如下選擇。

• 在最左邊的下拉框中，選擇 「Blazor： ，如下圖中1處
• 在中間的下拉框中，選擇 「所有平台」。
• 在最右邊的下拉框中，選擇「所有語言」。
• 在下圖中2處，選擇「Blazor Server 應用」模板，點擊「下一步」按鈕。    

圖2-7

4.在彈出的「配置新項目」的對話框中，如下圖，在「項目名稱」輸入框中，輸入「BlazorAppDemo」。然後使用滑鼠點擊「下一步」按鈕。

圖2-8

5. 在彈出的「其他資訊」的對話框，如下圖。在「框架」下拉框中，選擇「NET 6.0(長期支援)」。其他值選擇默認值即可。然後使用滑鼠點擊「創建」按鈕。

 圖2-9

6. Visual Studio  20222使用默認模板創建了一個ASP.NET  Core  Blazor項目。我們剛才通過輸入一個項目名稱並選擇了幾個選項，創建了一個Web應用程式。這是一個簡單的入門項目，項目結構如下圖。       

圖2-10

7. 我們打開「解決方案資源管理器」，可以發現Blazor項目跟之前的ASP.NET  Core Mvc或Razor Page項目的結構差不多。下面來分別介紹一下主要的幾個文件與目錄。

1)   Data 文件夾：包含 WeatherForecast 類和 WeatherForecastService 的實現，它們嚮應用的FetchData組件提供示例天氣數據。

2)   Pages文件夾：包含構成Blazor應用的各種路由組件/頁面(.razor)和 Blazor Server 應用的根Razor頁面。每個頁面的路由由頁面中頂部的 @page指令來指定。該目錄下包括以下組件：

• _Host.cshtml：實現Razor頁面應用的根頁面：_Layout.cshtml：Host.cshtml根頁面的布局頁。文件中包含通用的HTML元素（腳本和樣式表）。
  • 最初請求應用的任何頁面，都會在響應中返回此頁面進行呈現。
  • 此主機頁面指定根App組件 (App.razor)的呈現位置。
• Counter 組件 (Counter.razor)：「計數器」頁面。
• Error 組件 (Error.razor)：當應用中發生未經處理的異常時調用此組件。
• FetchData組件(FetchData.razor)：「數據列表」頁面。
• Index 組件 (Index.razor)：Blazor模板所創建的Blazor應用的默認首頁。

3)   Shared 文件夾：包含以下共享組件和樣式表：

• MainLayout 組件 (MainLayout.razor)：應用的布局組件。
• MainLayout.razor.css：應用主布局的樣式表。
• NavMenu 組件 (NavMenu.razor)：實現側邊欄導航。 包括 NavLink 組件，該組件可向其他Razor組件呈現導航菜單。NavLink 組件會在系統載入其組件時自動指示選定狀態，這有助於用戶了解當前選中的菜單名稱及所顯示的頁面。
• NavMenu.razor.css：應用導航菜單的樣式表。
• SurveyPrompt 組件 (SurveyPrompt.razor)：Blazor 調查組件。

4)   wwwroot：存放靜態文件的文件夾，包含應用程式的公共靜態文件，這些文件包括網站使用的CSS樣式表、影像和JavaScript 文件

5)   _Imports.razor：包括要包含在應用組件 (.razor) 中的常見 Razor 指令，如用於命名空間的 @using 指令。

6)   App.razor：是Blazor應用程式的根組件，使用Router組件來設置客戶端路由。Router組件會截獲瀏覽器所發出的請求，並導航到相匹配的地址頁面。

7)   appsettings.json 和環境應用設置文件：用於應用程式範圍的配置設置。

8)   Program.cs：是啟動伺服器的應用程式的入口點，用於設置 ASP.NET Core 主機並包含應用的啟動邏輯，其中包括配置應用程式服務和請求處理管道配置：

• 指定應用程式的依賴項注入(DI)服務。通過調用 AddServerSideBlazor添加服務，將 WeatherForecastService 添加到服務容器以供示例 FetchData 組件使用。
• 配置應用的請求處理管道，用於處理所有對應用程式請求：
  • 調用 MapBlazorHub方法可以為瀏覽器的實時連接設置終結點。 使用SignalR創建連接，用於嚮應用程式添加實時 Web功能。
  • 調用MapFallbackToPage(“/_Host”)以設置應用程式的根頁面(Pages/_Host.cshtml)並啟用導航。

 9）BlazorAppDemo.csproj文件定義了應用程式項目及其依賴項，可以通過雙擊解決方案資源管理器中的BlazorAppDemo項目節點來查看。

10）Properties目錄中的launchSettings.json文件為本地開發環境定義了不同的配置文件設置。在項目創建時自動分配的埠號就保存在此文件中。

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "//localhost:24757",
      "sslPort": 44336
    }
  },
  "profiles": {
    "BlazorAppDemo": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "//localhost:7110;//localhost:5110",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}