學習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"
      }
    }
  }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/503573.html

標籤：.NET技术

上一篇：【問題】為什么 System.Timers.Timer 更改間隔時間后的第一次觸發時間是設定時間的三倍？

下一篇：洗牌一副牌js的功能

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

四、創建一個Blazor應用程式