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更好!

目录
相关文章
|
小程序 前端开发
微信小程序中使用画布canvas实现动态心电图绘制
微信小程序中使用画布canvas实现动态心电图绘制
946 0
微信小程序中使用画布canvas实现动态心电图绘制
|
XML Java 数据格式
聊一聊 Spring 6 容器 IOC
IoC 是 Inversion of Control 的简写,译为“控制反转”,它不是一门技术,而是一种设计思想,是一个重要的面向对象编程法则,能够指导我们如何设计出松耦合、更优良的程序。 Spring 通过 IoC 容器来管理所有 Java 对象的实例化和初始化,控制对象与对象之间的依赖关系。我们将由 IoC 容器管理的 Java 对象称为 Spring Bean,它与使用关键字 new 创建的 Java 对象没有任何区别。 IoC 容器是 Spring 框架中最重要的核心组件之一,它贯穿了 Spring 从诞生到成长的整个过程。
490 0
|
编译器 C# 开发者
C# 10.0中的全局`using`指令:简化命名空间引用的新方式
【1月更文挑战第4天】本文介绍了C# 10.0中引入的全局`using`指令,该指令允许开发者在项目级别统一管理命名空间引用,从而消除源文件中重复的`using`语句。全局`using`指令通过减少冗余代码、提高可维护性和统一命名空间管理,为开发者带来了更高效的编码体验。文章详细解释了如何实现全局`using`指令,并探讨了其在实际项目中的优势和适用场景。
|
开发框架 前端开发 C#
从零开始学 Blazor 创建 Web 应用,入门指南超详细!带你轻松开启精彩的开发之旅!
【8月更文挑战第31天】在互联网时代,Web应用开发愈发重要,Blazor作为新兴框架,允许使用C#和.NET技术构建交互式Web应用,提高开发效率与代码可维护性。本文将从零开始引导读者了解Blazor的基本概念,安装设置步骤,项目创建及运行方法。通过简单的示例介绍Blazor的基本结构,包括Pages、Shared等文件夹用途,以及Program.cs文件的功能。同时,还将演示如何创建Razor页面和组件,实现数据绑定与事件处理,帮助读者快速入门Blazor开发。
1307 0
|
前端开发 程序员 API
从后端到前端的无缝切换:一名C#程序员如何借助Blazor技术实现全栈开发的梦想——深入解析Blazor框架下的Web应用构建之旅,附带实战代码示例与项目配置技巧揭露
【8月更文挑战第31天】本文通过详细步骤和代码示例,介绍了如何利用 Blazor 构建全栈 Web 应用。从创建新的 Blazor WebAssembly 项目开始,逐步演示了前后端分离的服务架构设计,包括 REST API 的设置及 Blazor 组件的数据展示。通过整合前后端逻辑,C# 开发者能够在统一环境中实现高效且一致的全栈开发。Blazor 的引入不仅简化了 Web 应用开发流程,还为习惯于后端开发的程序员提供了进入前端世界的桥梁。
1562 0
|
9月前
|
Linux API 开发工具
魔搭llamafile集成:让大模型开箱即用
Llamafile是一个将大模型和其所需运行环境,全封装在一个可执行文件中的开源创新项目。为了方便广大开发者能以更低的门槛使用大模型,魔搭社区上提供了大量优秀模型的llamafile格式。
301 5
|
11月前
|
设计模式 缓存 前端开发
React中样式解决方案有哪些?
本文首发于微信公众号“前端徐徐”,探讨了React开发中的样式管理方法,包括内联样式、常规CSS、CSS-Module、CSS-in-JS及使用CSS框架等五种常见方案,分析了各自的优缺点,帮助开发者根据项目需求选择合适的样式解决方案。
268 0
|
前端开发 JavaScript C#
C#开发者的新天地:Blazor如何颠覆传统Web开发,打造下一代交互式UI?
【8月更文挑战第28天】Blazor 是 .NET 生态中的革命性框架,允许使用 C# 和 .NET 构建交互式 Web UI,替代传统 JavaScript。本文通过问答形式深入探讨 Blazor 的基本概念、优势及应用场景,并指导如何开始使用 Blazor。Blazor 支持代码共享、强类型检查和丰富的生态系统,简化 Web 开发流程。通过简单的命令即可创建 Blazor 应用,并利用其组件化和数据绑定特性快速搭建界面。无论对于 .NET 还是 Web 开发者,Blazor 都是一个值得尝试的新选择。
900 1
|
开发框架 开发工具 Java
从零到高手:一文教你快速上手Vaadin,打造首个炫酷Web应用,开启编程新世界的大门
【8月更文挑战第31天】Vaadin是一款基于Java的Web应用开发框架,以其丰富的组件库、简洁的API及对现代Web标准的支持而广受开发者欢迎。本文将指导你从零开始快速搭建一个简单的Vaadin应用。首先确保已安装JDK 11及以上版本和IDE(如IntelliJ IDEA或Eclipse)。接着使用Spring Initializr创建新项目,并选中“Spring Web”和“Vaadin”依赖。创建项目后,编写主应用类和主页类,实现基本页面功能。最后配置启动页面并运行应用。通过这些步骤,你将成功搭建一个基础Vaadin应用,开启探索更多特性的旅程。
1583 0
|
存储 Shell Linux
【Shell 命令集合 系统设置 】Linux 将参数作为命令行输入 eval命令 使用指南
【Shell 命令集合 系统设置 】Linux 将参数作为命令行输入 eval命令 使用指南
250 0