Blazor帶我重玩前端(三)

寫在前面

需要升級VS2019以及.NET Core到最新版（具體的最低支援，我已經忘了，總是越新支援的就越好），以更好的支援自己開發Blazor專案。

WebAssembly

搜尋Blazor模板

選擇Blazor WebAssembly App模板

專案例項

• 專案例項

1. BlazorApp.Shared：提供最一般的支援，包括各個Model
2. BlazorApp.Client：依賴BlazorApp.Shared，該專案側重於Pages功能
3. BlazorApp.Server：依賴BlazorApp.Shared、BlazorApp.Client，該專案側重於提供介面功能

BlazorApp.Client

從上圖可知 該專案主要包括wwwroot、Pages、Shared三個資料夾，以及_Imports.razor、App.razor、Program.cs這三個單獨的檔案。

wwwroot

這個資料夾和我們ASP.NET Core MVC裡的wwwroot基本一致，不過需要注意的是，這個資料夾裡面有一個比較重要的檔案index.html，它是我們Blazor專案的起點。這個檔案裡也引用了blazor.webassembly.js，可是我們在專案中沒有看到。這沒關係，因為它會由Microsoft.AspNetCore.Components.WebAssembly.Build提供，在執行編譯的時候會自己出現的。

Shared

這個資料夾裡，有三個檔案，分別是MainLayout.razor、NavMenu.razor、SurveyPrompt.razor。

• MainLayout是Layout檔案，它定義了該專案的基本佈局
• NavMenu是Component，它實現了選單功能，並對外提供了獨立而又單一的元件功能
• SurveyPrompt也是Component，它實現了檔案傳入與連線跳轉功能，對外也是提供了獨立而又單一的選單功能，同時這也是一個帶參的元件 元件功能後續會詳細介紹，但是需要提前說明的是，任何元件一經對外使用，都是獨立而又單一的。 接下來看一下執行後的效果圖：

整體的風格、左側的選單、右側的連結都像我們展示了佈局和元件功能

Pages

裡面定義了三個.razor檔案，這也是模板提供給我的Blazor編寫案例

• Index.razor向我們展示了，元件的呼叫
• FetchData.razor向我們展示了Call遠端API和路由功能（@page "/fetchdata"）
• Counter.razor向我們展示了事件呼叫

執行專案

設定BlazorApp.Server為啟動專案

1. 下載必須檔案

如圖所示，我們需要載入6.15M的檔案，同時可以看到Blazor的執行時資訊mono_wasm_runtime_ready。

2. 接下來，我們展開Object來看看其詳細資訊，會看到Object中有太多的依賴程式集。

3. 開啟原始碼tab頁，會看到以下幾個檔案

• dotnet.wasm檔案，開啟後，會看到我們前文說過的WebAssembly文字格式的內容。
• blazor.webassembly.js，用於下載.NET執行時，依賴程式集等，同時還會初始化執行應用的程式集
• dotnet.3.2.0.js也是我們之前所說的用於呼叫C#方法的JS檔案

新增頁面

這個比較簡單，如下操作即可

接下來的內容我們將以此模板為例，進行展開討論