如何在 Web 表单中嵌入和使用 Blazor WebAssembly？

Question

有一个 Web 表单应用程序，我希望通过将 Blazor 嵌入到 Web 表单页面中（就像使用 Angular 一样），逐页地将其逐渐移植到 Blazor WebAssembly。

将 Blazor 应用程序发布到 Web Forms 项目中名为“Blazor”的子目录下。如果我运行 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 时，页面显示：正在加载...发生了未处理的错误。重新加载

并在控制台中显示以下错误消息： Uncaught SyntaxError: Unexpected token '<' blazor.webassemble.js:1

这种方法确实适用于 Angular。我在尝试使用 Blazor WebAssembly 执行此操作时缺少什么？

更新： 根据 Magoo 先生的说法，它不是下载 blazor.web assembly.js，而是实际下载解释错误消息的 index.html。

已将 Web 表单页面中的页面路径从 /Blazor/wwwroot/_framework/blazor.web assembly.js 更改为 /Blazor/_framework/blazor.web assembly.js，现在下载脚本但遇到新错误。blazor.boot.json 出现 404 Not Found。

Blazor.web assembly.js 不知道基本 href 应该是 /Blazor/ 并尝试从 localhost:1234/_framework/blazor.boot.json 而不是 localhost:1234/Blazor/_framework/blazor 获取 blazor.boot.json。 boot.json。

那么下一期：如何告诉 blazor.web assembly.js 它的基本 href 应该是“/”以外的东西（在我的例子中是“/Blazor/”）？

Answer 1

进行了概念验证：

1. 生成默认的 Blazor WebAssembly 项目。
2. 构建项目并将输出 _framework 目录及其内容复制到 Web Forms 项目中。
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 Forms 项目并转到 http://localhost:1234/Counter，Web Form Counter 页面将显示嵌入的 Blazor Counter 页面。