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

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

使用 razor 和 blazor 在架构上有什么区别?

文档建议我在使用 blazor 时必须编写 Web Api - 是否仍然可以像在传统剃须刀中那样传递模型对象?

0 个带有视觉解释的视频

我决定制作一个视频,因为有几个关于 Blazor 的问题被问到(也在其他论坛上),而且这种格式对我来说似乎更好地可视化差异 - 而不是重复我的(更长的)解释。与我的第一个 post(文本 post 也已更新)相比,该视频包含了一些改进的版本。这是我的第一个这种格式的视频,因此欢迎任何反馈。如果您更喜欢阅读没有太多可视化的经典文本,您将在以下部分中找到它的内容。当然没有demo,我做的demo是为了减轻内容,但是基本的信息内容是一样的。

1。什么是传统的多页站点或应用程序

首先,您需要对传统 websites/apps 的工作原理有一个基本的了解:对于每个 call/request,您向服务器发送一个请求,服务器以 [​​=94=]complete HTML 整个页面。这可以像使用 ASP.NET 核心 MVC 和 Razor 模板或 Razor 页面或什至一些其他技术如 PHP、Java、Python 等动态生成。假设您有一个显示预览的文章列表。

为了说明这一点,假设您有一个显示预览的文章列表(例如博客 posts)。当用户点击 read all 时,在传统的 web 应用程序中通常有两种方式来实现这一点:

  1. 加载类似 /view-article?id=123 的页面再次发生上述情况:加载文章页面的整个 HTML DOM
  2. 使用Java脚本进行Ajax-Request,从API如/api/get-article?id=123加载所需内容并操作DOM 显示在需要的位置

如果没有 Java脚本,传统网站将无法交互。这意味着:页面加载和呈现后,不再发生任何事情——除了用户通过单击 link 加载另一个页面(包含整个 DOM)——因此,它被称为“multi” -page“申请.

您可能会更喜欢第二种方法,因为它速度更快并节省资源:您无需再次呈现整个页面(其中只有一部分发生了变化),而是停留在该页面上并加载新信息你需要(本例中的文章内容)。尤其是在需要加载和呈现许多资源的大型页面上,Java脚本方法对用户来说感觉要快得多。

如果您希望传统页面具有交互性,您需要Java脚本。例如,您可以添加一个 ajax 对某些 API 的调用,当用户单击按钮时显示一些数据, 不必重新加载整个页面。

简而言之,大部分工作都发生在服务器端。

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

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

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

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

简而言之,大部分工作都发生在用户浏览器的客户端。服务器只提供静态内容(html、js、css)并提供 APIs,例如从数据库中获取条目或保存它们。

3。 Blazor 与此有​​什么关系?

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

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

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

3.1 Blazor WebAssemblyBlazor 服务器

现在您了解了基础知识,您需要在两种口味之间做出决定:

Blazor WebAssembly

顾名思义,基本都是用WebAssembly to run your C# browser directly in the browser. It requires a relatively recent Browser and is not yet supported on all platforms/browsers. Also major engines like Chromium or Safari doesn't support all standardized features yet.

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

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

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

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

不知道 WebAssembly?它是一种相对较新的开放标准,可生成字节码以缩短加载和执行时间,从而实现更强大的 Web 应用程序——与语言无关。您不会被迫使用特定语言,例如 JavaScript:由于生成了字节码,因此也可以使用其他语言,例如 C++ 或 Rust。

简而言之,WebAssembly 可以被视为下一代 Java功能丰富的 Web 应用程序的脚本,其中 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 Server,并且只有在您计划部署非常大的应用程序时才真正担心这一点。

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

但这样的话,你可以稍后再迁移!

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

更多信息

我推荐 Introduction to ASP.NET Core Blazor in the official documentation. Also the other chapter describing a lot of information about the platform and offers tutorials. They go deepter in detail to topics like data binding or event-handling 仅举几例,并举例说明。为了基本概述,我尽量在此处缩短它。

另请参阅:Blazor WebAssembly 3.2.0 and ASP.NET Core 5