Blazor link - 如果有 onclick 方法则禁用 href

Question

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

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

onclick 调用此方法：

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

    return false;
  }

通常在 JavaScript 中从 href 中的事件方法 stops the subsequent navigation to the link 返回 false 但这似乎不适用于我上面的代码。

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

（这里显而易见的答案是完全删除 href，但我在 bootstrap 药丸中使用 link 并删除 href 停止药丸起作用了）

将 <a> 元素更改为跨度并设置 data-target 属性，但这会停止正确呈现 Pills。
将 return 添加到 onclick 事件中（根据 this answer）：onclick="return @(() => ChangePage(_overviewModel))" 但无法编译。
在 onclick 事件之后添加 return：onclick="@(() => ChangePage(_overviewModel)); return false;" 但也无法编译。
使用 Blazor NavLink 组件 <NavLink href="" onclick="@(() => ChangePage(_someObject))">NavLink</NavLink>。这行不通，了解更多。

Answer 1

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

上查看相关问题

如您所见，bootstrap 中的药丸是根据所使用的元素设置样式的，因此为什么将 a 标签换成另一个标签会造成破坏。

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

Answer 2

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

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

Answer 3

终于解决了。

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

Answer 4

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

Answer 5

我遇到了同样的问题，不喜欢添加额外的东西 onclick:preventDefault

我也想避免添加 javascript 并查看我可以使用多少 blazor 和 C#。

所以我改用了一个按钮。我将光标悬停在上面，它按我想要的方式运行。

<button class="btn btn-primary" @onclick="ChangePage">
   Test
 </button>

Blazor link - disable href if there's an onclick method