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

在學習本教程之前，我随便說兩句，如果一直是在跟随微軟的技術路線的話，應該記得當初微軟用來跟flash打擂台的SilverLigth，也是一個富用戶端的開發架構，現在不知道在哪個犄角旮旯裡呆着。Blazor未來的錢景如何，暫時未知？本教程學習一下微軟提供的Blazor應用程式模闆示例，本文介紹如何建立基于ASP.NET Core Blazor的應用程式。

學習ASP.NET Core Blazor程式設計系列一——綜述

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

四、建立一個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": "http://localhost:24757",
      "sslPort": 44336
    }
  },
  "profiles": {
    "BlazorAppDemo": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7110;http://localhost:5110",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}