MVC 中的 Blazor：组件被渲染，但 @onclick 不起作用。连接问题
Posted
技术标签:
【中文标题】MVC 中的 Blazor：组件被渲染，但 @onclick 不起作用。连接问题【英文标题】：Blazor in MVC: Component gets rendered, but @onclick not working. Problem with connection 【发布时间】：2020-03-26 21:45:35 【问题描述】：我正在尝试在 .net core 3 MVC 项目中使用 Blazor。我使用了一些教程来做到这一点，例如 https://fizzylogic.nl/2019/08/18/integrating-blazor-in-an-existing-asp-net-core-application/ 和 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 的控制台中收到这些错误：
[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 - 未捕获（承诺中）错误：如果连接未处于“已连接”状态，则无法发送数据。主要错误可能是“将 '_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://***.com/a/58444907/1794246，但这并没有多大作用。
编辑 2
在 MVC 项目的根目录中有一个 _imports.razor 文件显然没有任何作用。将这些 using 语句添加到 Blazor 组件实际上解决了 onclick 的问题（Intellisense 也更好地识别了组件中的内容）：
@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Web;
【问题讨论】：
根据需要设置页面的基本href<head> <base href="/" />
@aguafrommars 谢谢，修复了控制台中的错误！没有修复 onclick 错误，所以还有其他问题。查看我的编辑。
【参考方案1】：
解决问题的方法是改变两件事：
要修复控制台中的错误，我必须将<base href="/" /> 放在 _Layout.cshtml 的标题中
要解决实际的 @onclick 问题，我必须将这些 using 语句放入 Blazor 组件中：
@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Web;
之后，@onclick 开始工作，并且智能感知在 Blazor 组件中识别的内容更好。
【讨论】：
这对我也有用。不确定它是否有所不同，但我使用_imports.razor 文件添加到根目录为我解决了这个问题。在该文件中添加使用@using Microsoft.AspNetCore.Components.Web;。如果您的组件位于特定文件夹中，请将命名空间也添加到该文件夹中。例如@using MyAppOrModule.Components; 如果你有一个razor 类库，这个_imports.razor 也需要添加到那个类库中。【参考方案2】：
来自文档：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 Core 应用和 Blazor 子应用：
ASP.NET Core 应用程序名为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/ 的情况下为其资源构建正确的相对 URL。
为了为 Blazor 应用的基本路径 https://www.contoso.com/CoolApp/ 提供配置，<base> 标记的 href 属性设置为 Pages/_Host.cshtml 文件中的相对根路径（Blazor服务器）或 wwwroot/index.html 文件（Blazor WebAssembly）：
<base href="/CoolApp/">
Blazor 服务器应用还通过调用应用的请求管道Startup.Configure 来设置服务器端基本路径：
app.UsePathBase("/CoolApp");
通过提供相对 URL 路径，不在根目录中的组件可以构造相对于应用程序根路径的 URL。目录结构不同级别的组件可以在整个应用程序的位置建立指向其他资源的链接。应用程序基本路径还用于拦截选定的超链接，其中链接的href 目标位于应用程序基本路径 URI 空间内。 Blazor 路由器处理内部导航。
在许多托管方案中，应用程序的相对 URL 路径是应用程序的根目录。在这些情况下，应用的相对 URL 基本路径是正斜杠 (<base href="/" />)，这是 Blazor 应用的默认配置。在其他托管场景中，例如 GitHub Pages 和 IIS 子应用，应用基本路径必须设置为应用的服务器相对 URL 路径。
要设置应用程序的基本路径，请更新 Pages/_Host.cshtml 文件 (Blazor Server) 或 wwwroot/index. html 文件（Blazor WebAssembly）。将href 属性值设置为/RELATIVE URL PATH/（需要尾部斜杠），其中RELATIVE URL PATH 是应用的完整相对URL 路径。
对于具有非根相对 URL 路径（例如，<base href="/CoolApp/">）的 Blazor WebAssembly 应用，该应用在本地运行时找不到其资源。要在本地开发和测试期间解决此问题，您可以在运行时提供与 <base> 标记的 href 值匹配的 path base 参数。不要包含尾部斜杠。要在本地运行应用程序时传递路径基参数，请使用 --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。
【讨论】：
_layout.cshtml 文件头中的<base href="/" /> 似乎已修复控制台中的错误。 @onclick 的问题不是 :-( 。请参阅我的编辑。【参考方案3】：
在我将特定模型作为参数传递给组件的情况下，该模型是使用 DI 创建的，并且没有无参数构造函数。一旦添加了这样的默认构造函数，一切就开始正常工作了。
【讨论】：
以上是关于MVC 中的 Blazor：组件被渲染，但 @onclick 不起作用。连接问题的主要内容，如果未能解决你的问题，请参考以下文章
从 JavaScript 渲染 Blazor 组件 - 如何在组件渲染后从 JavaScript 更新 Blazor 组件参数
.NET Core - 为啥我应该使用视图组件而不是集成在 MVC 应用程序或 Razor 页面中的 Blazor 组件