腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

MASA?Blazor入門詳細(xì)教程

更新時間：2022年04月26日 15:24:50 作者：CNBLOG

MASA?Blazor是一個基于?Blazor?Component?和?Material?Design?的?UI?組件庫，接下來通過本文給大家介紹MASA?Blazor入門詳細(xì)教程，感興趣的朋友一起看看吧

1.什么是Blazor? 有什么優(yōu)勢？

ASP.NET Core Blazor 簡介

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

使用 C# 代替 JavaScript 來創(chuàng)建信息豐富的交互式 UI。
共享使用 .NET 編寫的服務(wù)器端和客戶端應(yīng)用邏輯。
將 UI 呈現(xiàn)為 HTML 和 CSS，以支持眾多瀏覽器，其中包括移動瀏覽器。
與新式托管平臺（如 Docker）集成。

Blazor 優(yōu)勢：

1. 使用 C# 代替 JavaScript 來編寫代碼。
2. 利用現(xiàn)有的 .NET 庫生態(tài)系統(tǒng)。
3. 在服務(wù)器和客戶端之間共享應(yīng)用邏輯。
4. 受益于 .NET 的性能、可靠性和安全性。
5. 在 Windows、Linux 和 macOS 上使用 Visual Studio 保持高效工作。
6. 以一組穩(wěn)定、功能豐富且易用的通用語言、框架和工具為基礎(chǔ)來進(jìn)行生成。

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

MASA Blazor是一個基于 Blazor Component 和 Material Design 的 UI 組件庫。
dotNET開發(fā)者不需要懂得javascript就能開發(fā)一個企業(yè)級中后臺系統(tǒng)。
MASA Blazor優(yōu)勢：

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

MASA Blazor Pro預(yù)設(shè)布局示例：

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

3.使用MASA Blazor模板創(chuàng)建第一個Blazor程序

1.首先安裝Masa.Template模板

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

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

2.創(chuàng)建項目

dotnet new masab -o MasaBlazorApp
默認(rèn)為Server模式可通過參數(shù)–Mode WebAssembly 創(chuàng)建 WebAssembly 模式項目

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

（1）安裝NuGet包

dotnet add package Masa.Blazor

（2）引入資源文件（我這里為Blazor Server）

在 Pages/_Layout.cshtml 中引入資源文件

（3）注入相關(guān)服務(wù)

在 Program.cs 中添加 Masa.Blazor 相關(guān)服務(wù)

builder.Services.AddMasaBlazor();

（4）修改 _Imports.razor 文件,添加以下內(nèi)容:

@using Masa.Blazor

（5）運行項目

到這里一個簡單的MASA Blazor項目就搭建完成啦。當(dāng)然這只是最基礎(chǔ)的，接下來我們將一步一步使用MASA Blazor項目組件來豐富我們的項目。

4.使用MASA Blazor組件配置項目

示例：

（1）Blazor應(yīng)用結(jié)構(gòu)介紹

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

Program.cs

Blazor服務(wù)器應(yīng)用的入口點在Program.cs文件中定義，與控制臺應(yīng)用一樣。當(dāng)應(yīng)用執(zhí)行時，它會使用特定于 Web 應(yīng)用的默認(rèn)值創(chuàng)建并運行 Web 主機實例。 Web 主機會管理 Blazor 服務(wù)器應(yīng)用的生命周期，并設(shè)置主機級別服務(wù)。

在 Blazor 服務(wù)器應(yīng)用中，顯示的 Program.cs 文件用于為 Blazor 在客戶端瀏覽器與服務(wù)器之間使用的實時連接設(shè)置終結(jié)點。
在 BlazorWebAssembly 應(yīng)用中，Program.cs 文件定義應(yīng)用的根組件及其呈現(xiàn)位置：

在Program.cs文件中我們先主要關(guān)注幾個點：

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

中間件如下：

_Host.cshtml

在Blazor服務(wù)器應(yīng)用中，根組件的主機頁面在_Host.cshtml文件中定義。這個文件定義一個Razor頁面，而不是一個組件。Razor Pages 使用 Razor 語法定義服務(wù)器可尋址頁面。

在Program.cs文件中會自動去我們配置的_Host.cshtml文件中尋找根組件
這是默認(rèn)使用App組件作為根組件（這是啟動Blazor應(yīng)用的必要條件之一）

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

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

那么Router組件中的這些參數(shù)比如AppAssembly、Found、NotFound都有什么作用呢？

通過閱讀官方文檔我們可以發(fā)現(xiàn)：

Router 組件會在指定的 AppAssembly 和 AdditionalAssemblies（可選）中發(fā)現(xiàn)可路由組件。瀏覽器進(jìn)行導(dǎo)航時，如果有路由與地址匹配，Router 會攔截導(dǎo)航并呈現(xiàn)其 Found 參數(shù)的內(nèi)容和提取的 RouteData，否則 Router 會呈現(xiàn)其 NotFound 參數(shù)。

RouteView 組件負(fù)責(zé)呈現(xiàn)由 RouteData 指定的匹配組件及其布局（如果有）。如果匹配組件沒有布局，則使用可選擇指定的 DefaultLayout。

LayoutView 組件在指定布局內(nèi)呈現(xiàn)其子內(nèi)容

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

_Layout.cshtml

在之前的_Host.cshtml文件中我們默認(rèn)指定啟用了_Layout.cshtml布局頁

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

MainLayout.razor

在Blazor中，使用布局組件處理頁面布局。布局組件繼承自LayoutComponentBase,后者定義類型RenderFragment 的單個 Body 屬性，該屬性可用于呈現(xiàn)頁面的內(nèi)容。

_Imports.razor
全局導(dǎo)入配置，在這里使用using引入后，相當(dāng)于在所有razor文件中都進(jìn)行了引入。

好了，廢話有點多, 到這里Blazor應(yīng)用部分主要結(jié)構(gòu)概念差不多已經(jīng)介紹完了，感興趣的同學(xué)可自行移步官網(wǎng)進(jìn)行閱讀面向 Web Forms ASP.NET Web Forms 開發(fā)人員的 Blazor
接下來我們直接開始擼代碼

（2）使用App bars（應(yīng)用欄）與Navigation drawers（導(dǎo)航抽屜）配置導(dǎo)航欄與菜單欄

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

Counter對應(yīng)頁面為Counter.razor、路由為"/counter"

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

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

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

dotnet run 看下效果

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

我們對代碼稍作修改

dotnet run 看下效果

下一步我們來實現(xiàn)動態(tài)菜單欄伸縮功能找到Navigation drawers組件的迷你模式

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

dotnet run 看下效果

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

（3）使用DataTable、Dialog等組件實現(xiàn)一個基礎(chǔ)的數(shù)據(jù)交互頁

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

DataTable組件需要至少綁定一個Headers（表頭）和數(shù)據(jù)源
所以下一步我們先定義Headers與Items（實際調(diào)用API獲取數(shù)據(jù)即可，這里默認(rèn)死數(shù)據(jù)僅作參考）
我們先建一個Fetch.razor頁的分部類，定義部分代碼

dotnet run 看看效果

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

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

SetParametersAsync - 設(shè)置參數(shù)時

每當(dāng)父級呈現(xiàn)時，都會執(zhí)行此方法。
傳入組件的參數(shù)包含在ParameterView中。這是根據(jù)傳入組件的狀態(tài)對服務(wù)器進(jìn)行異步調(diào)用(例如)的好時機。
在重寫中調(diào)用base.SetParametersAsync(Parameters)時，會為組件的[Parameter]屬性賦值。
它也是指定默認(rèn)參數(shù)值的正確位置。

OnInitialized / OnInitializedAsync - 組件初始化

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

該方法僅在組件首次創(chuàng)建時執(zhí)行一次。如果父級稍后更改組件的參數(shù)，則跳過此方法。
注意：當(dāng)組件是@page，并且Blazor應(yīng)用程序?qū)Ш降匠尸F(xiàn)同一頁面的新URL時，Blazor將為該頁面重用當(dāng)前對象實例。因為該對象是同一實例，所以Blazor不會對該對象調(diào)用IDisposable.Dispose，也不會再次執(zhí)行其OnInitialized方法。

OnParametersSet / OnParametersSetAsync - 參數(shù)設(shè)置后

如果這是組件的新實例，則此方法將在OnInitializedAsync之后立即執(zhí)行。如果它是因為其父組件正在重新呈現(xiàn)而正在重新呈現(xiàn)的現(xiàn)有組件，則不會執(zhí)行OnInitialized*方法，而是在SetParametersAsync之后立即執(zhí)行此方法。

OnAfterRender / OnAfterRenderAsync - 組件渲染后

這兩個方法在Blazor每次重新生成組件的
RenderTree
時執(zhí)行。這可能是因為組件的父級重新呈現(xiàn)、用戶與組件交互(例如，鼠標(biāo)單擊)，或者如果組件執(zhí)行其StateHasChanged方法來調(diào)用重新呈現(xiàn)。

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

我們給數(shù)據(jù)表格增加操作列

看下效果：

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

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

接下來我們給數(shù)據(jù)表格的Action操作列增加OnClick點擊事件

對應(yīng)綁定分部類中EditItem方法

我們先運行看下效果：

這兩個按鈕分別對應(yīng)兩個Button

Close直接綁定后臺關(guān)閉Dialog方法

Save方法則是用來做最終修改數(shù)據(jù)等操作DB的方法這里就不做演示，感興趣的同學(xué)可自行結(jié)合業(yè)務(wù)做相應(yīng)的操作。

（4）使用預(yù)置組件應(yīng)對常用業(yè)務(wù)的場景

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

我們先來看看通用頁頭預(yù)置組件：