Blazor WebAssembly 能否合并到 .NET Framework 4.8 MVC 站点中?
Can Blazor WebAssembly be incorporated into a .NET Framework 4.8 MVC site?
我已经使用 .NET Core 5 Mvc 应用程序成功完成了这项工作,从 razor 页面站点提供了一个单独的 Blazor WebAssembly SPA。我正在使用标签助手并手动引用 _framework/blazor.webassembly.js 文件。它很好地保持了 razor 页面布局并在 razor 页面网站内无缝提供 SPA,并且是完全交互的。
因为 webassembly 运行 完全在浏览器中,我很好奇是否有办法对 .NET Framework 4.8 MVC 应用程序执行相同的操作。我认为所有 MVC 应用程序需要提供的是访问 _framework/*.js 文件以启动 Blazor 应用程序。
Blazor 项目以 .NET Standard 2.1 为目标,所以我真的不明白为什么它不可能。 .NET Framework 4.8 只需要 RenderComponentAsync 的等效项。这个存在吗?
绝对有可能,这里有两种选择。
您可以在发布时为 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 服务器作为主机。
我已经使用 .NET Core 5 Mvc 应用程序成功完成了这项工作,从 razor 页面站点提供了一个单独的 Blazor WebAssembly SPA。我正在使用标签助手并手动引用 _framework/blazor.webassembly.js 文件。它很好地保持了 razor 页面布局并在 razor 页面网站内无缝提供 SPA,并且是完全交互的。
因为 webassembly 运行 完全在浏览器中,我很好奇是否有办法对 .NET Framework 4.8 MVC 应用程序执行相同的操作。我认为所有 MVC 应用程序需要提供的是访问 _framework/*.js 文件以启动 Blazor 应用程序。
Blazor 项目以 .NET Standard 2.1 为目标,所以我真的不明白为什么它不可能。 .NET Framework 4.8 只需要 RenderComponentAsync 的等效项。这个存在吗?
绝对有可能,这里有两种选择。
您可以在发布时为 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 服务器作为主机。