c# - 将 Blazor WASM 作为 Blazor 服务器端运行

Question

NOTE: This is a "Share your knowledge - Q&A style" post. I probably got a downvote because someone misinterpreted the context of this post :(

问题
Blazor WASM 可以很容易地比 Blazor 服务器端更受青睐，而且在开发方面没有缺点。目前，Blazor WASM 不支持功能齐全的调试体验，并且启动速度非常慢。与 Blazor 服务器端相比，这会大大减慢开发速度。虽然老实说，我个人认为调试体验比缓慢启动更能减慢开发速度。
建议的解决方案

NOTE: I included the "proposed" word in there because I'm not sure about the downsides that this solution can cause, so feel free to comment on my answer below.

解决方案是简单地创建一个额外的 Blazor 服务器端项目，然后将 Blazor WASM 项目引用到 Blazor 服务器端项目。之后，对 Startup 添加一些调整和 _Host.cshtml以正确使用 Blazor WASM razor 文件和 wwwroot 文件。有关此解决方案的分步说明，请参阅下面我提出的答案。
简单来说，此解决方案只是添加和配置 Blazor 服务器端项目 没有 制作 任何更改 和 任何重要的代码重复 到 Blazor WASM 项目。

Answer 1

NOTE: In this example, I'm using Visual Studio 2019 16.7.2 and the version of the templates are currently at 3.1.8

创建 Blazor WASM 项目。 ASP.NET Core Hosted 或 Standalone 选项都可以正常工作，但稍后将讨论它们将具有不同的配置。其余选项不会有任何影响。在这个例子中，我将使用 ASP.NET Core 托管 稍后解释有关拥有 API Controller 的信息。之后还要创建 Blazor 服务器端项目。

到目前为止，您的项目结构应该类似于下面的第一个屏幕截图。
删除下面第二个屏幕截图中显示的 Blazor 服务器端项目中突出显示的项目。

将 Blazor WASM 项目引用到 Blazor 服务器端项目。

ASP.NET Core 托管 - 引用 BlazorWasm.Client & BlazorWasm.Server项目。

独立 - 按原样引用单个 Blazor WASM 项目。

转至 Startup Blazor 服务器端项目的类。在 ConfigureServices() ，删除 WeatherForecastService连同 BlazorServer.Data命名空间然后为 HttpClient 添加一个服务由 Blazor WASM 项目中的 razor 文件使用。

services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(sp.GetRequiredService<NavigationManager>().BaseUri) });

NOTE In production, I don't suggest creating an instance of the HttpClient. Use the IHttpClientFactory instead. Visit this article Use IHttpClientFactory to implement resilient HTTP requests.

对于 ASP.NET Core WASM 项目
在 Configure() ，映射 Controller 的端点。这将使用 X.Server 中的 Controller /BlazorWasm.Server项目。

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
    ...
});

转至 _Host.cshtml在 Blazor 服务器端项目的/Pages 文件夹中。更改 css/site.css 的引用至 css/app.css因为 Blazor WASM 项目的主 css 文件的文件名不同。

<link href="css/site.css" rel="stylesheet" /> <!-- Previous -->
<link href="css/app.css" rel="stylesheet" /> <!-- New -->

最后，更改 App在 type component 的属性标记并引用 App Blazor WASM 项目中的 razor 类文件。在本例中，App类位于 BlazorWasm.Client 中项目:

<component type="typeof(App)" render-mode="ServerPrerendered" /> <!-- Previous -->
<component type="typeof(BlazorWasm.Client.App)" render-mode="ServerPrerendered" /> <!-- New -->

就是这样!当你运行 Blazor 服务器端项目时，它应该在没有“正在加载...”文本的情况下加载。

没有对 Blazor WASM 项目进行任何更改，也没有进行重大的代码重复。

唯一需要更改的是引用和 launchSettings.json & appsettings.json .

至于Startup中的配置对于 Blazor 服务器端，您只需在 Blazor WASM 项目中创建扩展方法并在 Blazor 服务器端项目中使用它们。

NOTE: I honestly think this is ideally(?) only for debugging during development since the WASM razor files won't fully utilize the capability of a true Blazor Server-Side because it would still use HTTP Requests.

希望楼下多多指教! :DD