MASA Blazor入門這一篇就夠了

Mamba24⁸發表於2022-04-01

Blazor

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

ASP.NET Core Blazor 簡介

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

使用 C# 代替 JavaScript 來建立資訊豐富的互動式 UI。
共享使用 .NET 編寫的伺服器端和客戶端應用邏輯。
將 UI 呈現為 HTML 和 CSS，以支援眾多瀏覽器，其中包括移動瀏覽器。
與新式託管平臺（如 Docker）整合。

Blazor 優勢：

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

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程式碼看看效果：