Asp.net core blazor 与 .net core mvc with razor

2024-01-08

使用 razor 与 blazor 之间的架构差异是什么？

文档建议我在使用 blazor 时必须编写一个 Web Api - 是否仍然可以像传统 razor 一样传递模型对象？

0 带有视觉解释的视频

我决定制作一个视频，因为有人问了有关 Blazor 的几个问题（也在其他论坛上），这种格式似乎更适合我可视化差异 - 而不是重复我的（较长）解释。与我的第一篇文章相比，该视频包含一些改进的版本（文本文章也更新了），这是我采用这种格式的第一个视频，因此欢迎任何反馈。如果您喜欢阅读没有太多可视化内容的经典文本，您可以在以下部分中找到其内容。当然，没有演示，这是我为了简化内容而制作的，但基本信息内容是相同的。

1.什么是传统多页面网站或应用程序?

首先，您需要对传统网站/应用程序的工作原理有一个基本的了解：对于每个调用/请求，您向服务器发送请求，服务器以complete整个页面的 HTML。这可以动态生成，例如使用 ASP.NET Core MVC 和 Razor 模板或 Razor 页面，甚至使用 PHP、Java、Python 等其他技术。假设您有一个显示预览的文章列表。

为了说明这一点，假设您有一个显示预览的文章列表（例如博客文章）。当用户点击read all，在传统的 Web 应用程序中，您通常有两种方法来实现这一点：

加载像 /view-article?id=123 这样的页面，上面的情况再次发生：加载文章页面的整个 HTML DOM
使用 JavaScript 发出 Ajax 请求，从 /api/get-article?id=123 等 API 加载所需内容并操作 DOM 将其显示在所需位置

如果没有 JavaScript，传统网站就无法交互。这意味着：页面加载和渲染后，不会再发生任何事情 - 除了用户通过单击链接加载另一个页面（包含整个 DOM） - 因此，它被称为“多页面”应用程序。

您可能会更喜欢第二种方法，因为它更快并且节省资源：您不必再次渲染整个页面（仅更改了一部分），而是停留在该页面上并仅加载您需要的新信息（文章本例中的内容）。特别是在需要加载和呈现许多资源的大页面上，JavaScript 方法对用户来说感觉更快。

如果您希望传统页面具有交互性，则需要 JavaScript。例如，您可以向某些 API 添加 ajax 调用，以便在用户单击按钮时显示一些数据，without必须重新加载整个页面。

简而言之，我们可以说，大部分工作都发生在服务器端。

2. 区别在哪里单页应用程序 (SPA)?

SPA 只有一个page，就完整呈现的 html 页面而言。如果您通过单击文章之类的方式导航到那里，它们会加载 JavaScript 应用程序。它处理那里的所有交互。如果用户点击一篇文章，则不会从服务器获取完整的 HTML 文档！相反，它只获取更改的部分，在本例中为文章。其他所有内容（例如导航栏、页脚、小部件等）都将保留在多页面应用程序中，如果不使用 js/ajax，则可能会重新加载。

您通常会在那里使用模块化组件和双向数据绑定。这意味着，变量链接到某个 HTML 元素。当变量更改时，元素会自动显示新值。在传统应用程序中，您必须手动创建事件处理程序来处理此问题。它可以被视为使用普通 JavaScript 继续开发单页应用程序，其中您需要更多的手动工作来归档数据绑定等内容。

对于用户来说，SPA 通常比在多页面应用程序上浏览页面要快得多。

简而言之，我们可以说，大部分工作都发生在用户浏览器的客户端。服务器仅提供静态内容（html、js、css）并提供 API，例如从数据库中获取条目或保存它们。

3. Blazor 与此有何关系？

实际上是 Blazor 应用程序is水疗中心。但与其他框架的主要区别在于，Blazor 允许您使用 C# 代码控制客户端和服务器端。为了展示这一优势，让我们看看其他 SPA 框架，例如 Angular：您可以使用 ASP.NET Core 构建 Angular SPA。在这种情况下，您可以使用 TypeScript 在 Angular 中编写客户端。如果需要访问数据，它会向 ASP.NET Core 服务器进行 API 调用，该服务器是 C# 的。它与 React 等其他框架类似，但这里使用 JavaScript 而不是 TypeScript。

这使得在两者之间共享代码变得困难：如果您有一个文章模型，则需要在服务器上用 C# 定义它，并在客户端上用 TypeScript 定义它。使用 Blazor，您只需在 C# 中定义一次，然后在两个站点上重复使用它。换句话说：您只需编写 C# 即可，无需关心 JavaScript*

*这就是 Blazor 背后的基本思想：到处使用 C#，而不需要 JavaScript 作为第二技术。但值得一提的是，您需要使用 Blazor 组件来完成此任务。如果您需要一些尚未移植到 Blazor 的库，您仍然需要处理一些 JS。然而，仍然有数据绑定等好处。在整个普通 JS 堆栈上使用它会需要一些工作，因此我建议从提供 Blazor 组件的 UI 库开始。

3.1 Blazor WebAssembly and Blazor服务器

现在您已经了解了基础知识，并且需要在两种口味之间做出决定：

Blazor WebAssembly

顾名思义，它基本上使用网络组装 https://webassembly.org/直接在浏览器中运行 C# 浏览器。它需要一个相对较新的浏览器，尚未在所有平台/浏览器上受支持 https://caniuse.com/wasm。还有 Chromium 或 Safari 等主要引擎尚不支持所有标准化功能 https://webassembly.org/roadmap/.

假设您有一个使用 C# 代码作为处理程序的按钮，如下所示：

 <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

IncrementCount是一个 C# 方法。代码被传输到客户端并在浏览器中执行。将其想象为浏览器内的 .NET Core 运行时，就像 Silverlight 但没有任何外部插件。服务器端甚至不需要 ASP.NET Core！只要您不需要服务器端的数据库之类的东西，它就可以从任何网络服务器提供服务。这使得应用程序更大（并且更慢，至少在第一次加载时）。

示例 Visual Studio 模板的大小超过 17 MB！通过压缩，可以减少到 7 MB——对于 hello world 应用程序来说仍然很大。通过在发布模式下发布应用程序，使用 gzip 可以减少到大约 7 MB 和 2.4 MB。至少后续请求速度更快。这些 DLL 文件存储在浏览器缓存中，从而避免进一步的请求。但可以离线使用（至少主要逻辑没有API调用）。因此，它有时被称为真正的 SPA——它可以与 Angular、React 和其他客户端框架相媲美。由于 WebAssembly-Usage，调试可能会更加困难，目前它仅支持基于 Chromium 的浏览器。

不了解 WebAssembly？它是一个相对较新的开放标准，可生成字节码以改善加载和执行时间，从而实现更强大的 Web 应用程序 - 独立于语言。您不必被迫使用 JavaScript 等特定语言：由于生成了字节码，因此也可以使用 C++ 或 Rust 等其他语言。

简而言之，WebAssembly 可以被视为功能丰富的 Web 应用程序的下一代 JavaScript，其中 Blazor WebAssembly 是 C# 实现。由于浏览器运行时的原因，有些 API 在这里无法使用。例如套接字或 I/O 访问，如 File.Open 或 File.Write。

Blazor服务器

该应用程序在服务器上运行，仅使用 SignalR Websockets 将输出（例如单击事件的结果，这会增加另一个 HTML 元素中的一些计数器）传输到浏览器。这使得应用程序更小、更快，但需要服务器端更多资源，因为您有 SignalR 连接，并且它也是服务器上的虚拟 DOM - 使得在大型设置中扩展变得更加困难。

另一方面，这降低了对客户端的要求：它们不需要支持 WASM，因此它可以在较旧的浏览器或 WASM 支持受限的浏览器以及低端设备上运行。但由于每个操作都以 SignalR 调用结束，因此应用程序将无法离线工作 - 如果这是必需的，请选择 Blazor WebAssembly 而不是 Blazor Server。

选择什么？

正如上面指出的，这取决于您的需求。例如，如果您需要离线支持，Blazor 服务器就不是一个好的选择。如果你不确定我会更喜欢Blazor服务器只有当您计划部署非常大的应用程序时才真正担心这一点。

恕我直言，Blazor 服务器目前更流畅、更灵活。 Blazor Server 在 WebAssembly 之前也变得稳定。当 WebAssembly 进一步发展并得到更广泛的支持时，这一建议可能会在未来发生变化。

但在这种情况下，您可以稍后迁移！

Blazor WebAssembly 和 Server 都使用 Razor 组件。这意味着：您可以在两者之间进行更改，而无需重新编写整个代码。从 Blazor Server 迁移到 Blazor WebAssembly 时，仅需要执行一些迁移工作，例如浏览器外部的数据调用。原因是，Blazor WASM 完全在浏览器中运行，因此您需要像 ASP.NET Core API 项目这样的服务器部分来处理它们。