Blazor模式讲解

简介: Blazor模式讲解

Blazor的三种模式

Blazor Server:

Blazor Server在 ASP.NET Core 应用中支持在服务器上托管 Razor 组件。 可通过 SignalR 连接处理 UI 更新。

运行时停留在服务器上并处理:

  • 执行应用的 C# 代码。
  • 将 UI 事件从浏览器发送到服务器。
  • 将 UI 更新应用于服务器发送回的已呈现的组件。

Blazor Server用于与浏览器通信的连接还用于处理 JavaScript 互操作调用。

Blazor Server 应用以不同于传统模型的方式呈现内容,以便在 ASP.NET Core 应用中使用 Razor 视图或 Razor Pages 呈现 UI。 这两种模型都使用 语言描述 HTML 内容,但两者在标记的呈现方式上差别显著。

呈现 Razor 页面或视图时,每行 Razor 代码都以文本形式发出 HTML。 呈现后,服务器会丢弃页面或视图实例,包括生成的任何状态。 当对页面进行另一请求时,整个页面将再次重新呈现为 HTML,并发送到客户端。

Blazor Server 生成组件图,以显示类似于 HTML 或 XML 文档对象模型 (DOM) 的内容。 组件图包含属性和字段中保存的状态。 Blazor 计算组件图以生成标记的二进制表示形式,并将该表示形式发送到客户端以进行呈现。 客户端与服务器之间建立连接后,组件的静态预呈现元素会替换为交互式元素。 通过在服务器上预呈现内容,应用在客户端上的响应速度更快。

组件在客户端交互后,用户交互和应用事件将触发 UI 更新。 发生更新时,将重新呈现组件图,并计算 UI diff(差异)。 此差异是更新客户端上的 UI 所需的最小一组 DOM 编辑。 差异以二进制格式发送到客户端,并由浏览器应用。

用户退出组件之后,组件会被丢弃。

Blazor WebAssembly

Blazor WebAssembly 用于使用 .NET 生成交互式客户端 Web 应用。 Blazor WebAssembly 使用无插件或将代码重新编译为其他语言的开放式 Web 标准。 Blazor WebAssembly 适用于所有新式 Web 浏览器,包括移动浏览器。

通过 WebAssembly(缩写为 wasm),可在 Web 浏览器内运行 .NET 代码。 WebAssembly 是针对快速下载和最大执行速度优化的压缩字节码格式。 WebAssembly 是开放的 Web 标准,支持用于无插件的 Web 浏览器。

WebAssembly 代码可通过 JavaScript(称为 JavaScript 互操作性,通常简称为 JavaScript 互操作或 JS 互操作)访问浏览器的完整功能。 通过浏览器中的 WebAssembly执行的 .NET 代码在浏览器的 JavaScript 沙盒中运行,沙盒提供的保护可防御客户端计算机上的恶意操作。

Blazor Hybrid

混合应用混合使用本机和 Web 技术。 Blazor Hybrid 应用在本机客户端应用中使用 Blazor。 Razor 组件在 .NET 进程中本机运行,并使用本地互操作通道将 Web UI 呈现到嵌入式 Web View 控件。 WebAssembly 不用于混合应用。 混合应用包含以下技术:

  • .NET Multi-platform App UI (.NET MAUI):用于使用 C# 和 XAML 创建本机移动应用和桌面应用的跨平台框架。
  • Windows Presentation Foundation (WPF):一个与分辨率无关的 UI 框架,使用基于矢量的呈现引擎,构建用于利用现代图形硬件。
  • Windows 窗体:一个可创建适用于 Windows 的丰富桌面客户端应用的 UI 框架。 Windows 窗体开发平台支持广泛的应用开发功能,包括控件、图形、数据绑定和用户输入。

Blazor Hybrid 甚至可在rust的tauri中运行,或者其他平台

Blazor Hybrid中C#代码在本机运行,性能是本机性能,对于性能Blazor Hybrid更好!

目录
相关文章
|
前端开发 Java 程序员
程序员的宝藏图标资源库:Icons8一键解锁高效设计
🌟 ​大家好,我是摘星!​ 🌟今天为大家带来的是程序员的宝藏图标资源库:Icons8一键解锁高效设计,以前做项目时,找图标要么付费、要么质量差、要么风格不统一,今天偶然间在搜索springboot logo的发现了 Icons8,简直打开了我写文档的新世界的大门!怀着激动的心情,迫不及待的写下这篇文章将这个网站分享给大家,废话不多说,让我们直接开始~
1536 0
|
人工智能 JSON 运维
🚀🚀 【MCP + AI】grafana-mcp-analyzer:基于 MCP 的轻量图表分析助手
`grafana-mcp-analyzer` 是一个开源项目,通过 MCP 协议连接 AI 助手与 Grafana,实现智能分析监控数据。只需简单配置,AI 可快速解读图表,提供性能瓶颈、优化建议等专业分析,极大提升运维效率。支持多种数据源(Prometheus、ES 等),适配 ChatGPT、Claude 等模型,部署轻量,操作便捷。从此告别深夜手动排查问题,让 AI 成为你的智能运维专家!项目地址:<https://github.com/SailingCoder/grafana-mcp-analyzer>
1293 1
🚀🚀 【MCP + AI】grafana-mcp-analyzer:基于 MCP 的轻量图表分析助手
|
JavaScript
iframe的父子页面通信
iframe的父子页面通信
835 6
|
弹性计算 人工智能 自然语言处理
GPU实验室-通过GPU云服务器生成AI视频
自多态模型GPT-4发布后,AIGC(AI Generated Content,AI生成内容)时代正扑面而来,从单一的文字文本,演化到更丰富的图片、视频、音频、3D模型等。本文基于阿里云GPU服务器和文本生成视频模型,采用Unet3D结构,通过从纯高斯噪声视频中,迭代去噪的过程,实现文本生成视频功能。
|
Linux API 开发工具
魔搭llamafile集成:让大模型开箱即用
Llamafile是一个将大模型和其所需运行环境,全封装在一个可执行文件中的开源创新项目。为了方便广大开发者能以更低的门槛使用大模型,魔搭社区上提供了大量优秀模型的llamafile格式。
664 5
|
缓存 JavaScript 安全
vue3对比vue2优化项简要概述
【8月更文挑战第9天】Vue 3 相较 Vue 2 有多项优化:一是性能提升,采用高效编译策略如静态提升与事件监听缓存减少不必要计算;二是响应式系统改用 Proxy 提升性能并改善对象及数组变化侦测;三是开发体验优化,引入组合式 API 便于逻辑复用,增强 TypeScript 支持,提供自定义渲染 API;四是体积更小,支持按需引入与树摇优化减少打包体积;五是其他改进如更好的错误处理和多根节点模板支持。综上,Vue 3 在多方面显著提升了开发效率和应用性能。
540 3
|
存储 开发框架 Java
什么是Spring?什么是IOC?什么是DI?IOC和DI的关系? —— 零基础可无压力学习,带源码
文章详细介绍了Spring、IOC、DI的概念和关系,解释了控制反转(IOC)和依赖注入(DI)的原理,并提供了IOC的代码示例,阐述了Spring框架作为IOC容器的应用。
1241 1
什么是Spring?什么是IOC?什么是DI?IOC和DI的关系? —— 零基础可无压力学习,带源码
|
开发框架 JavaScript 前端开发
MudBlazor:基于Material Design风格开源且强大的Blazor组件库
MudBlazor:基于Material Design风格开源且强大的Blazor组件库
725 0
|
存储 网络协议 安全
《熬夜整理》保姆级系列教程-玩转Wireshark抓包神器教程(1)-初识Wireshark
【2月更文挑战第1天】《熬夜整理》保姆级系列教程-玩转Wireshark抓包神器教程(1)-初识Wireshark
1241 3
|
机器学习/深度学习 人工智能 安全
智能之网:探索人工智能在现代通信系统中的应用与挑战
【8月更文挑战第4天】 随着人工智能技术的快速发展,其在通信领域的应用也日益广泛。从信号处理到网络优化,人工智能正在重塑通信行业的未来。本文将深入探讨人工智能如何革新现代通信系统,包括提高数据传输效率、增强网络安全、优化资源分配等方面,并分析面临的主要挑战及未来的发展方向。
987 3

热门文章

最新文章