将客户端Blazor添加到现有的ASP.NET MVC5应用程序

3

编辑2022-08-18:我自己没有测试过,但现在可以通过利用Web组件来实现。 我们可以在常规非Blazor HTML页面中使用Web组件消耗Blazor组件吗?(顺便推荐整个视频,非常棒!)

如果有一个现有的ASP.NET MVC5应用程序,并且不可行一次性重写所有部分,如何开始将(客户端)Blazor集成到该应用程序的某些部分以替换它们?

编辑:我们需要页面的部分是MVC5,另一部分是Blazor,这样对最终用户来说会很流畅。

从我所发现的内容中,最好(唯一?)的选择是在不同的站点上托管Blazor,并使用JavaScript互操作在原始站点中将其作为iframe包含以在两个站点之间通信数据。

我没有找到任何示例,请让我知道您是否知道任何示例或其他可能有效的想法!

2个回答

3

我想更新一下这个问题,我们已经找到了一个令人满意的解决方案。我们开发了一个工作原型来将Blazor和任何其他客户端技术相结合。它使用单独的IFrame用于Blazor应用程序,并使用JavaScript PostMessage API以避免安全问题(同源)。它实际上运行得非常好,是一种很好的方式,可以用Blazor编写的部分替换旧的MVC5应用程序中的部分。我希望很快可以在博客文章中对其进行简要介绍。


1
那篇博客文章在哪里? - Ian Kemp
@IanKemp,没时间了:( 但是希望答案中给出的提示能让人们开始。最重要的部分是PostMessage javascript API,需要在主窗口和Blazor应用程序中的iframe中使用少量JS。我们现在已经在生产环境中运行了这个应用程序,到目前为止唯一的问题是(非常)老的浏览器和对于慢速连接的用户来说Blazor应用程序的长时间初始加载时间。为了缓解这个问题,可以在第一页上隐藏一个iframe并开始下载Blazor位。如果Blazor iframe所在的页面不是用户将访问的第一页,则会出现问题。 - Trygve
非常希望了解更多关于您的解决方案的信息。我们在我工作的地方也有完全相同的问题。 - user1784297

0

iFrame 看起来有些笨重,但据我所知,MVC 5 应用程序没有办法引用和使用 Blazor WASM 应用程序。

你是否可以设置第三个代理 MVC 应用程序来管理两个应用程序之间的路由和状态呢?你可以将业务逻辑从当前的 MVC 应用程序抽象出来,放入一个 .Net Standard 库中,这两个项目都可以共享。

如果两个应用程序都使用同一个后端 API,那么您就不需要做太多工作即可开始转移。一旦所有内容都转移到新的 Blazor 客户端应用程序中,您就可以关闭 MVC 应用程序和代理。

这与实现 Strangler 模式以从单片Web API迁移到微服务类似。


为什么MVC5需要引用Blazor应用程序呢?Blazor应用程序将在客户端运行,就像任何Angular/React/Vue/VanillaJS应用程序一样。服务器端是无关紧要的。 - mason
我不是提出原问题的人。 - mason
是的,Mason,你说得对,服务器端是无关紧要的,但我的观点是能够引用WebAssembly将是一个不错的功能 - 有点像能够引用Razor类,但这是不可能的。 - Shawn Deggans
第三个代理MVC应用听起来很有趣,你有没有任何示例或文章可以给我一个头开始实现它?我已经编辑了我的问题,以指定我将需要一个页面由原始MVC5应用程序和Blazor的部分组成。 - Trygve
1
通过您的编辑,我认为您别无选择,只能使用iFrames。代理只有在您可以创建一个MVC应用程序并将路由交给托管在不同服务器上的两个应用程序时才能正常工作。您将拥有您的旧应用程序和Blazor应用程序,但代理将管理路由。但是,由于您需要混合页面组件,因此使用iFrame可能是最好的选择。 - Shawn Deggans

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接