MASA Blazor入門這一篇就夠了-有解無憂

1.什么是Blazor? 有什么優勢？

ASP.NET Core Blazor 簡介

Blazor 是一個使用 Blazor 生成互動式客戶端 Web UI 的框架：

使用 C# 代替 JavaScript 來創建資訊豐富的互動式 UI，
共享使用 .NET 撰寫的服務器端和客戶端應用邏輯，
將 UI 呈現為 HTML 和 CSS，以支持眾多瀏覽器，其中包括移動瀏覽器，
與新式托管平臺（如 Docker）集成，

Blazor 優勢：

  1. 使用 C# 代替 JavaScript 來撰寫代碼，
  2. 利用現有的 .NET 庫生態系統，
  3. 在服務器和客戶端之間共享應用邏輯，
  4. 受益于 .NET 的性能、可靠性和安全性，
  5. 在 Windows、Linux 和 macOS 上使用 Visual Studio 保持高效作業，
  6. 以一組穩定、功能豐富且易用的通用語言、框架和工具為基礎來進行生成，

2.為什么選擇MASA Blazor？能用來干什么？

MASA Blazor是一個基于 Blazor Component 和 Material Design 的 UI 組件庫，
dotNET開發者不需要懂得javascript就能開發一個企業級中后臺系統，
MASA Blazor優勢：

豐富組件：包含Vuetify 1:1還原的基礎組件，以及很多實用的預置組件和.Net深度集成功能，包括Url、面包屑、導航三聯動，高級搜索，i18n等，
UI設計語言：設計風格現代，UI 多端體驗設計優秀，
簡易上手：豐富詳細的上手檔案，免費的視頻教程（制作中），
社區活躍鼓勵：用戶參與實時互動，做出貢獻加入我們，構建最開放的開源社區，
長期支持：全職團隊維護，并提供企業級支持，
專業示例：MASA Blazor Pro提供多種常見場景的預設布局，

MASA Blazor Pro預設布局示例：

看到這里是不是有同學對此感興趣起來了呢！那么這樣的布局頁面是怎么構建出來的呢？我們自己能不能也搭建一個這樣的布局呢！嘿嘿！不要著急、我們接著往下看，

3.使用MASA Blazor模板創建第一個Blazor程式

1.首先安裝Masa.Template模板

（1）檢查本機.Net SDK版本，請確保已安裝.NET6.0

（2）安裝 Masa.Template模板,包含 MASA 系列所有專案模板
dotnet new --install Masa.Template

2.創建專案

dotnet new masab -o MasaBlazorApp
默認為Server模式可通過引數--Mode WebAssembly 創建 WebAssembly 模式專案

3.配置 MASA Blazor（由于我這里使用了模板，以下配置在模板中都已經幫我們配好了，安裝模板后直接dotnet run 即可；未安裝模板的同學，按下面步驟配置即可）

（1）安裝NuGet包

dotnet add package Masa.Blazor

（2）引入資源檔案（我這里為Blazor Server）

在 Pages/_Layout.cshtml 中引入資源檔案

（3）注入相關服務

在 Program.cs 中添加 Masa.Blazor 相關服務

builder.Services.AddMasaBlazor();

（4）修改 _Imports.razor 檔案,添加以下內容:

  @using Masa.Blazor

（5）運行專案

到這里一個簡單的MASA Blazor專案就搭建完成啦，當然這只是最基礎的，接下來我們將一步一步使用MASA Blazor專案組件來豐富我們的專案，

3.使用MASA Blazor組件配置專案

示例：

（1）Blazor應用結構介紹

首先我們先來看看Blazor專案結構，分析主要幾個檔案的作用，（概念定義比較枯燥，想直接體驗的同學可以直接跳過此部分，直接上手實踐即可，但不推薦這么做，有句話說得好“磨刀不誤砍柴工”

Program.cs

Blazor服務器應用的入口點在Program.cs檔案中定義，與控制臺應用一樣，當應用執行時，它會使用特定于 Web 應用的默認值創建并運行 Web 主機實體， Web 主機會管理 Blazor 服務器應用的生命周期，并設定主機級別服務，

在 Blazor 服務器應用中，顯示的 Program.cs 檔案用于為 Blazor 在客戶端瀏覽器與服務器之間使用的實時連接設定終結點，
在 BlazorWebAssembly 應用中，Program.cs 檔案定義應用的根組件及其呈現位置：

在Program.cs檔案中我們先主要關注幾個點：

1.在依賴注入中，因為我們利用了Razor來實作C#和html的混合編碼以及我們使用的是ServerSide的Blazor，注入代碼如下：

中間件如下：

_Host.cshtml

在Blazor服務器應用中，根組件的主機頁面在_Host.cshtml檔案中定義，這個檔案定義一個Razor頁面，而不是一個組件，Razor Pages 使用 Razor 語法定義服務器可尋址頁面，

在Program.cs檔案中會自動去我們配置的_Host.cshtml檔案中尋找根組件
這是默認使用App組件作為根組件（這是啟動Blazor應用的必要條件之一）

那么render-mode 特性是用來干什么的呢?
讓我們來看看官方檔案解釋：

App.razor
Blazor應用的根組件，里面通常包含Router組件用來處理Blazor中的路由

那么Router組件中的這些引數比如AppAssembly、Found、NotFound都有什么作用呢？

通過閱讀官方檔案我們可以發現：

Router 組件會在指定的 AppAssembly 和 AdditionalAssemblies（可選）中發現可路由組件，瀏覽器進行導航時，如果有路由與地址匹配，Router 會攔截導航并呈現其 Found 引數的內容和提取的 RouteData，否則 Router 會呈現其 NotFound 引數，

RouteView 組件負責呈現由 RouteData 指定的匹配組件及其布局（如果有），如果匹配組件沒有布局，則使用可選擇指定的 DefaultLayout，

LayoutView 組件在指定布局內呈現其子內容

也就是說我們在配置完.razor頁面的路由后，Router組件會在瀏覽器進行導航時將路由與地址匹配，能夠匹配到的，Router就會攔截導航并呈現其Found引數指定的匹配組件和布局（我們這里指定MainLayout布局頁面），反之，則呈現NotFound引數，

_Layout.cshtml

在之前的_Host.cshtml檔案中我們默認指定啟用了_Layout.cshtml布局頁

_Layout.cshtml是Blazor應用的主機頁（相當于一個根頁面布局檔案），里面包含應用的初始化HTML 及其組件，它使得我們所有頁面布局保持的外觀變得更加的容易，

MainLayout.razor

在Blazor中，使用布局組件處理頁面布局，布局組件繼承自LayoutComponentBase,后者定義型別RenderFragment 的單個 Body 屬性，該屬性可用于呈現頁面的內容，

_Imports.razor
全域匯入配置，在這里使用using引入后，相當于在所有razor檔案中都進行了引入，

好了，廢話有點多, 到這里Blazor應用部分主要結構概念差不多已經介紹完了，感興趣的同學可自行移步官網進行閱讀面向 Web Forms ASP.NET Web Forms 開發人員的 Blazor
接下來我們直接開始擼代碼

上述頁面展示中我們看到了三個選單頁面，這幾個頁面都分別配置了對應路由
Home對應頁面為Index.razor、路由為"/"

Counter對應頁面為Counter.razor、路由為"/counter"

Fetch Data頁面對應FetchData.razor頁面路由，路由為"/fetchdata"
在Shared/MainLayout.razor頁面中我們可以看到配置，

接下來我們直接移步MASA Blazor 官網地址找到我們需要的組件示例：

我們直接將示例代碼拷貝至Shared/MainLayout.razor頁面中的MAppBar組件中即可

dotnet run 看下效果

接下來我們MASA Blazor組件庫中找到Navigation drawers組件，將razor頁面代碼與C#代碼拷貝至組件中即可

我們對代碼稍作修改

dotnet run 看下效果

下一步我們來實作動態選單欄伸縮功能找到Navigation drawers組件的迷你模式

接下來我們來改造我們的代碼

dotnet run 看下效果

是不是感覺超級簡單呢！當然這只是入門寫法，拋磚引玉，感興趣的同學可以動手試試，舉一反三解鎖更多組件的用法與寫法

（3）使用DataTable、Dialog等組件實作一個基礎的資料互動頁

首先我們先初始化Fetch.razor，只留一個最簡單組件

DataTable組件需要至少系結一個Headers（表頭）和資料源
所以下一步我們先定義Headers與Items（實際呼叫API獲取資料即可，這里默認死資料僅作參考）
我們先建一個Fetch.razor頁的分部類，定義部分代碼

dotnet run 看看效果

在上述代碼截圖中會發現我們用到了OnInitializedAsync()方法，那么這個方法是用來干什么的呢？說到這個問題，我們需要先了解了解Razor組件的生命周期ASP.NET Core Razor 組件生命周期

先來看個 Component lifecycle diagram（組件生命周期圖）

SetParametersAsync - 設定引數時

每當父級呈現時，都會執行此方法，
傳入組件的引數包含在ParameterView中，這是根據傳入組件的狀態對服務器進行異步呼叫(例如)的好時機，
在重寫中呼叫base.SetParametersAsync(Parameters)時，會為組件的[Parameter]屬性賦值，
它也是指定默認引數值的正確位置，

OnInitialized / OnInitializedAsync - 組件初始化

將ParameterCollection中的狀態分配給組件的[Parameter]屬性后，將執行這些方法，這與SetParametersAsync的用法相同，不同之處在于可以使用組件的狀態，

該方法僅在組件首次創建時執行一次，如果父級稍后更改組件的引數，則跳過此方法，
注意：當組件是@page，并且Blazor應用程式導航到呈現同一頁面的新URL時，Blazor將為該頁面重用當前物件實體，因為該物件是同一實體，所以Blazor不會對該物件呼叫IDisposable.Dispose，也不會再次執行其OnInitialized方法，

OnParametersSet / OnParametersSetAsync - 引數設定后

如果這是組件的新實體，則此方法將在OnInitializedAsync之后立即執行，如果它是因為其父組件正在重新呈現而正在重新呈現的現有組件，則不會執行OnInitialized*方法，而是在SetParametersAsync之后立即執行此方法，

OnAfterRender / OnAfterRenderAsync - 組件渲染后

這兩個方法在Blazor每次重新生成組件的
RenderTree
時執行，這可能是因為組件的父級重新呈現、用戶與組件互動(例如，滑鼠單擊)，或者如果組件執行其StateHasChanged方法來呼叫重新呈現，

了解Razor組件的生命周期后，我們來繼續擼代碼

我們給資料表格增加操作列

看下效果：

接下來我們給增加一個MDialog 對話框用來做增加修改操作
直接將官網的示例拿過來即可

在這程序中我們需要給Dialog組件以及組件中的其他組件使用Bind-Value（雙向系結）綁上值，

接下來我們給資料表格的Action操作列增加OnClick點擊事件

對應系結分部類中EditItem方法

我們先運行看下效果：

這兩個按鈕分別對應兩個Button

Close直接系結后臺關閉Dialog方法

Save方法則是用來做最終修改資料等操作DB的方法這里就不做演示，感興趣的同學可自行結合業務做相應的操作，

（4）使用預置組件應對常用業務的場景

在我們實際專案中，難免會碰到需要你開發多個模塊或者多個管理頁面，這樣一來每個頁面不可避免的會有一些需要你重復編碼的地方，那么你是選擇每個頁面copy一份相同的代碼還是選擇封裝一個業務組件呢？毫無疑問，聰明的同學肯定會選擇后者，當然新入門的同學可以先來看看MASA Blazor提供預置組件，拿來即用，后期同學們登堂入室后可自行根據當前業務封裝業務組件，

我們先來看看通用頁頭預置組件：

直接copy代碼看看效果：