MASA Blazor入門這一篇就夠了

本文轉載自查看原文 2022-04-01 11:35 822 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代碼看看效果：