我要评论一、blazor介绍
blazor是微软在asp.net core 3.0中推出的一个前端mvvm模型，它可以利用razor页面引擎和c#作为脚本语言来构建web页面.
在.net5中，blazor将代替传统的web pages。可以代替如下代码简单演示了它的基本功能：
和angular js和vue的模型非常类似，blazor 支持大多数应用所需的核心方案：
- 参数
- 事件处理
- 数据绑定
- 路由
- 依赖关系注入
- 布局
- 模板
- 级联值
使用blazor主要有如下好处：
- c# 语言：使用 c# 代替 javascript 来编写代码。
- .net 生态系统：利用现有的 .net 库生态系统。
- 完整堆栈开发：共享服务器和客户端逻辑。
- 快速且具有可伸缩性：.net 旨在实现出色的性能、可靠性和安全性。
- 行业领先工具：始终高效支持 windows、linux 和 macos 上的 visual studio。
- 稳定性和一致性：以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。
二、blazor的模式
1、客户端模式：
运行blazor需要c#支持，在客户端模式下，通过webassembly的方式实现的：
- c# 代码文件和 razor 文件将被编译为 .net 程序集。
- 该程序集和 .net 运行时将被下载到浏览器。
- blazor 客户端启动 .net 运行时并配置运行时，为应用加载程序集。 文档对象模型 (dom) 操作和浏览器 api 调用将由 blazor 客户端运行时通过 javascript 互操作处理。
2、服务端模式：
blazor组件呈现逻辑也可以在服务端实现，通过singalr连接传递ui更新：
- 处理从浏览器到服务器的发送 ui 事件。
- 运行组件后，将服务器发送的 ui 更新重新应用到浏览器。
3、两种模式的比较：
和客户端模式相比，服务端模式有如下有点：
- 客户端不需要webassembly支持，具有更好的客户端兼容性
- 不需要下载.net webassembly程序集，具有更小的页面加载时间
- 可以运行完整的.net runmtime，可以实现更加强大的功能
但同时也有如下缺点：
- 所有操作都需要发往服务器，网络不好的时候有延时
- 所有运算都在服务端进行，服务器端具有更大的处理压力
综上所述，客户端具有更好的效率，服务端具有更少的约束和更强大的功能，对于一些对性能要求不高和网络不差的场景，服务端模式无疑是非常合适的选择。
简单说：
blazor server 适合内部局域网的运用。
blazor webassembly 适合各类内部应用（比如公司内部管理系统）。
razor pages 适合逻辑简单的 web 站点。
三、组件
blazor应用基于组件 。 blazor 中的组件是指 ui 元素，例如页面、对话框或数据输入窗体。
组件是内置到 .net 程序集的 .net 类，用来：
- 定义灵活的 ui 呈现逻辑。
- 处理用户事件。
- 可以嵌套和重用。
- 可以作为 razor 类库或 nuget 包共享和分发。
组件类通常以 razor 标记页（文件扩展名为 .razor ）的形式编写。 blazor 中的组件有时被称为 razor 组件 。 razor 是用于将 html 标记与专为提高开发人员工作效率而设计的 c# 代码结合在一起的语法。 借助 razor，可以使用 intellisense 支持在同一文件中的 html 标记和 c# 之间切换。 razor pages 和 mvc 也使用 razor。 与围绕请求/响应模型生成的 razor pages 和 mvc 不同，组件专门用于处理客户端 ui 逻辑和构成。
以下 razor 标记演示组件 (dialog.razor )，该组件可以嵌套在另一个组件中：
<div>
<h1>@title</h1>
@childcontent
<button @onclick="onyes">yes!</button>
</div>
@code {
[parameter]
public string title { get; set; }
[parameter]
public renderfragment childcontent { get; set; }
private void onyes()
{
console.writeline("write to the console in c#! 'yes' button was selected.");
}
}对话框的正文内容 (childcontent) 和标题 (title) 由在其 ui 中使用此组件的组件提供。 onyes 是由按钮的 onclick 事件触发的 c# 方法。
blazor 使用 ui 构成的自然 html 标记。 html 元素指定组件，并且标记的特性将值传递给组件的属性。
在以下示例中，index 组件使用 dialog 组件。 childcontent 和 title 由 <dialog> 元素的属性和内容设置。
index.razor：
@page "/"
<h1>hello, world!</h1>
welcome to your new app.
<dialog title="blazor">
do you want to <i>learn more</i> about blazor?
</dialog>在浏览器中访问父级 (index.razor ) 时，将呈现该对话框：
浏览器中呈现的对话框组件
如果在应用中使用此组件，visual studio 和 visual studio code 中的 intellisense 可加快使用语法和参数补全的开发。
组件呈现为浏览器文档对象模型 (dom) 的内存中表现形式，称为“呈现树” ，用于以灵活高效的方式更新 ui。
四、示例：
到此这篇关于asp.net core前端框架blazor的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持代码网。
发表评论