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

Question

我已经使用 .NET Core 5 Mvc 应用程序成功完成了此任务，从 Razor 页面站点提供了单独的 Blazor WebAssembly SPA。我正在使用标签助手并手动引用 _framework/blazor.web assembly.js 文件。它很好地保持了 razor 页面布局，并在 razor 页面网站内无缝地提供 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 功能。这是从 Javascript 实例化 Blazor 组件。通过这个和一些 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 团队有一个实验性包，该包基于该功能构建，支持将其封装到标准 HTML Web 组件中。

那么使用就变得如此简单。

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

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

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