MASA Blazor入门详细教程
作者:CNBLOG 时间:2023-04-08 17:51:29
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项目结构,分析主要几个文件的作用。(概念定义比较枯燥,想直接体验的同学可以直接跳过此部分,直接上手实践即可,但不推荐这么做,有句话说得好“磨刀不误砍柴工”
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文件中都进行了引入。
来源:https://www.cnblogs.com/MASA/p/16193943.html
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
vue实现一个单独的组件注释
![](https://img.aspxhome.com/file/2023/6/133156_0s.jpg)
Python中asyncore异步模块的用法及实现httpclient的实例
js中将多个语句写成一个语句的两种方法小结
详解python之协程gevent模块
Python数据抓取爬虫代理防封IP方法
![](https://img.aspxhome.com/file/2023/9/117919_0s.png)
设计从"心"开始
python字符串操作的15种方法汇总
pytorch常用函数定义及resnet模型修改实例
asp连接mysql数据库详细实现代码
Python写出新冠状病毒确诊人数地图的方法
![](https://img.aspxhome.com/file/2023/3/133433_0s.png)
Django分页查询并返回jsons数据(中文乱码解决方法)
Python groupby函数图文详解
![](https://img.aspxhome.com/file/2023/8/112778_0s.webp)
说说掌握JavaScript语言的思想前提
常用的数据库访问方式是什么?
破解安装Pycharm的方法
![](https://img.aspxhome.com/file/2023/5/125125_0s.png)
Pytorch相关知识介绍与应用
Python 图片转数组,二进制互转操作
![](https://img.aspxhome.com/file/2023/4/89064_0s.png)
python 执行函数的九种方法
python实现公司年会抽奖程序
使用pandas计算环比和同比的方法实例
![](https://img.aspxhome.com/file/2023/1/92331_0s.png)