如何在 Web 窗体中嵌入和使用 Blazor WebAssembly？

Question

有一个 Web 表单应用程序，我想通过将 Blazor 嵌入到 Web 表单页面中，逐页逐步移植到 Blazor WebAssembly，就像使用 Angular 一样。

将 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 时，页面显示： 正在加载... 发生了未处理的错误。重新加载？？？？

并在控制台中显示以下错误消息： 未捕获的 SyntaxError：意外令牌 '

这种方法确实适用于 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.boot.json /blazor.boot.json。

那么下一个问题：如何告诉 blazor.webassembly.js 它的基本 href 应该不是 '/'（在我的例子中是 '/Blazor/'）？

Answer 1

如果您想要的不仅仅是一个 Web 表单页面中的一个 Blazor 页面，我建议您使用 iframe 在您的 Web 表单应用程序中托管 Blazor 应用程序。这将使它们独立，并且您不会冒两次获取资产和/或在 Web 表单页面上获取无效 HTML 和/或 DOM 操作以损害 blazor 应用程序的风险。

通常，您还应该记住，WebForms 不能在 .NET Core（或 .NET 5 及更高版本）上运行，而 Blazor 只能在 .NET Core 3 或 .NET 5（或更高版本）上运行，因此这种混合技术可能会在以后咬你。

如果您想逐页移动并且除了 blazor 应用程序之外没有其他任何东西 - 只要您可以确保正确的路径和基本路径（如果您的 webforms 应用程序中有文件夹这可能会抛弃 blazor 路由和路径）。此外，客户端启动 wasm 应用程序的速度很慢，因此您可能需要考虑使用服务器端 blazor 页面（这肯定需要 iframe）。

编辑：您可能会发现 MS 为 WebForms 制作的这本书很有用 -> Blazor 迁移 https://docs.microsoft.com/en-us/dotnet/architecture/blazor-for-web-forms-developers/

Answer 2

得到了一个概念验证工作：

1. 生成了默认的 Blazor WebAssembly 项目。
2. 构建项目并将输出 _framework 目录及其内容复制到 Web 窗体项目中。
3. 将 Blazor web.config 中的以下内容添加到 Web 窗体 web.config：

  <system.webServer>
    <staticContent>
      <remove fileExtension=".dat" />
      <remove fileExtension=".dll" />
      <remove fileExtension=".json" />
      <remove fileExtension=".wasm" />
      <mimeMap fileExtension=".dll" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".dat" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".wasm" mimeType="application/wasm" />
    </staticContent>
    <httpCompression>
      <dynamicTypes>
        <add mimeType="application/octet-stream" enabled="true" />
        <add mimeType="application/wasm" enabled="true" />
      </dynamicTypes>
    </httpCompression>
  </system.webServer>

4. 将 Counter.aspx Web 表单页面的内容编辑为：

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

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

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

5. 将 Blazor MainLayout.razor 编辑为：

@inherits LayoutComponentBase
<div>
    @Body
</div>

6. 运行 Web 窗体项目并转到 http://localhost:1234/Counter，Web 窗体计数器页面会出现嵌入的 Blazor 计数器页面。