ASP.NET Core Hosted 和服务器端 Blazor 之间有什么区别，真的？

Question

我仍在努力理解ASP.NET Core Hosted和服务器端Blazor之间的区别。我知道同样的问题已经存在，但并不令人满意。事实上，我在任何地方都找不到令人满意的答案——答案或多或少是一样的。

如果托管选项使用服务器（IIS、Kestrel），那么为什么要使用服务器端？令人困惑......很遗憾官方文件也没有阐明......

更新

混淆源于我们有三个选项来创建 Blazor 应用程序。执行后dotnew new --list我得到：

1. dotnet new blazorserver （Blazor 服务器应用程序）

2. dotnet blazorwasm （Blazor WebAssembly 应用程序）

但是，还有第三种选择：

3. dotnet blazorwasm --hosted（或dotnet blazor --hosted）

创建应用程序时与 Visual Studio 中的复选框相同：

该文件说：

您可以通过选中 ASP.NET Core 托管复选框来配置应用程序以使用 ASP.NET Core 后端

但是没有提供任何解释这是什么意思......

Answer 1

重新回答你问题的这一部分：

但是，还有第三种选择：

3. dotnet blazorwasm --hosted（或dotnet blazor --hosted）

创建应用程序时与 Visual Studio 中的复选框相同：

该 文件 说：

您可以通过选中 ASP.NET Core 托管复选框来配置应用程序以使用 ASP.NET Core 后端

但是没有提供任何解释这是什么意思......

TL; 博士

“托管”用于您希望站点的后端和使用该后端的 Blazor 客户端都托管在同一网站上的情况。

详细

我同意，文档确实不是很清楚所有这些，但解释实际上比看起来更简单：

Blazor 应用程序必须“托管”在某个地方

首先要记住的是，Blazor WebAssembly“应用程序”不是一个独立的网站，它是一个嵌入网站的应用程序。在很多情况下，它的行为就像一个网站，因为它将被用作单页应用程序，但这绝不是必需的。

本质上，Blazor WebAssembly 应用程序是通过编译/发布 Blazor 项目创建的一系列文件和 JavaScript 文件。

然后需要将这些文件放在网站某处，并且 div 标签的名称和为您的网站生成的 Blazor JS 文件的组合处理将您的应用程序文件连接到浏览器的 WebAssembly 部分，以便它然后呈现在页。

这里的关键是“托管”您的 Blazor 应用程序的网站不必是 ASP.NET Core 网站。 它可以是任何站点，纯 HTML、Drupal 等等，它只需要显示在正确处理 WebAssembly 和 JavaScript 的浏览器上。

但是，如果您还在 ASP.NET Core 中编写站点的后端，则可以重用该站点

因此，您的 Blazor 项目不必托管在用 ASP.NET Core 编写的网站中，但它必须托管在某个地方（以便用户可以看到它）。

如果您还同时编写站点的后端，例如，如果您正在编写 API 或 SignalR 集线器以从 Blazor 客户端发送和接收数据，并且如果您正在编写该后端ASP.NET Core，然后您可以重用同一站点来托管您的 Blazor 客户端。

这种情况是“托管”选项的用途。

如果您使用上面屏幕截图中的模板创建项目，并勾选“托管”选项，您将看到创建的 [YourProjectName].Server 项目是启动项目，但 index.html 页面显示在你运行的那个项目来自 [YourProjectName].Client 项目。

这种方法意味着您的服务器上只运行一个站点（可能好也可能坏），也意味着您不会遇到任何 CORS 问题。

但是您根本不必拥有 ASP.NET Core 站点

如果您的 Blazor 站点是不从任何服务器读取/写入的独立站点，或者如果它只与 3rd 方 API 或在旧的 .NET Framework 上运行的现有 Web API 对话，那么您实际上并不需要 ASP .NET Core 站点。

在这种情况下，您不使用 'hosted' 选项。

相反，您可以简单地发布您的 Blazor 项目，然后从发布文件夹中获取文件并将它们托管在任何站点中。

Answer 2

更新

我知道你现在来自哪里。混淆源于这样一个事实，即您--hosted在使用客户端托管的 Blazor 时调用了一个选项。此选项意味着让 Blazor 包含 ASP.NET Core 运行时。

为什么是这个选项？因为您可以编写不需要任何类型的外部服务连接的离线应用程序（例如计算器应用程序），所以 ASP.NET Core 无关紧要。但是，您可能想要编写一个访问在线数据库、外部 API、进行验证等的在线应用程序。对于这些类型的应用程序，您将需要一个 ASP.NET Core 堆栈来支持您的应用程序。

检查此常见问题解答：https : //github.com/aspnet/Blazor/wiki/FAQ#q-can-i-use-blazor-with-aspnet-core-on-the-server

原答案

它们是两种托管模型：服务器托管和客户端托管。

区别在于应用程序是托管在服务器中还是客户端中。服务器托管意味着您的应用程序逻辑在服务器中运行（您可以将其视为类似于 Web 表单），您单击一个按钮，“Ajax”调用发送请求，服务器接收请求，并将更新后的页。但是，这里使用的是 SignalR 而不是 Ajax，后者是低级套接字通信（读取效率）。而不是更新整个页面，它只更新相关部分（因此它是一个单页面应用程序）。

另一方面，客户端托管意味着您的逻辑在浏览器中运行。把它想象成你的 C# 逻辑被转换成 JS，它被嵌入到页面中。所以逻辑在浏览器中运行。在您可能想阅读的 WebAssembly 引入之后，这是可能的。

假设您想创建一个计算器应用程序。您的服务器托管应用程序将需要与服务器通信以计算并获取每次计算的结果，而托管的客户端不需要，并在浏览器中计算结果。

您可能想知道，为什么我们有两种选择。原因是对 WebAssembly（客户端托管的应用程序所依赖的）的支持在许多浏览器中要么不完整，要么不存在，并且性能差异也很大。

https://caniuse.com/#feat=wasm

Answer 3

问题是关于 Visual Studio 中的“ASP.NET Core 托管”选项，同时使用 Blazor WebAssembly 应用程序创建新的 Blazor 项目。

选择此选项会为您搭建 3 个项目（如果未选择此选项，则为 1 个 WebAssembly 项目）

1. 服务器端 Blazor 项目
2. 客户端 Blazor 项目 (WebAssembly)
3. 服务器和客户端项目之间共享实体的共享项目。

使用此选项，您可以拥有

1. Blazor WebAssembly 仅适用于可以在浏览器中执行逻辑的项目部分。
2. 服务器托管选项，所有处理都在服务器上完成，只有 HTML 呈现在浏览器上。

部署后，所有这些项目都会转到同一位置。因此，如果您对服务器端和客户端选项都有要求，那就去做吧。

Answer 4

这是我的两分钱。

创建 Blazor WebAssembly 应用程序并选中 ASP.NET Core Hosted 复选框。

创建后，观察项目引用。

请注意，服务器项目引用客户端项目。我和其他人有同样的困惑，客户端调用服务器，并且它们是两个独立的 Visual Studio 项目。所以这个项目参考资料让我很困惑。

事实上，客户端项目由服务器项目托管并提供服务。当我们想要运行应用程序时，我们需要运行服务器项目而不是客户端项目。

因此，当您要运行解决方案（App）时，必须确保将服务器项目设置为启动项目，而不是同时将服务器和客户端设置为启动项目。由于我最初的误解，我设置了多个启动项目，认为客户端（例如React App）调用服务器（WebApi），并且它们都应该同时运行，以便客户端调用服务器。

以上是正确的，但以下是错误的。

如果你这样做，你会得到以下错误，这让我很伤心。

Microsoft Visual Studio - 发生一个或多个错误。无法启动调试适配器错误

最后，如果您想通过为不同类型的 Blazor 应用程序添加 docker 文件和 docker-compose 文件来实现 Docker 化，请查看此github 存储库。

特别是对于我们正在讨论的此类应用程序，请查看该存储库中的此文件夹和此文件夹。

Answer 5

我在阅读文档时也有同样的困惑。但它在Blazor webassembly部分进行了解释

dotnet blazorwasm -是一个独立的项目

dotnet blazorwasm --hosted（或 dotnet blazor --hosted）-是一个使用 ASP.NET Core 支持 API 的预计托管。

托管部署将 Blazor WebAssembly 应用程序从在 Web 服务器上运行的 ASP.NET Core 应用程序提供给浏览器。

客户端 Blazor WebAssembly 应用程序与服务器应用程序的任何其他静态 Web 资产一起发布到服务器应用程序的 /bin/Release/{TARGET FRAMEWORK}/publish/wwwroot 文件夹中。这两个应用程序部署在一起。需要能够托管 ASP.NET Core 应用程序的 Web 服务器。对于托管部署，Visual Studio 包括 Blazor WebAssembly 应用项目模板（使用 dotnet new 命令时的 blazorwasm 模板），并选择了托管选项（-ho|--hosted 使用 dotnet new 命令时）。

Answer 6

Blazor-WASM

该应用程序可以在首次加载后离线工作。举个例子，如果您使用 Blazor WASM 制作贷款计算器，您可以在第一次加载时将所有数据、业务逻辑和验证发送到客户端，例如贷款类型、贷款利率、最大还款期限等，因为逻辑也在在客户端，当您更改贷款类型或还款期限时，不需要一次又一次与服务器进行通信，因为客户端中的业务逻辑使用用户选择的数据 Blazor 可以呈现 UI 并显示结果。

Blazor 服务器

应用程序使用服务器呈现 UI，以便在贷款应用程序上，如果用户更改贷款类型 blazor 则使用 SignalR 将该用户更改值发送到服务器，并且服务器中具有获取结果的数据和逻辑，之后服务器呈现 UI 并发送使用 SignalR 将 UI 更改为客户端，并在客户端屏幕中重绘 UI。

Blazor-ASP.NET Core 托管

Visual Studio在核心托管模板中生成3个项目

• ClientProject - 这是一个 Blazor-WASM 应用程序
• ServerProject - 这是一个 .NET CORE API
• SharedClassProject - 这是一个类库，保存客户端和服务器之间的共享对象

正如第一个加载中的贷款示例一样，贷款类型和计算逻辑是在客户端加载的。

如果用户选择贷款类型，如果利率位于数据库中，则 Blazor 会创建对 API 应用程序的 http 调用，以根据所选贷款类型获取贷款利率。

然后用户根据客户端的计算逻辑输入还款期限。现在应用程序可以计算结果并渲染 UI 以显示结果。因此，使用此模型，您可以将一些数据或逻辑保留在服务器中，而将其他数据或逻辑保留在客户端。