ASP.NET Web 窗体与Blazor 的体系结构比较

小窍门

此内容摘自电子书《面向 Azure ASP.NET Web Forms 开发人员的 Blazor》,可在 .NET 文档上获取,也可作为免费可下载的 PDF 脱机阅读。

《面向 ASP NET Web Forms 开发人员的 Blazor》电子书封面缩略图。

虽然 ASP.NET Web 窗体并 Blazor 具有许多类似的概念,但它们的工作方式存在差异。 本章探讨 ASP.NET Web 窗体和Blazor的内部机制及架构。

ASP.NET Web 窗体

ASP.NET Web 窗体框架基于以页面为中心的体系结构。 在应用中,每个请求某个位置的 HTTP 请求,都对应一个 ASP.NET 响应的独立页面。 请求页面时,浏览器的内容将替换为请求的页面结果。

页面包含以下组件:

  • HTML 标记
  • C# 或 Visual Basic 代码
  • 包含逻辑和事件处理能力的后端代码类
  • 控件

控件是 Web UI 的可重用单元,可通过编程方式放置在页面上并与之交互。 页面由以 .aspx 结尾并包含标记、控件和某些代码的文件组成。 代码隐藏类位于具有相同基名称和 .aspx.cs.aspx.vb 扩展名的文件中,具体取决于使用的编程语言。 有趣的是,Web 服务器会解释 .aspx 文件的内容,并在更改时对其进行编译。 即使 Web 服务器已在运行,也会发生此重新编译。

可以通过标记创建控件,并将其作为用户控件使用。 用户控件派生自 UserControl 该类,并且具有与 Page 类似的结构。 用户控件的标记存储在 .ascx 文件中。 随附的代码隐藏类驻留在 .ascx.cs.ascx.vb 文件中。 还可以使用代码完全生成控件,方法是从 WebControlCompositeControl 基类继承。

页面也有广泛的事件生命周期。 每个页面在 ASP.NET 运行时为每个请求执行页面代码时,会引发初始化、加载、预呈现和卸载事件。

页面上的控件通常会回发到呈现控件的同一页面,并从名为 ViewState 的隐藏表单域中携带有效负载。 该 ViewState 字段包含有关控件在页面上呈现和呈现时的状态的信息,使 ASP.NET 运行时能够比较和标识提交到服务器的内容中的更改。

Blazor

Blazor 是客户端 Web UI 框架,与 JavaScript 前端框架(如 Angular 或 React)类似。 Blazor 处理用户交互并呈现必要的 UI 更新。 Blazor 基于请求-答复模式。 用户交互作为不在任何特定 HTTP 请求上下文中的事件进行处理。

Blazor 应用由一个或多个在 HTML 页面上呈现的根组件组成。

Blazor HTML 中的组件

用户如何指定组件应呈现的位置,以及如何连接组件,以便用户交互特定于 托管模型

Blazor 组件 是表示可重用 UI 的 .NET 类。 每个组件维护自己的状态并指定其自己的呈现逻辑,其中包括呈现其他组件。 组件指定特定用户交互的事件处理程序以更新组件的状态。

组件处理事件后, Blazor 呈现组件并跟踪呈现的输出中更改的内容。 组件不会直接呈现到文档对象模型(DOM)。 而是呈现为 DOM 的内存中表示形式(名为 RenderTree),以便 Blazor 可以跟踪更改。 Blazor 将新呈现的输出与上一个输出进行比较,以计算 UI 差异,然后它有效地应用于 DOM。

Blazor DOM 交互

还可手动指示组件应在其状态发生非正常 UI 事件的更改时呈现。 Blazor 使用 SynchronizationContext 来强制执行单个逻辑线程。 在此 Blazor 上执行组件的生命周期方法和由 SynchronizationContext 引发的任何事件回调。