MASA Blazor入门详细教程

目录

1.什么是Blazor? 有什么优势？2.为什么选择MASA Blazor？能用来干什么？3.使用MASA Blazor模板创建第一个Blazor程序4.使用MASA Blazor组件配置项目结尾开源地址

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

ASP.NET Core Blazor 简介

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

使用 C# 代替 javascript 来创建信息丰富的交互式 UI。共享使用 .NET 编写的服务器端和客户端应用逻辑。将 UI 呈现为 HTML 和 css，以支持众多浏览器，其中包括移动浏览器。与新式托管平台（如 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项目组件来丰富我们的项目。

4.使用MASA Blazor组件配置项目

示例：

（1）Blazor应用结构介绍

首先我们先来看看Blazor项目结构，分析主要几个文件的作用。（概念定义比较枯燥，想直接体验的同学可以直接跳过此部分，直接上手实践即可，但不推荐这么做，有句话说得好“磨刀不误砍柴工”

步我们来实现动态菜单栏伸缩功能 找到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（组件生命周期图）

对应绑定分部类中EditItem方法

我们先运行看下效果：

这两个按钮分别对应两个Button

Close直接绑定后台关闭Dialog方法

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

（4）使用预置组件应对常用业务的场景

在我们实际项目中，难免会碰到需要你开发多个模块或者多个管理页面，这样一来每个页面不可避免的会有一些需要你重复编码的地方，那么你是选择每个页面copy一份相同的代码还是选择封装一个业务组件呢？毫无疑问，聪明的同学肯定会选择后者，当然新入门www.easck.com的同学可以先来看看MASA Blazor提供预置组件，拿来即用，后期同学们登堂入室后可自行根据当前业务封装业务组件。

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

直接copy代码看看效果：

当我们数据表格中数据内容长度过长时可以使用封装好的预置组件：
看看效果：

使用方法很简单且支持复制效果：

当然还有其他常用的预置组件，由于本文篇幅有限，只做个别组件使用介绍，使用方法都大差不差，感兴趣的同学可自行去官网查阅。

结尾

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

使用MASA Blazor开发一个标准的查询表格页以及封装技巧介绍

参考资源

https://blazor.masastack.com/https://github.com/BlazorComponent/MASA.Blazorhttps://gitee.com/blazorcomponent/MASA.Blazorhttps://blazor-pro.masastack.com/dashboards/ecommercehttps://github.com/BlazorComponent/MASA.Blazor.Prohttps://blazor-university.com/https://github.com/capdiem/MASA.Blazor.Experimental.Components

开源地址

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

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

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

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

MASA.Blazor：https://github.com/BlazorComponent/MASA.Blazor