asp.net - 如何在 Web 窗体中嵌入和使用 Blazor WebAssembly？

Question

有一个 Web 窗体应用程序，我希望通过将 Blazor 嵌入到 Web 窗体页面中，以使用 Angular 可能的方式逐页地逐步移植到 Blazor WebAssembly。
将 Blazor 应用发布到名为“Blazor”的子目录下的 Web 窗体项目。如果我运行 Web 窗体应用程序并点击 http://localhost:1234/Blazor，则 Blazor 应用程序运行良好(在编辑 Blazor index.html => <base href="/Blazor/" /> 之后)。但是，当我尝试将 Blazor 嵌入 Web 表单页面时，它不起作用。 Web 表单页面 asp:content 包含 Blazor index.html 页面包含的内容:

<%@ Page Title="EmbedTest" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="EmbedTest.aspx.cs" Inherits="WebFormBlazor.EmbedTest" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a> 
    </div>

    <script src="/Blazor/wwwroot/_framework/blazor.webassembly.js"></script>
</asp:Content>

当我转到 http://localhost:1234/EmbedTest 时，页面显示:
正在加载...
发生了未处理的错误。重新加载🗙
并在控制台中出现以下错误消息:
未捕获的语法错误:意外标记“<”blazor.webassembly.js:1
这种方法确实适用于 Angular。尝试使用 Blazor WebAssembly 执行此操作时我缺少什么？
更新:
根据 Magoo 先生的说法，它不是下载 blazor.webassembly.js，而是实际下载了解释错误消息的 index.html。
将页面中的路径从/Blazor/wwwroot/_framework/blazor.webassembly.js 更改为 Web 窗体页面中的/Blazor/_framework/blazor.webassembly.js，现在下载脚本但遇到新错误。为 blazor.boot.json 提供 404 Not Found。
Blazor.webassembly.js 不知道基本 href 应该是/Blazor/并尝试从 localhost:1234/_framework/blazor.boot.json 而不是 localhost:1234/Blazor/_framework/blazor 获取 blazor.boot.json。启动文件。
那么下一个问题:如何告诉 blazor.webassembly.js 它的基本 href 应该不是“/”(在我的情况下是“/Blazor/”)？

Answer 1

如果您想要比一个网页表单页面中的一个 blazor 页面更复杂的内容，我建议您使用 iframe 在您的网页表单应用程序中托管 blazor 应用程序。这将使它们独立，并且您不会冒两次获取 Assets 的风险，和/或在 webforms 页面上获得无效的 HTML 和/或 DOM 操作以损害 blazor 应用程序。
通常，您还应该记住，WebForms 不能在 .NET Core(或 .NET 5 及更高版本)上运行，而 Blazor 仅在 .NET Core 3 或 .NET 5(或更高版本)上运行，因此这种技术组合可以咬你以后。
如果您想逐页移动并且除了 blazor 应用程序之外没有其他任何东西 - 只要您可以确保正确的路径和基本路径，上面的 PoC 应该可以解决(如果您的 webforms 应用程序中有文件夹，这可能会抛出关闭 Blazor 路由和路径)。此外，启动 wasm 应用程序对客户端来说很慢，因此您可能需要考虑使用服务器端 blazor 页面(这肯定需要 iframe)。
编辑:您可能会发现 MS 为 WebForms 制作的这本书很有用 -> Blazor 迁移 https://docs.microsoft.com/en-us/dotnet/architecture/blazor-for-web-forms-developers/