MVC 中的 Blazor：组件被渲染，但 @onclick 不起作用。连接问题

Question

我正在尝试在 .net core 3 MVC 项目中使用 Blazor。我使用了一些教程来做到这一点，比如https://fizzylogic.nl/2019/08/18/integrating-blazor-in-an-existing-asp-net-core-application/和https://chrissinty.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 的控制台中收到这些错误：

• [2019-12-02T09:26:08.117Z] 信息：将“_blazor”规范化为“ https://localhost:44375/Locations/_blazor ”。_blazor/negotiate:1 加载资源失败：服务器响应状态为 404 () blazor.server.js:1
• [2019-12-02T09:26:08.155Z] 错误：无法完成与服务器的协商：错误 e.log @ blazor.server.js:1 blazor.server.js:1
• [2019-12-02T09:26:08.156Z] 错误：无法启动连接：错误 e.log @ blazor.server.js:1 blazor.server.js:15
• [2019-12-02T09:26:08.156Z] 错误：错误 e.log @ blazor.server.js:15 blazor.server.js:1 -Uncaught (in promise) 错误：如果连接不在，则无法发送数据“连接”状态。

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

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

编辑 1

<base href="/" />在标题中似乎已经修复了控制台中的错误。我希望它可以解决 onclick 问题，但还没有……我认为该组件在某种程度上被视为普通的剃刀组件，而不是 blazor 组件。如果我查看生成的 html，我可以找到这个：<span @onclick="AddLocation" ></span>，我认为这是错误的（对于普通的 razor/blazor 项目，@onclick 从 html 中消失了）。有谁知道这个问题的解决方案？试过这个：https : //stackoverflow.com/a/58444907/1794246，但这并没有多大作用。

编辑 2

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

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

Answer 1

问题的解决方案是改变两件事：

• 要修复控制台中的错误，我必须将其放入<base href="/" />_Layout.cshtml 的标题中
• 要解决实际的 @onclick 问题，我必须将这些 using 语句放在 Blazor 组件中：

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

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