Question

“标准”Blazor WASM 应用程序托管在静态 HTML 页面内；例如，index.html。由于某些要求，我想在 Razor 页面应用程序中托管 Blazor。

我所做的是从“标准”Blazor WASM 应用程序开始，删除静态文件，因为我不需要它们，将 index.html 的内容移动到 Wasm.cshtml，并更改 {{ 1}} 到 endpoints.MapFallbackToFile("index.html");。

一切似乎都按预期进行；我可以运行应用程序并导航到 Blazor 中的不同页面。

然而，当我尝试使用其 URL 访问页面时，事情会崩溃；例如，endpoints.MapFallbackToPage("/Wasm");，其中 http://mysite/counter 是 Blazor 中的一个页面，我收到以下错误：

/counter

有人可以帮我找出我做错了什么吗？

附注：

我在这里查看了一些答案，但我发现的只是人们在谈论 Blazor Server。
我使用的是 .NET 3.1 和 Blazor 3.2。
我想使用我的 Razor Pages 应用程序来托管/服务 Blazor WASM，而不是将它们混合在一个项目中。它们仍然是 2 个不同的项目。
我完全清楚 Blazor WASM 和 Razor Pages 是不相关的技术。我不是要整合它们。我只是想从动态页面服务器 Blazor WASM 文件。如果它让您更好地思考我想要实现的目标，请将 Razor Pages 视为任何服务器端技术； PHP、Node 或其他任何东西，然后将其应用于我正在尝试解决的路由问题。

Answer 1

好的，根据您目前所写的内容，看看ShaunCurtis/Blazor-Experimental on Github。它是一些实验代码的临时 Repo。忽略 BlazorTest。启动项目是 Blazor-Experimental。

默认页面是一个普通的剃须刀页面。这是一个混合的 Razor、Blazor 服务器和 Blazor WASM 站点。所有 WASM 路由看起来都像 wasm/fetchdata，所以我们有所有服务器和 WASM“页面”的不同 URL。

Startup 使用多个端点区分 URL，因此在 Blazor WASM 应用程序“范围”内的任何 URL 都被设置为 _wasm.cshtml。无法直接映射的任何其他内容都在位于 _host.cshtml 的 Blazor 服务器应用程序的“范围”内。网站上的所有计划 Razor 页面均按原样提供。您根本不需要 Blazor 服务器位，只需回退到默认的 Razor 页面即可。

  endpoints.MapFallbackToPage("/wasm/{**segment}", "/_wasm");
  endpoints.MapFallbackToPage("/_Host");

总结答案：

创建一个 Blazor WASM 项目。您可以从 Blazor 托管模板复制该模板。
从 Razor Pages 项目中引用该项目。
创建将托管 Blazor WASM 的页面；例如，Wasm.cshtml，并确保没有设置页面路由；即，页面顶部只有 @page，因此它采用默认路由 /wasm。
将 Blazor WASM 项目中 index.html 的代码复制到 Wasm.cshtml 中。
重要提示：如果您使用自己的布局，请务必在页面或布局 <base href="/" /> 部分添加 <head>。
从 Blazor WASM 项目中删除所有静态文件；例如，index.html。
从 Blazor WASM 项目中删除所有 *.razor 页面。
将 Wasm.razor 添加到 Blazor WASM 项目并将其路由设置为 /wasm；即，@page "/wasm"。
在 Razor Pages 项目的 Startup.cs 中，在 app.UseBlazorFrameworkFiles(); 之后添加 app.UseStaticFiles();。
同样在同一个 Startup.cs 中，在 endpoints.MapFallbackToPage("/wasm/{**segment}", "/wasm"); lambda 中添加 app.UseEndpoints()。
现在运行应用程序并导航到 /wasm。除了您设置的任何布局之外，您还应该看到 Wasm.razor 的内容。粘贴 URL http://whateveryoursiteis/wasm 时，您将获得相同的结果。

Answer 2

你提供的信息很少，所以我不得不做一些猜测。

我猜您的 WASM 集成基于 Blazor WASM ASP.NET 托管模板。该模板由三个项目组成：.Client 项目、.Server 项目和一些具有共享模型的额外项目（他们可能正在做干净的架构）。服务器项目是一个 Razor 页面项目，客户端是一个 WASM 项目。

您必须了解的是，Blazor WASM 项目无法与 Razor 页面应用程序相提并论。 Blazor WASM，或者实际上任何 WASM 文件都是一种不同类型的二进制文件，并且完全在客户端运行！它是一个客户端应用程序。 IE。输出二进制完全不同。您不能让一个项目同时生成服务器 (x86/arm) 二进制文件和客户端 (WASM) 二进制文件。您需要两个独立的项目。

在编译 WASM 项目时实际发生的是所有页面路由也转换为 WASM。只需在更改页面时检查网络流量即可。即使您的浏览器 url 更改，那也是假...没有网络流量！事实上，你停留在同一页面上。

现在想想当您在浏览器中手动输入“[..]/counter”时会发生什么。主机实际上会再次从根 ("/" = "/Index") 下载相同的 .wasm 文件，然后解析路由客户端。

回到你的问题。出于某种原因，您将所有内容从 Blazer WASM 项目 wwwroot/index.html 复制到 Razor Page 项目 Pages/Index.cshtml。现在你混淆了整个路由系统。当您输入“[...]/counter”时，WASM 路由器会告诉您需要从“/Index”下载 .wasm 文件。同时，Razor Pages 路由器会告诉您编译后的 Index.cshtml 位于“/Index”。这会给你的 “AmbiguousMatchException：请求匹配多个端点。匹配：/Index /Index”。

看看UseBlazorFrameworkFiles的总结：

<块引用>

将应用程序配置为从根路径“/”提供 Blazor WebAssembly 框架文件。

解决方案只是保持 WASM 项目中的 index.html 原样。看看默认的 Blazor WASM ASP.Net 应用程序：它同时托管 Blazor WASM、Razor Pages 和 MVC，并且路由很好。

另一种解决方案是使用 UseBlazorFrameworkFiles 的重载，您可以在其中提供路径前缀。例如

app.UseBlazorFrameworkFiles("/wasm");

您需要修复其他路由。

编辑：那么我们来举个例子。你有：

为页面 /、/counter 等提供服务的 Blazor WASM 项目
为页面 /weatherforecast 等提供服务的 Razor 页面项目

现在：

您在 / 启动应用程序。这将从服务器加载 WASM。
接下来点击计数器图标。 这不会改变页面！：它显示计数器页面并更新导航 URL，但不加载新页面。
现在去weatherforecast。这在 WASM 中找不到，因此实际上是从服务器加载了一个新页面。（剃刀页面或控制器/视图）
如果您返回到 counter，在服务器上找不到它，因此服务器会“回退”到根目录 (/Index) 并再次加载 WASM。接下来是查看是否在 WASM 中找到了 counter。

动态 /Index 会破坏这个系统，所以你必须手动解决所有的路由。

如何在 Razor Pages 应用程序中托管 Blazon

2 个答案: