可以将Blazor整合到.NET Framework4.8MVC站点中吗？

Question

我已经用BlazorCore5MVC应用程序成功地做到了这一点，它提供了一个独立于剃刀页面站点的.NET WebAssembly SPA。我使用tag helper并手动引用_framework/blazor.webAssembly y.js文件。它很好地保持了剃刀页面的布局，在剃刀页面站点内无缝地提供了SPA，并且是完全交互的。

因为webassembly完全在浏览器中运行，所以我很好奇是否有一种方法可以在.NET Framework4.8MVC应用程序中做同样的事情。我认为MVC应用程序所需要提供的就是访问_framework/*.js文件来启动Blazor应用程序。

Blazor项目的目标是.NET标准2.1，所以我并不认为这是不可能的。.NET Framework4.8只需要RenderComponentAsync的等价物。这真的存在吗？

Answer 1

这绝对是可能的，你有两个选择。

当您发布为Blazor WASM时，您可以使用Blazor WASM生成的整个index.html作为静态文件。这样做的缺点是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服务器作为主机。