开发者问题收集

Blazor WebAssembly 可以合并到 .NET Framework 4.8 MVC 网站吗?

2020-11-18
2463

我已使用 .NET Core 5 Mvc 应用成功完成此操作,从 Razor 页面站点提供单独的 Blazor WebAssembly SPA。我正在使用标签助手并手动引用 _framework/blazor.webassembly.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 的功能。这存在吗?

1个回答

这绝对是可能的,这里有两种选择。

当您发布 Blazor WASM 时,您可以提供 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 服务器作为主机。

Ryouko Konpaku
2021-11-23