Blazor模式讲解

blazor,模式,讲解 · 浏览次数 : 365

小编点评

**Blazor的三种模式:** 1. **Blazor Server** 2. **Blazor WebAssemblyBlazor WebAssembly** 3. **Blazor Hybrid** **Blazor Server** * 在 ASP.NET Core 应用中支持托管 Razor 组件。 * 可通过 SignalR 连接处理 UI 更新。 * 运行时停留在服务器上并处理 C# 代码。 * 将 UI 事件从浏览器发送到服务器。 * 将 UI 更新应用于服务器发送回的已呈现的组件。 **Blazor WebAssemblyBlazor WebAssembly** * 使用 .NET 生成交互式客户端 Web 应用。 * 无插件或将代码重新编译为其他语言的开放式 Web 标准。 * 适用于所有新式 Web 浏览器,包括移动浏览器。 **Blazor Hybrid** * 混合使用本机和 Web 技术。 * Razor 组件在 .NET 进程中本机运行。 * 使用本地互操作通道将 Web UI 呈现到嵌入式 Web View 控件。

正文

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

与Blazor模式讲解相似的内容:

Blazor模式讲解

Blazor的三种模式 Blazor Server: Blazor Server在 ASP.NET Core 应用中支持在服务器上托管 Razor 组件。 可通过 SignalR 连接处理 UI 更新。 运行时停留在服务器上并处理: 执行应用的 C# 代码。 将 UI 事件从浏览器发送到服务器。 将

WPF使用Blazor的快速案例

下面我们将讲解在WPF中使用Blazor,并且使用Blazor做一些文件编辑操作,下面是需要用到的东西 - WPF - Blazor - Masa Blazor - Monaco ## 安装Masa Blazor模板 使用`CMD`指令安装模板 ```shell dotnet new install

如何使用单纯的`WebAssembly`

一般来说在.net core使用WebAssembly 都是Blazor ,但是Blazor渲染界面,.net core也提供单纯的WebAssembly这篇博客我将讲解如何使用单纯的WebAssembly 安装WebAssembly模板 dotnet new install Microsoft.N

快速使用ChatGpt Web Server

快速使用ChatGpt Web Server ChatGpt Web Server是使用Blazor Server模式部署的一个服务,所有的逻辑和代码执行都会在服务器执行,然后通过SignalR传输到前端渲染。通过这样模式,我们部署ChatGpt Web Server只需要新加坡服务器,不需要在搭建

如何取消Blazor Server烦人的重新连接?

# 如何取消Blazor Server烦人的重新连接? 相信很多Blazor的用户在开发内部系统上基本上都选择速度更快,加载更快的`Blazor Server`模式。 但是`Blazor Server`由于是`SignalR`实现,所以在访问的时候会建立`WebSocket`通道,用于`js`交互和

基于Bootstrap Blazor开源的.NET通用后台权限管理系统

前言 今天大姚给大家分享一个基于Bootstrap Blazor开源的.NET通用后台权限管理系统,后台管理页面兼容所有主流浏览器,完全响应式布局(支持电脑、平板、手机等所有主流设备),可切换至 Blazor 多 Tabs 模式,权限控制细化到网页内任意元素(按钮、表格、文本框等等):Bootstr

(3) MasaFramework 入门第三篇,使用MasaFramework

首先我们需要创建一个MasaFramework模板的项目,项目名称TokenDemo,项目类型如图所示 删除Web/TokenDemo.Admin项目,新建Masa Blazor Pro项目模板 项目,项目位置在src/Web项目 项目类型选择ServerAndWasm,为了让我们支持俩种模式 创建

项目完成小结:使用Blazor和gRPC开发大模型客户端

## 前言 先介绍下这个项目。 最近我一直在探索大语言模型,根据不同场景训练了好几个模型,为了让用户测试使用,需要开发前端。 这时候,用 Gradio 搭建的前端是不太够的,虽说 GitHub 上也有一堆开源的 ChatGPT 前端,但我看了一圈,并没有找到便于二次开发定制的,再一想,这么简单的功能

(2)MasaFramework入门第二篇,安装MasaFramework了解各个模板

安装MasaFramework模板 执行以下命令安装最新Masa的模板 dotnet new --install Masa.Template 安装完成将出现四个模板 Masa Blazor App: Masa Blazor App的模板创建的是一个没有携带解决方案的项目模板,默认项目结构如图: 一个

在Winform中一分钟入门使用好看性能还好的Blazor Hybrid

# 在Winform中一分钟入门使用好看性能还好的Blazor Hybrid ## 安装模板 ```shell dotnet new install Masa.Template::1.0.0-rc.2 ``` ## 创建 Winform的Blazor Hybrid项目 ```shell dotnet