學習ASP.NET Core Blazor程式設計系列二——第一個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": "http://localhost:7110;http://localhost:5110", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } }, "IIS Express": { "commandName": "IISExpress", "launchBrowser": true, "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } } } }
- 執行緒池底層原理詳解與原始碼分析
- 30分鐘掌握 Webpack
- 線性迴歸大結局(嶺(Ridge)、 Lasso迴歸原理、公式推導),你想要的這裡都有
- 【前端必會】webpack loader 到底是什麼
- 中心化決議管理——雲端分析
- HashMap底層原理及jdk1.8原始碼解讀
- 詳解JS中 call 方法的實現
- 列印 Logger 日誌時,需不需要再封裝一下工具類?
- 初識設計模式 - 代理模式
- 密碼學奇妙之旅、01 CFB密文反饋模式、AES標準、Golang程式碼
- Springboot之 Mybatis 多資料來源實現
- CAS核心思想、底層實現
- 面試突擊86:SpringBoot 事務不回滾?怎麼解決?
- 基於electron vue element構建專案模板之【打包篇】
- MiniWord .NET Word模板引擎,藉由Word模板和資料簡單、快速生成檔案。
- 認識執行緒,初始併發
- 1-VSCode搭建GD32開發環境
- 初識設計模式 - 原型模式
- 執行緒安全問題的產生條件、解決方式
- 2>&1到底是什麼意思?