当前位置: 首页 > news >正文

再学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 来创建本机移动应用和桌面应用。

相关文章:

再学Blazor——概述

简介 Blazor 是一种 .NET 前端 Web 框架&#xff0c;同时支持服务器端呈现和客户端交互性。 使用 C# 语言创建丰富的交互式 UI共享前后端应用逻辑可以生成混合桌面和移动应用受益于 .NET 的性能、可靠性和安全性需要有 HTML、CSS、JS 相关基础&#xff08;开发 UI 框架的话&a…...

Ceph运维笔记

Ceph运维笔记 一、基本操作 ceph osd tree //查看所有osd情况 其中里面的weight就是CRUSH算法要使用的weight&#xff0c;越大代表之后PG选择该osd的概率就越大 ceph -s //查看整体ceph情况 health_ok才是正常的 ceph osd out osd.1 //将osd.1踢出集群 ceph osd i…...

RTSP协议

1 前言 RTSP协议作为音视频实时监控一个非常重要的协议&#xff0c;具有非常广泛的应用。RTSP由RFC 2326规范化&#xff0c;它允许客户端通过请求不同的媒体资源来控制流媒体服务器。RTSP是一种应用层协议&#xff0c;通常基于TCP连接&#xff0c;用于建立和控制媒体会话。这使…...

Maven系列第6篇:生命周期和插件详解?

maven系列目标&#xff1a;从入门开始开始掌握一个高级开发所需要的maven技能。 这是maven系列第6篇。 整个maven系列的内容前后是有依赖的&#xff0c;如果之前没有接触过maven&#xff0c;建议从第一篇看起&#xff0c;本文尾部有maven完整系列的连接。 前面我们使用maven…...

【通义千问】大模型Qwen GitHub开源工程学习笔记(4)-- 模型的量化与离线部署

摘要: 量化方案基于AutoGPTQ,提供了Int4量化模型,其中包括Qwen-7B-Chat和Qwen-14B-Chat。更新承诺在模型评估效果几乎没有损失的情况下,降低存储要求并提高推理速度。量化是指将模型权重和激活的精度降低以节省存储空间并提高推理速度的过程。AutoGPTQ是一种专有量化工具。…...

2022最新版-李宏毅机器学习深度学习课程-P23 为什么用了验证集结果还是过拟合

用了验证集还有可能会过拟合 这个片段可以从理论上证明这一点 以上整个挑选模型的过程也可以想象为一种训练。 把三个模型导出的最小损失公式看成一个集合&#xff0c;现在要做的就是在这个集合中找到某个h&#xff08;此处可以视为训练&#xff09;&#xff0c;使得在验证集…...

Spring Cloud Alibaba—Sentinel 控制台安装

1、Sentinel 控制台包含如下功能: 查看机器列表以及健康情况&#xff1a;收集 Sentinel 客户端发送的心跳包&#xff0c;用于判断机器是否在线。 监控 (单机和集群聚合)&#xff1a;通过 Sentinel 客户端暴露的监控 API&#xff0c;定期拉取并且聚合应用监控信息&#xff0c;最…...

基于动物迁徙优化的BP神经网络(分类应用) - 附代码

基于动物迁徙优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于动物迁徙优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.动物迁徙优化BP神经网络3.1 BP神经网络参数设置3.2 动物迁徙算法应用 4.测试结果…...

一键搞定!黑群晖虚拟机+内网穿透实现校园公网访问攻略!

文章目录 前言本教程解决的问题是&#xff1a;按照本教程方法操作后&#xff0c;达到的效果是前排提醒&#xff1a; 1. 搭建群晖虚拟机1.1 下载黑群晖文件vmvare虚拟机安装包1.2 安装VMware虚拟机&#xff1a;1.3 解压黑群晖虚拟机文件1.4 虚拟机初始化1.5 没有搜索到黑群晖的解…...

【C语言】——通讯录(静态-动态增长-文件储存)

目录 前言&#xff1a; 一&#xff1a;整体框架 关于通讯录结构体的创建 二&#xff1a;通讯录的功能实现&#xff08;静态&#xff09; 2.1初始化通讯录 2.2增加联系人 2.3打印通讯录 2.4删除联系人 2.5 查找联系人 2.6修改联系人 2.7排序联系人 三&#xff1a;通…...

win10安装nginx及简单使用(命令)

下载 下载地址&#xff1a;http://nginx.org/en/download.html 使用 解压 更改配置 conf目录下nginx.conf 修改为未被占用的端口&#xff0c;地址改成你的地址 server {# 监听端口 listen 9010;# 地址 server_name 127.0.0.1;# 静态资源location / {root html;i…...

【农业生产系统模型】基于R语言APSIM模型进阶应用与参数优化、批量模拟实践技术

随着数字农业和智慧农业的发展&#xff0c;基于过程的农业生产系统模型在模拟作物对气候变化的响应与适应、农田管理优化、作物品种和株型筛选、农田固碳和温室气体排放等领域扮演着越来越重要的作用。APSIM (Agricultural Production Systems sIMulator)模型是世界知名的作物生…...

金融数学方法:梯度下降法

1.算法介绍 梯度下降法是一种常用的优化算法&#xff0c;其通过沿着梯度下降的方向迭代寻找局部极小值。如果沿着梯度上升的方向迭代&#xff0c;就可以找到极大值。 在梯度下降法中&#xff0c;我们首先需要选择一个初始点 x 0 x_0 x0​作为起始位置&#xff0c;然后计算当前位…...

1031 查验身份证

一.问题&#xff1a; 一个合法的身份证号码由17位地区、日期编号和顺序编号加1位校验码组成。校验码的计算规则如下&#xff1a; 首先对前17位数字加权求和&#xff0c;权重分配为&#xff1a;{7&#xff0c;9&#xff0c;10&#xff0c;5&#xff0c;8&#xff0c;4&#xf…...

如何共享 Android 不同模块的构建配置

最近想重新梳理学习一遍 Android 的各个知识点&#xff0c;于是新建了一个 AndroidStudy 项目仓库&#xff0c;打算每个知识块新建 1 个 module。 类似这样&#xff1a; AndroidStudy (Root Project) ├─app (Module0) ├─CustomView (Module1) ├─KotlinCoroutines (Modul…...

atlas运维中遇到的问题

1、java.lang.NoClassDefFoundError&#xff1a;javax/ws/rs/core/Link$Builder 主要原因&#xff1a;jsr311-api包中javax.ws.rs.core包中没有Link类&#xff0c;而Atlas以HBase作为元数据存储&#xff0c;HBase本身使用的为javax.ws.rs-api包中的core包&#xff0c;其中有Lin…...

06-React的路由

06-React的路由 1.相关理解 1).SPA的理解 单页Web应用&#xff08;single page web application&#xff0c;SPA&#xff09;。整个应用只有一个完整的页面。点击页面中的链接不会刷新页面&#xff0c;只会做页面的局部更新。数据都需要通过ajax请求获取, 并在前端异步展现。…...

虹科方案 | 加州理工学院利用HK-TrueNAS开展地震研究

一、客户背景 加州理工学院(CalTech)是世界顶尖的理工类科学研究型学府之一。加州理工学院地震实验室是加州理工学院地质与行星科学部(GPS)的一个分支机构&#xff0c;成立于1921年&#xff0c;自20年代以来一直是世界地震学研究中心&#xff0c;并且几十年来一直是媒体对大地…...

宝塔面板部署express以及MySql项目

第一次在宝塔面板上部署express和MySql项目&#xff0c;部署过程一直跑不通接口&#xff0c;特此记录一下。 在部署的时候&#xff0c;建议第一步把数据库MySql给跑通&#xff0c;中间好多原因是由于数据库的原因给引起的。 一.连接数据库 &#xff08;1&#xff09;在宝塔面…...

联盟链学习笔记-网络的创建

联盟链学习笔记 初始网络 下图是初始网络网络N的参考图 排序服务 在定义 网络 N 的时候&#xff0c;第一件事情就是定义一个 排序服务O4。O4 最初被配置并且由组织 R4 的一个管理员来启动&#xff0c;并且由 R4 管理。配置 NC4 包含了描述网络管理能力初始集合的规则。最初在…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...