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

語言: CN / TW / HK

學習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": "http://localhost:7110;http://localhost:5110",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}