快捷導(dǎo)航

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

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

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

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

ASP.NET Core Blazor 簡(jiǎn)介

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

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

Blazor 優(yōu)勢(shì)：

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

2.為什么選擇MASA Blazor？能用來(lái)干什么？

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

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

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

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

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

1.首先安裝Masa.Template模板

（1）檢查本機(jī).Net SDK版本，請(qǐng)確保已安裝.NET6.0

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

2.創(chuàng)建項(xiàng)目

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

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）運(yùn)行項(xiàng)目

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

4.使用MASA Blazor組件配置項(xiàng)目

示例：

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

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

Program.cs

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

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

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

1.在依賴注入中，因?yàn)槲覀兝昧薘azor來(lái)實(shí)現(xiàn)C#和html的混合編碼以及我們使用的是ServerSide的Blazor，注入代碼如下：

中間件如下：

_Host.cshtml

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

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

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

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

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

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

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

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

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

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

_Layout.cshtml

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

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

MainLayout.razor

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

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

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

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

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

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

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

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

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

dotnet run 看下效果

接下來(lái)我們MASA Blazor組件庫(kù)中找到Navigation drawers組件，將razor頁(yè)面代碼與C#代碼拷貝至組件中即可

我們對(duì)代碼稍作修改

dotnet run 看下效果

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

接下來(lái)我們來(lái)改造我們的代碼

dotnet run 看下效果

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

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

首先我們先初始化Fetch.razor，只留一個(gè)最簡(jiǎn)單組件

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

dotnet run 看看效果

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

先來(lái)看個(gè) Component lifecycle diagram（組件生命周期圖）

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

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

OnInitialized / OnInitializedAsync - 組件初始化

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

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

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

如果這是組件的新實(shí)例，則此方法將在OnInitializedAsync之后立即執(zhí)行。如果它是因?yàn)槠涓附M件正在重新呈現(xiàn)而正在重新呈現(xiàn)的現(xiàn)有組件，則不會(huì)執(zhí)行OnInitialized*方法，而是在SetParametersAsync之后立即執(zhí)行此方法。

OnAfterRender / OnAfterRenderAsync - 組件渲染后

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

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

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

看下效果：

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

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

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

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

我們先運(yùn)行看下效果：

這兩個(gè)按鈕分別對(duì)應(yīng)兩個(gè)Button

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

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

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

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

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