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

Question

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

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

onclick调用此方法：

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

    return false;
  }

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

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

（这里明显的答案是href完全删除，但我使用引导药丸中的链接并删除href药丸工作的停止）

将元素更改<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>。这不起作用，请参阅此处了解更多信息。

score 81 · Accepted Answer

ASP.NET Core 3.1 版之后的做法似乎是

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

score 6 · Accepted Answer

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

正如您所发现的那样，引导程序中的药丸是根据使用的元素设计的，因此为什么将 a 标签换成另一个标签会破坏事情。

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

score 6 · Accepted Answer

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

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

score 3 · Accepted Answer

这终于得到了解决。

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

score 0 · Accepted Answer

我有同样的问题，并且不喜欢添加额外的 onclick:preventDefault 的想法

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

所以我改用了一个按钮。我将光标悬停在上面，它会按照我的意愿行事。

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

5 回答 5