ASP.NET Web UI 框架 Razor Pages/MVC/Web API/Blazor

前言 💢

🎯 记得以前用 Asp.net 做网页开发是的时候那时候还是 Web Forms ，后来 MVC 出来后也是火的不得了。那个时候还没有所谓的前后端分离一说，像 Vue.js、React 、Angular 的这些前端框架还没出生，那时候 Jquery 风靡一时,后端开发人员基本都会，那时候没有前端开发一说，顶多就是美工UI充当一下。

回顾过去 🕐

‌这么多年过去了，我从纯后端开发辗转安卓、IOS、小程序、web前端、物联网各个领域，现在回过头来再看现如今的 ASP.NET Core Web 应用框架，优点感觉陌生了，我记忆中还停留在 MVC时代。后来接触开发的都是前后端分离的，基于 Vue2/3 全家桶的，现在又出来 Razor 和 Blazor 两个 ASP.NET Core 自带的 Web UI 框架，简单查阅了下，貌似官方在一直更新优化，现在也是有模有样很强大，索性花点时间了解下。

官方推荐 ✅

ASP.NET Core 是一个完整的 UI 框架。你可以选择要结合哪些功能，以满足应用的 Web UI 需求。对于新的项目开发，我们推荐 ASP.NET Core Blazor 。

一、ASP.NET Core Blazor 🎀

Blazor 是一个全栈 Web UI 框架，建议用于大多数 Web UI 方案。

使用 Blazor 的好处：

可重用的组件模型。
高效的基于差异的组件呈现。
通过 WebAssembly 从服务器或客户端灵活地呈现组件。
使用 C# 生成丰富的交互式 Web UI 组件。
从服务器静态呈现组件。
逐步增强服务器呈现组件，以实现更流畅的导航和表单处理并启用流式呈现。
共享客户端和服务器上通用逻辑的代码。
与 JavaScript 互操作。
将组件与现有的 MVC、 Razor 页面或基于JavaScript 的应用集成。

有关 Blazor 及其体系结构和优势的完整概述，请参阅 ASP.NET CoreBlazor 和 ASP.NET Core Blazor 托管模型。若要开始使用第一个 Blazor 应用，请参阅生成第一个 Blazor 应用。

二、ASP.NET Core Razor Pages 🎗️

Razor 页面是一个基于页面的模型，用于生成服务器呈现的 Web UI。 Razor 页面 UI 在服务器上动态呈现，以生成页面的 HTML 和 CSS 来响应浏览器请求。页面在到达客户端时已准备好显示。对 Razor Pages 的支持是建立在 ASP.NET Core MVC 基础之上的。

🔖 Razor 页面的优势：

快速构建和更新 UI。页面的代码与页面一起保存，同时保持 UI 和业务逻辑关注点相互分离。
可进行测试并缩放到大型应用。
组织 ASP.NET Core 页面，使用起来比 ASP.NET MVC 更简单：
- 视图的具体逻辑和视图模型可以一起保存在它们自己的命名空间和目录中。
- 相关页面的组可以保存在各自的命名空间和目录中。

若要开始使用你的第一个 ASP.NET Core Razor Pages 应用，请参阅 Razor 。有关 ASP.NET Core Razor Pages、其体系结构和优势的完整概述，请参阅 Razor 。

三、ASP.NET Core MVC 🧣

ASP.NET Core MVC 在服务器上呈现 UI，并使用模型-视图-控制器 ( MVC ) 结构模式。 MVC 模式将应用分成三组主要组件：模型、视图和控制器。用户请求被路由到控制器。控制器负责使用模型来执行用户操作或检索查询结果。控制器选择要显示给用户的视图，并为其提供所需的任何模型数据。

🔖 ASP.NET Core MVC 的优势：

基于可缩放且成熟的模型生成大型 Web 应用。
明确分离关注点以获得最大的灵活性。
模型-视图-控制器的责任分离，确保了业务模型的发展，而不会与底层的实现细节紧密相连。

若要开始使用 ASP.NET Core MVC，请参阅开始使用 ASP.NET Core MVC。有关 ASP.NET Core MVC 的体系结构和优势的概述，请参阅 ASP.NET Core MVC 概述。

四、单页应用程序 (SPA) 📑

使用热门的 JavaScript 框架（如 Angular、React 和 Vue）生成适用于 ASP.NET Core 应用的客户端逻辑。 ASP.NET Core 为 Angular、React 和 Vue 提供了项目模板，也可以用于其他 JavaScript 框架。

在前面列出的客户端呈现的优点基础上，将 ASP.NET Core SPA 与 JavaScript 框架结合使用也有🔖一些优点：

JavaScript 运行时环境已随浏览器提供。
大型社区和成熟的生态系统。
使用热门的 JS 框架（如 Angular、React 和 Vue）构建适用于 ASP.NET Core 应用的客户端逻辑。

🚫缺点：

需要更多编码语言、框架和工具。
难以共享代码，因此一些逻辑可能会重复。

如要入门，请参阅：

使用 Angular 创建 ASP.NET Core 应用
使用 React 创建 ASP.NET Core 应用
使用 Vue 创建 ASP.NET Core 应用
Visual Studio 中的 JavaScript 和 TypeScript

五、组合多个 Web UI 解决方案⚖️

MVC 、 Razor Pages 和 Blazor 都是 ASP.NET Core 框架的一部分，设计为可以结合使用。 Razor 组件可以集成到Razor Pages 和 MVC 应用。呈现视图或页面时，可以同时预呈现组件。

在 MVC 或 Razor Pages 的优点基础上，MVC 或 Razor Pages 与 Blazor 结合使用的优点如下：

预呈现会在服务器上执行 Razor 组件，并将其呈现到视图或页面中，从而提高应用的感知加载时间。
使用组件标记帮助程序将交互性添加到现有视图或页面。

若要开始使用 ASP.NET Core MVC 或 Razor Pages， Blazor请参阅将 ASP.NET Core Razor 组件与 MVC 或 Razor Pages 集成。

六、定位和性能分析 🆚

在性能方面， Blazor Web 和 Razor Pages 各有千秋。Blazor Web 最初加载时，可能会有些“慢热”，因为它需要把整个应用和 .NET 运行时下载到浏览器中。然而，一旦进入状态， Razor Pages 的表现就是一气呵成——所有交互都在客户端完成，没有频繁的服务器往返，因此体验上会更流畅。

Razor Pages 则在初次登场时表现迅速——所有内容都由服务器提前渲染好，直接送到浏览器。这意味着初次加载很快，但是在后续的交互中，每次请求都要与服务器“见面”，所以用户体验可能稍显迟滞。