MVC 中的 Blazor：组件已呈现，但 @onclick 不工作。连接问题

Blazor in MVC: Component gets rendered, but @onclick not working. Problem with connection

我正在尝试在 .net core 3 MVC 项目中使用 Blazor。我使用了一些教程来做到这一点，比如 https://fizzylogic.nl/2019/08/18/integrating-blazor-in-an-existing-asp-net-core-application/ and https://chrissainty.com/using-blazor-components-in-an-existing-mvc-application/ 。

工作正常：Blazor 组件的初始化工作正常。 OnInitializedAsync() 函数被触发，组件呈现正常。

这是来自 MVC 视图的调用：

@(await Html.RenderComponentAsync<MyProject.Components.Locations>(RenderMode.ServerPrerendered))

什么不起作用：在 Blazor 组件中使用 @onclick。这是一些示例代码：

<span @onclick="AddLocation"></span>

@code {
    private void AddLocation(){

    }
}

它可能不起作用的原因是我在连接初始化时遇到错误。该组件不是从基本路径呈现的，而是从特定视图的 url 呈现的，我认为这会扰乱连接。我在 Chrome:

的控制台中收到这些错误

主要错误可能是“将“_blazor”规范化为“https://localhost:44375/Locations/_blazor””。从基本路径请求 _blazor 有效。有谁知道在这种情况下如何设置基本路径？

（是的，普通 Razor 页面环境中的 Blazor 可能更简单，但我想在 MVC 中尝试 Blazor。）

编辑 1

header 中的

<base href="/" /> 似乎已修复控制台中的错误。我希望它能解决 onclick 问题，但还没有……我认为该组件在某种程度上被视为普通的剃须刀组件，而不是 blazor 组件。如果我查看生成的 html，我会发现：<span @onclick="AddLocation" ></span>，我认为这是错误的（对于正常的 razor/blazor 项目，@onclick 从 html).有人知道这个的解决方案吗？试过这个： ，但效果不大。

编辑 2

在 MVC 项目的根目录中有一个 _imports.razor 文件显然没有任何作用。将这些 using 语句添加到 Blazor 组件实际上解决了 onclick 的问题（Intellisense 也更好地识别了组件中的内容）：

@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Web;

来自文档：https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/blazor/index?view=aspnetcore-3.0&tabs=visual-studio#app-base-path

应用程序基本路径

应用程序基本路径 是应用程序的根 URL 路径。考虑以下 ASP.NET 核心应用和 Blazor 子应用：

  • ASP.NET 核心应用被命名为 MyApp：
    • 应用实际位于 d:/MyApp.
    • 在 https://www.contoso.com/{MYAPP RESOURCE} 收到请求。
  • 名为 CoolApp 的 Blazor 应用是 MyApp 的子应用：
    • 子应用实际位于 d:/MyApp/CoolApp.
    • 在 https://www.contoso.com/CoolApp/{COOLAPP RESOURCE} 收到请求。

在不为 CoolApp 指定额外配置的情况下，此场景中的子应用不知道它在服务器上的位置。例如，应用程序无法在不知道它驻留在相对 URL 路径 /CoolApp/.

的情况下为其资源构建正确的相对 URLs

为了为 Blazor 应用程序的基本路径 https://www.contoso.com/CoolApp/ 提供配置，<base> 标记的 href 属性设置为 [= 中的相对根路径102=].cshtml 文件（Blazor 服务器）或 wwwroot/index.html 文件（Blazor WebAssembly）：

<base href="/CoolApp/">

Blazor 服务器应用通过调用应用的请求管道 Startup.Configure:

额外设置服务器端基本路径 
app.UsePathBase("/CoolApp");

通过提供相对 URL 路径，不在根目录中的组件可以相对于应用程序的根路径构建 URLs。目录结构不同级别的组件可以构建 links 到整个应用程序中各个位置的其他资源。应用程序基本路径还用于拦截选定的 hyperlinks，其中 link 的 href 目标位于应用程序基本路径 URI space 中。 Blazor 路由器处理内部导航。

在许多托管场景中，应用的相对 URL 路径是应用的根目录。在这些情况下，应用的相对 URL 基本路径是正斜杠 (<base href="/" />)，这是 Blazor 应用的默认配置。在其他托管场景中，例如 GitHub 页面和 IIS 子应用程序，应用程序基本路径必须设置为应用程序的服务器相对 URL 路径。

要设置应用程序的基本路径，请更新 Pages/_Host.cshtml[= 的 <head> 标签元素内的 <base> 标签83=] 文件（Blazor 服务器）或 wwwroot/index.html 文件（Blazor WebAssembly）。将 href 属性值设置为 /{RELATIVE URL PATH}/（尾部斜杠是必需的），其中 {RELATIVE URL PATH} 是应用程序的完整相对 URL 路径。

对于具有非根相对 URL 路径（例如，<base href="/CoolApp/">）的 Blazor WebAssembly 应用程序，应用程序无法找到其资源 当 运行 本地。要在本地开发和测试期间解决此问题，您可以提供一个 path base 参数，该参数与 运行 处的 <base> 标记的 href 值相匹配时间。不要包含尾部斜线。要在本地 运行ning 应用程序时传递路径基本参数，请使用 --pathbase 选项从应用程序目录执行 dotnet run 命令：

dotnet run --pathbase=/{RELATIVE URL PATH (no trailing slash)}

对于相对 URL 路径为 /CoolApp/ (<base href="/CoolApp/">) 的 Blazor WebAssembly 应用程序，命令为：

dotnet run --pathbase=/CoolApp

Blazor WebAssembly 应用在 http://localhost:port/CoolApp 本地响应。

问题的解决方案改变了两个方面：

  • 为了修复控制台中的错误，我不得不将 <base href="/" /> 放在 _Layout.cshtml
    • 的 header 中
  • 为了解决实际的@onclick 问题，我不得不将这些 using 语句放在 Blazor 组件中：
@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Web;

之后 @onclick 开始工作，智能感知在 Blazor 组件中识别的东西更好一些。

在我的例子中，将特定模型作为参数传递给组件，该模型是使用 DI 创建的，没有无参数构造函数。一旦添加了这样的默认构造函数，一切就开始正常工作了。