再学Blazor——概述

简介

Blazor 是一种 .NET 前端 Web 框架,同时支持服务器端呈现和客户端交互性。

  • 使用 C# 语言创建丰富的交互式 UI
  • 共享前后端应用逻辑
  • 可以生成混合桌面和移动应用
  • 受益于 .NET 的性能、可靠性和安全性
  • 需要有 HTML、CSS、JS 相关基础(开发 UI 框架的话)
  • 组件化设计,类似 React、Vue 等前端框架

组件

Blazor 应用基于组件。 Blazor 中的组件是指 UI 元素,例如页面、对话框或数据输入窗体,甚至小到一个输入框。

  • 定义灵活的 UI 呈现逻辑
  • 处理用户事件
  • 可以嵌套和重用 (大大提高开发效率和维护成本)
  • 可作为 Razor 类库或 NuGet 包共享和分发
  • 有 Razor 标记页(.razor文件)和纯 C# 高级写法两种编写形式

1. Razor 常用写法

此写法为 HTML 和 C# 混合开发,HTML 结构清晰,示例如下:

<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>@code {private int currentCount = 0;private void IncrementCount(){currentCount++;}
}

2. C# 高级写法

如下代码为纯 C# 高级写法,这段代码也是 .razor 文件编译后生成的格式。如果你反编译 Razor 语法写的组件dll,发现上述 HTML 和 C# 混合开发的组件代码与下面类似。

class Counter : ComponentBase
{private int currentCount = 0;protected override void BuildRenderTree(RenderTreeBuilder builder){//构建 h1 标签builder.OpenElement(0, "h1");builder.AddMarkupContent(1, "Counter");builder.CloseElement();//构建 P 标签builder.OpenElement(0, "p");builder.AddMarkupContent(1, $"Current count: {currentCount}");builder.CloseElement();//构建按钮builder.OpenElement(0, "button");builder.AddAttribute(1, "class", "btn btn-primary");builder.AddAttribute(2, "onclick", EventCallback.Factory.Create(this, IncrementCount));builder.AddMarkupContent(3, "Click me");builder.CloseElement();}private void IncrementCount(){currentCount++;}
}

上述 BuildRenderTree 方法代码较长,我们可以将 UI 元素封装成扩展方法,button封装成组件,这样构建组件既方便又可读。使用扩展方法后组件代码改进如下:

class Counter : ComponentBase
{private int currentCount = 0;protected override void BuildRenderTree(RenderTreeBuilder builder){//构建 h1 标签builder.H1("Counter");//构建 P 标签builder.P($"Current count: {currentCount}");//构建按钮builder.Component<Button>().Set(c => c.Style, "btn btn-primary").Set(c => c.Text, "Click me").Set(c => c.OnClick, IncrementCount).Build();}private void IncrementCount(){currentCount++;}
}

Web 应用

Blazor Web应用提供了一种基于组件的体系结构,该体系结构具有在单个解决方案中实现服务器端呈现和完整的客户端交互性的能力。在这种体系结构中,你可以在服务器端和客户端呈现模式之间进行切换,甚至可以在同一页面中混合使用这两种模式。

Blazor Web应用可以通过静态呈现来自服务器的HTML内容来响应,这种方式的优点是能够快速将UI传送到浏览器。由于UI呈现在服务器上快速执行,所以无需下载大型JavaScript捆绑包,从而大大加快了页面加载速度。

Blazor Web应用还支持交互式服务器呈现,这种方式通过与浏览器的实时连接在服务器上处理UI交互。这种呈现方式可以实现丰富的用户体验,就像客户端应用所提供的那样,不过无需创建API终结点就能访问服务器资源。

此外,Blazor Web应用也支持通过客户端呈现来处理交互。这种呈现方式依赖于使用可随附应用下载的WebAssembly构建的.NET运行时。在WebAssembly上运行Blazor时,.NET代码可以访问浏览器的完整功能,并可与JavaScript互操作。 .NET 代码在浏览器的安全性沙盒中运行,沙盒提供的保护可防御客户端计算机上的恶意操作。

对于独立Blazor WebAssembly应用,该应用可以完全在浏览器中直接运行,无需服务器参与。对于这种应用,资产可作为静态文件部署到可为客户端提供静态内容的Web服务器或服务中。下载后,可以将独立Blazor WebAssembly应用作为渐进式Web应用(PWA)进行缓存并脱机执行。

混合应用

Blazor Hybrid 允许在本地客户端应用中将 Razor 组件与适用于 Web、移动和桌面平台的本机及 Web 技术进行混合使用。其实现方式是,代码在 .NET 进程中以本地形式运行,并使用本地互操作通道将 Web UI 呈现在嵌入式 Web View 控件中。

混合应用采用 .NET Multi-platform App UI (.NET MAUI)来构建,这是一个跨平台框架,利用 C# 和 XAML 来创建本机移动应用和桌面应用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/107057.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Steam余额红锁的原因,及红锁后申诉办法

安全的余额一般是通过充值卡充值获得&#xff0c;再加上交易手续费再转卖给你。一般便宜不到哪去。 但你别以为余额是安全的&#xff0c;就万事大吉了。照样有被红锁的可能性&#xff0c;比如这三种&#xff1a; 1、Steam市场巡查机制&#xff0c;红锁 平台的巡查机制和原理…

在逍遥模拟器上安装LPSosed模块以及其Manager管理器

环境&#xff1a;win7 64位&#xff0c;python3.8.10&#xff0c;逍遥模拟器9.0.6&#xff0c;安卓版本9 参考我的文章&#xff1a; 在雷电模拟器9上安装magisk并安装LSPosed模块以及其Manager管理器&#xff08;一&#xff09;-CSDN博客 前置工作&#xff1a;先开启模拟器的…

一文讲解图像梯度

简介&#xff1a; ​ 图像梯度计算的是图像变化的幅度。对于图像的边缘部分&#xff0c;其灰度值变化较大&#xff0c;梯度值变化也较大&#xff1b;相反&#xff0c;对于图像中比较平滑的部分&#xff0c;其灰度值变化较小&#xff0c;相应的梯度值变化也较小。一般情…

测试培训机构「某峰」测评调查报告

测试培训机构「某峰」测评调查报告 ⭐文章简介一、机构测评之受访者介绍二、老师傅-机构测评10问&#xff01;第1问 你从哪里了解到这个培训机构&#xff1f;第2问 你为什么选择这家培训机构&#xff0c;它吸引你掏毛爷爷的点有哪些&#xff1f;第3问 回顾一下&#xff0c;从咨…

CA与区块链之数字签名详解

CA与区块链验证本质上都是数字签名&#xff0c;首先&#xff0c;我们看一下什么是数字签名&#xff01; 数字签名 数字签名是公钥密码学中的一种技术&#xff0c;用于验证信息的完整性和发送者的身份。简而言之&#xff0c;数字签名是一种确认信息来源和信息完整性的手段。它通…

ubuntu设置开机自启服务脚本

在Ubuntu上设置开机自启服务的步骤如下&#xff1a; 创建一个服务文件&#xff1a;使用文本编辑器创建一个以 .service 结尾的服务文件&#xff0c;例如 demo-service.service。 sudo vim /etc/systemd/system/demo-service.service在服务文件中添加以下内容&#xff1a; [Unit…

pandas_使用总结(1)

取值操作 常用方式 df[‘Q1’] # 选择‘Q1’列&#xff0c;同df.Q1&#xff0c;返回一个Seriesdf[[‘name’,‘Q1’]] # 选择多列&#xff0c;注意括号df[0:3] # 取前三行df[0:10:2] # 0到前10行中每两行取一次数据&#xff08;python 切片操作&#xff1a; start : end : st…

企业如何选择安全又稳定的文件传输协议

企业无论是内部的数据共享&#xff0c;还是与外部的合作交流&#xff0c;都需要通过网络进行文件的传输和交换。然而&#xff0c;文件传输它涉及到多方面的因素&#xff0c;例如文件的大小、数量、类型、敏感性、传输距离、网络环境等。这些因素都会影响到文件传输的各个方面&a…

“5G+北斗”赋能千行百业,中海达亮相2023中国移动全球合作伙伴大会

10月12日&#xff0c;2023中国移动全球合作伙伴大会在广州保利世贸博览馆召开。本次活动以“算启新程 智享未来”为主题&#xff0c;重点展示中国移动全球合作伙伴在5G、终端、数智城市等方面的新产品、新技术和新服务。作为中国移动“朋友圈”战略合作企业及“北斗时空子链”链…

快速自动化处理JavaScript渲染页面

在进行网络数据抓取时&#xff0c;许多网站使用了JavaScript来动态加载内容&#xff0c;这给传统的网络爬虫带来了一定的挑战。本文将介绍如何使用Selenium和ChromeDriver来实现自动化处理JavaScript渲染页面&#xff0c;并实现有效的数据抓取。 1、Selenium和ChromeDriver简介…

Java中通过List中的stream流去匹配相同的字段去赋值,避免for循环去查询数据库进行赋值操作

List<EquipmentDeviceMessage> equipmentDeviceMessageInfo greenThinkTanksInfoPlanMapper.getEquipmentDeviceMessageInfo(phone, startDate, endDate); List<BladeUserVo> userList bladexsqlMapper.getUserList();Q&#xff1a;上面两个列表怎么使用流&#…

Java8 新特性之Stream(三)-- Stream的终结操作

目录 1.forEach(Consumer) 2.reduce(BinaryOperator) 3.max([Comparator]) 4.min([Comparator]) 5.count() 6.findFirst() 7.findAny() 拓展:

OpenWrt如何公网ssh远程连接【内网穿透】

文章目录 1.安装cpolar内网穿透2.配置SSH远程访问隧道3.公网远程连接4.固定远程连接地址 简单几步实现openWRT结合cpolar内网穿透工具实现远程ssh连接 1.安装cpolar内网穿透 cpolar是一个非常棒的跨平台、内网穿透工具&#xff0c;可以通过安全隧道将NAT或防火墙后面的本地服…

【Springboot】Filter 过滤器的使用

一、基本介绍 过滤器 Filter 作为 Java 三大器之一&#xff0c;在 Java Web 的使用中有很高的地位。所谓过滤器&#xff0c;就是实现了 javax.servlet.Filter 接口的服务器端程序&#xff0c;就是对事物进行过滤的。在 Web 中的过滤器&#xff0c;当然就是对请求进行过滤&#…

解决axios不发起请求的问题

一个很简单axios发起的get请求&#xff0c;但是network就是没有xhr记录&#xff1a; 找了半天也没有找到原因&#xff0c;后来问了chatgpt才找到原因&#xff1a; 请求地址url前面没有const关键字&#xff0c;此时url相当于undefined&#xff0c;而axios在url为undefined时不会…

天猫商品品牌数据采集接口,天猫商品详情数据接口,天猫API接口

天猫商品品牌数据采集方法如下&#xff1a; 打开天猫&#xff0c;进入任意一个品牌的商品页面。点击浏览器右上角的“选项”按钮&#xff0c;选择“检查元素”或使用快捷键CtrlShiftI&#xff08;Windows&#xff09;或CmdOptionI&#xff08;Mac&#xff09;打开开发者工具。…

JVM类装载器详解

目录 一、类装载的过程 1.1 装载(Load) 1.2 链接(Link) 1.2.1 验证(Varify) 二、类装载器组成 1. JVM 中内置了三个重要的 ClassLoader&#xff0c;同时按如下顺序进行加载&#xff1a; 2、图解 3、加载原则 所谓的双亲委派 类加载器负责在运行时将Java类动态加载到Java虚拟机&…

一起学SF框架系列附-常用官网及知识点资源链接推荐

学习SpringFramework过程中&#xff0c;用到的一些好的资源链接罗列如下&#xff1a; 1、常用官网地址 spring官网&#xff1a;https://spring.io/ springframework文档官网&#xff1a;https://docs.spring.io/spring-framework/reference/index.html maven库&#xff1a;http…

多关键词高亮显示

引入关键词文件&#xff0c;符合有条件的背景色高亮显示&#xff0c;也可取消。 <div id"testHtml"><p>写入的文本</p><p>关键词</p></div> var str 多个关键词&#xff0c;关键词文件&#xff0c;关键词 var strL str.replac…

nginx报错

故障1&#xff1a;nginx 502错误 故障描述 一个 post 的请求&#xff0c;直接调接口服务数据正常返回&#xff0c;但是通过 nginx 代理后&#xff0c; 什么都没有返回 nginx错误日志 upstream sent invalid chunked response while reading upstream 原因 http协议版本不一致…