如何在Web中嵌入和使用WebAssembly？
有一个网页表单应用程序，我想要逐步移植，在一个页面的基础上，通过嵌入布拉兹尔到网页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页面显示:加载..。发生了未处理的错误。重新加载
在控制台中，以下错误消息: Uncaught :意外令牌“<”blazor.webassembly.js:1
这种方法确实适用于角度。我在试图用WebAssembly做这件事时，错过了什么呢？
更新:根据Mister，它不是在下载blazor.webassembly.js，而是实际下载了解释错误消息的index.html。
将网页中的路径从/Blazor/wwwroot/_framework/blazor.webassembly.js更改为Web页面中的/Blazor/_framework/blzor.weembembly.js，现在下载脚本，但会遇到新的错误。给出blazor.boot.json找不到的404。
localhost:1234/Blazor/_framework/blazor.boot.json. Blazor.webassembly.js不知道基本的href应该是/Blazor/，并且尝试从localhost:1234/_framework/blzor.boot.json而不是Blazor.webassembly.js获取blazor.boot.json。
那么下一个问题:如何告诉blazor.webassembly.js它的基本href应该是'/‘以外的东西(在我的例子中是'/Blazor/')？
回答 2
Stack Overflow用户
发布于 2020-12-31 23:24:03
有一个概念证明有效：
- 生成默认的WebAssembly项目。
- 构建了该项目，并将输出_framework目录及其内容复制到Web项目中。
- 将以下内容从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>- 将Counter.aspx网页的内容编辑为：
<%@ 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>- 编辑了Blazor MainLayout.razor：
@inherits LayoutComponentBase
<div>
@Body
</div>- 运行Web项目并转到http://localhost:1234/Counter，而Web计数器页将生成嵌入.
的Blazor计数器页。
Stack Overflow用户
发布于 2021-01-02 13:42:38
如果你想要比一个网页中的一个blazor页面更复杂的东西，我建议您使用iframe在您的web窗体应用程序中托管blazor应用程序。这将使它们独立，并且您不会冒两次获取资产的风险，并且/或在webforms页面上获得无效的HTML和/或DOM操作来伤害blazor应用程序。
通常，您还应该记住，WebForms不运行在.NET Core (或.NET 5及更高版本)上，而Blazor只在.NET Core 3或.NET 5(或更高版本)上运行，因此这种混合技术可能会影响您以后的工作。
如果你想一页一页地移动，而你没有别的东西，只有在你能确保正确的路径和基本路径(如果你在你的webforms应用程序中有文件夹时，上面的PoC应该就能解决这个问题)。此外，对客户端来说，激活wasm应用程序的速度很慢，因此您可能需要考虑服务器端的blazor页面(这肯定需要一个iframe )。
编辑:你可能会发现这本MS为WebForms -> Blazor https://learn.microsoft.com/en-us/dotnet/architecture/blazor-for-web-forms-developers/制作的书很有用
https://stackoverflow.com/questions/65514638
复制相似问题
腾讯云开发者
