将客户端 Blazor 添加到现有 ASP.NET MVC5 应用答案

【问题标题】：Add client side Blazor to existing ASP.NET MVC5 app将客户端 Blazor 添加到现有 ASP.NET MVC5 应用
【发布时间】：2020-03-09 06:15:26
【问题描述】：

有一个现有的 ASP.NET MVC5 应用程序无法一次全部重写，我们如何开始合并（客户端）Blazor 来替换该应用程序的某些部分？

编辑：我们需要有一部分是 MVC5 而其他部分是 Blazor 的页面，这样可以无缝地为最终用户工作。

就我目前所发现的而言，最好的（也是唯一的？）选项是将 Blazor 托管在不同的站点中，并将其作为 iframe 包含在原始站点中，使用 JavaScript 互操作在两个站点之间传递数据。

我没有找到任何示例，如果您知道任何或有其他可能可行的想法，请告诉我！

【问题讨论】：

标签： asp.net asp.net-mvc asp.net-mvc-5 blazor

【解决方案1】：

iFrame 看起来很笨重，但据我所知，MVC 5 应用程序无法引用和使用 Blazor WASM 应用程序。

难道您不能只设置第三个代理 MVC 应用程序来管理两个应用程序之间的路由和状态吗？您可以将当前 MVC 应用程序中的业务逻辑抽象为两个项目可以共享的 .Net 标准库。

如果他们都使用相同的后端 API，您不需要做太多就可以开始传输。将所有内容移至新的 Blazor 客户端应用程序后，您可以终止 MVC 应用程序和代理。

这类似于实现 Strangler 模式以从单一 Web api 转移到微服务。

【讨论】：

为什么 MVC5 需要引用 Blazor 应用程序？ Blazor 应用程序将在客户端运行，就像任何 Angular/React/Vue/VanillaJS 应用程序一样。服务器端无关紧要。
我不是提出原始问题的人。
是的，梅森，你说得对，服务器端无关紧要，但我的观点是，能够引用 WebAssembly 将是一个很好的特性——有点像能够引用Razor Class，但这是不可能的。
第三个代理 MVC 应用程序听起来很有趣，你有什么例子或文章可以让我在实现它方面占得先机吗？我已经编辑了我的问题，以指定我需要一个包含原始 MVC5 应用程序和 Blazor 的部分的页面。
通过您的编辑，我认为您别无选择，只能使用 iFrame。只有当您可以创建一个 MVC 应用程序来将路由传递到托管在不同服务器上的两个应用程序时，该代理才真正起作用。您将拥有旧应用程序，然后是 blazor 应用程序，但代理将管理路由。但是由于您需要混合页面组件，所以 iFrame 可能是要走的路。

【解决方案2】：

只是想用我们现在找到的令人满意的解决方案来更新这个问题。我们开发了一种将 Blazor 与任何其他客户端技术相结合的方式的工作概念验证。它为 Blazor 应用程序和 JavaScript PostMessage API 使用单独的 IFrame 以避免安全问题（同源）。它实际上运行良好，并且是用 Blazor 编写的部分替换旧 MVC5 应用程序的一部分的好方法。希望很快我会在一篇博文中快速写下它。

【讨论】：

那篇博文在哪里？
@IanKemp，没时间 :( 但希望答案中给出的提示能让人们开始。最重要的部分是 PostMessage javascript API，在主窗口和主窗口中都有一点点 JS iframe 中的 Blazor 应用程序。我们现在在生产中运行它，到目前为止唯一的问题是（非常）旧的浏览器和对于连接速度较慢的人来说 Blazor 应用程序的初始加载时间很长。为了缓解这个问题，可以如果 Blazor iframe 的页面不是用户将访问的第一页，则开始在第一页上的隐藏 iframe 中下载 Blazor 位
真的很想了解更多关于您的解决方案的信息。我们在我工作的地方遇到了完全相同的问题。