Blazor 链接 - 如果有 onclick 方法，则禁用 href

Question

在 Blazor 中，我有一个<a>同时具有 ahref和onclick方法的元素：

<a href="" onclick="@(() => ChangePage(_someObject))">Test</a>

onclick 调用这个方法：

  private bool ChangePage(object objectToDisplay)
  {
    _currentObject = objectToDisplay;
    StateHasChanged();

    return false;
  }

通常在 JavaScript 中，从 event 方法返回 false 会停止后续导航到中的链接，href但这似乎不适用于我上面的代码。

单击链接后，如何阻止 Blazor 将页面更改为根 url？

（这里显而易见的答案是href完全删除，但我正在使用引导 Pill 中的链接并删除 Pillhref工作的停止）

将<a>元素更改为跨度并设置data-target属性，但这会正确停止 Pills 渲染。
添加return到onclick事件中（根据此答案）：onclick="return @(() => ChangePage(_overviewModel))"但这不会编译。
return在onclick事件之后添加：onclick="@(() => ChangePage(_overviewModel)); return false;"但这也不能编译。
使用 BlazorNavLink组件<NavLink href="" onclick="@(() => ChangePage(_someObject))">NavLink</NavLink>。这不起作用，请参阅此处了解更多信息。

Answer 1

在ASP.NET Core 3.1 版之后执行此操作的方法似乎是

<a href="" @onclick="@SomeAction" @onclick:preventDefault />

@MattSanders 如果您使用 <NavLink> 而不是 <A> 那么这种方法不起作用。有关更多信息，请参阅此答案/sf/answers/4245732361/ (3认同)
不接受：“组件参数‘onclick’对此组件使用了两次或多次。参数必须是唯一的（不区分大小写）” (2认同)

Answer 2

目前，您无法在 Blazor 中控制事件传播。此功能将在下一个预览版中提供，即预览版 6。您可以在 GitHub 上查看相关问题，https://github.com/aspnet/AspNetCore/issues/5545。

正如您所发现的，bootstrap 中的药丸是基于所使用的元素设计的，因此为什么将 a 标签交换为另一个会破坏事物。

我认为您现在的选择是等待预览 6 或自己重写药丸。

Answer 3

您可以尝试将 javascript void 方法添加到 href 中。

<a href="javascript: void(0);" onclick="@(() => ChangePage(_someObject))">Test</a>

Answer 4

这个问题终于得到了解决。

<a style="text-underline-position:below; cursor:pointer" @onclick="(() => CloseValidation())">x</a>