关于c#:MASA-Blazor入门这一篇就够了

1. 什么是 Blazor? 有什么劣势？

ASP.NET Core Blazor 简介

Blazor 是一个应用 Blazor 生成交互式客户端 Web UI 的框架：

1. 应用 C# 代替 JavaScript 来创立信息丰盛的交互式 UI。
2. 共享应用 .NET 编写的服务器端和客户端应用逻辑。
3. 将 UI 出现为 HTML 和 CSS，以反对泛滥浏览器，其中包含挪动浏览器。
4. 与旧式托管平台（如 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
接下来咱们间接开始撸代码

（2）应用 App bars（利用栏）与 Navigation drawers（导航抽屉）配置导航栏与菜单栏

上述页面展现中咱们看到了三个菜单页面，这几个页面都别离配置了对应路由
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# 代码拷贝至 <MNavigationDrawer> 组件中即可

咱们对代码稍作批改

dotnet run 看下成果

下一步咱们来实现动静菜单栏伸缩性能 找到 Navigation drawers 组件的迷你模式

接下来咱们来革新咱们的代码

dotnet run 看下成果

是不是感觉超级简略呢！当然这只是入门写法，抛砖引玉，感兴趣的同学能够入手试试，触类旁通解锁更多组件的用法与写法

（3）应用 DataTable、Dialog 等组件实现一个根底的数据交互页

首先咱们先初始化 Fetch.razor，只留一个最简略 <MDataTable> 组件

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 办法

咱们先运行看下成果：

这两个按钮别离对应 <MCardActions> 两个 Button

Close 间接绑定后盾敞开 Dialog 办法

Save 办法则是用来做最终批改数据等操作 DB 的办法这里就不做演示，感兴趣的同学可自行联合业务做相应的操作。

（4）应用预置组件应答罕用业务的场景

在咱们理论我的项目中，难免会碰到须要你开发多个模块或者多个治理页面，这样一来每个页面不可避免的会有一些须要你反复编码的中央，那么你是抉择每个页面 copy 一份雷同的代码还是抉择封装一个业务组件呢？毫无疑问，聪慧的同学必定会抉择后者，当然新入门的同学能够先来看看 MASA Blazor 提供预置组件，拿来即用，前期同学们登堂入室后可自行依据以后业务封装业务组件。

咱们先来看看通用页头预置组件：

间接 copy 代码看看成果：

当咱们数据表格中数据内容长度过长时能够应用封装好的 <CopyableText> 预置组件：
看看成果：

应用办法很简略且反对复制成果：

当然还有其余罕用的预置组件，因为本文篇幅无限，只做个别组件应用介绍，应用办法都大差不差，感兴趣的同学可自行去官网查阅。

结尾

本文介绍内容只针对刚入门的同学，抛砖引玉，对于封装组件技巧以及组件浅近用法感兴趣的同学能够关注咱们同系列其他同学的文章或者间接去官网查看源码：

应用 MASA Blazor 开发一个规范的查问表格页以及封装技巧介绍

参考资源

• https://blazor.masastack.com/
• https://github.com/BlazorComponent/MASA.Blazor
• https://gitee.com/blazorcomponent/MASA.Blazor
• https://blazor-pro.masastack.com/dashboards/ecommerce
• https://github.com/BlazorComponent/MASA.Blazor.Pro
• https://blazor-university.com/
• https://github.com/capdiem/MASA.Blazor.Experimental.Components

开源地址

MASA.BuildingBlocks：https://github.com/masastack/…

MASA.Contrib：https://github.com/masastack/…

MASA.Utils：https://github.com/masastack/…

MASA.EShop：https://github.com/masalabs/M…

MASA.Blazor：https://github.com/BlazorComp…

如果你对咱们的 MASA Framework 感兴趣，无论是代码奉献、应用、提 Issue，欢送分割咱们