Blazor WebAssembly 可以合并到 .NET Framework 4.8 MVC 站点中吗？

Question

我已经使用 .NET Core 5 Mvc 应用程序成功完成了这项工作，从 razor pages 站点提供了单独的 Blazor WebAssembly SPA。我正在使用标签助手并手动引用 _framework/blazor.webassembly.js 文件。它很好地保持了 razor 页面布局，并在 razor pages 站点内无缝提供 SPA，并且是完全交互式的。

因为 webassembly 完全在浏览器中运行，我很好奇是否有办法使用 .NET Framework 4.8 MVC 应用程序来做同样的事情。我认为 MVC 应用程序需要提供的只是访问 _framework/*.j​​s 文件来启动 Blazor 应用程序。

Blazor 项目的目标是 .NET Standard 2.1，所以我真的不明白为什么它不可能。 .NET Framework 4.8 只需要 RenderComponentAsync 的等价物。这存在吗？

Answer 1

绝对有可能，这里有两种选择。

您可以提供 Blazor WASM 在发布时生成的整个 index.html，因为 Blazor WASM 只是静态文件。这样做的缺点是 Blazor 必须像典型的 SPA 项目一样接管整个站点。不是人们可能喜欢的增量方法。

另一种更接近您想要的方法是通过 .Net 6 的新 Blazor 功能。即instantiating Blazor components from Javascript。有了这个和一些 Javascript，您可以在 .Net Framework MVC 上渲染 Blazor WASM 组件，甚至可以使用参数。

使用比较复杂，因为它是一个用于在其之上构建功能的低级 api。

// Program.cs
builder.RootComponents.RegisterForJavaScript<Counter>(identifier: "blazor-counter");

// On your cshtml
<blazor-counter data-initial-count="@Model.InitialCount" />

// JS script to instantiate it
let containerElement = document.getElementsByTagName('blazor-counter')[0];
await Blazor.rootComponents.add(containerElement, 'blazor-counter', { initialCount: $(containerElement).data("initial-count") });

如果您不介意试用预览包，Blazor 团队有 an experimental package 基于该功能的构建，以支持将其封装到标准 HTML Web 组件中。

然后使用就这么简单了。

// Program.cs
builder.RootComponents.RegisterAsCustomElement<Counter>("blazor-counter");

// On your cshtml
<blazor-counter initial-count="@Model.InitialCount" />

唯一不支持的是预渲染。因为这需要一个 Aspnet Core 服务器作为主机。