Blazor链接-如果有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，但这似乎不适用于我上面的代码。

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

（最明显的答案是完全删除href，但我正在使用Bootstrap药丸中的链接，而删除href会停止药丸工作）

我尝试过的其他方法无效：

• 将<a>元素更改为一个跨度并设置data-target属性，但这将使Pills渲染正常。
• 将return添加到onclick事件中（根据this answer）：onclick="return @(() => ChangePage(_overviewModel))"，但这不能编译。
• 在return事件之后添加onclick：onclick="@(() => ChangePage(_overviewModel)); return false;"，但这也不编译。
• 使用Blazor NavLink组件<NavLink href="" onclick="@(() => ChangePage(_someObject))">NavLink</NavLink>

关于已接受答案的注释

处理未链接到URL的href的“正确”方法是long and heavily discussed topic，正如@Issac在注释中正确指出的那样，很大程度上依赖于使用JavaScript的解决方案与Blazor的目标相反。

非常感谢，根据Chris的回答，使用.NET Core 3 Preview 6消除了对此的需要。一旦可用，处理此情况的正确方法将是使用Blazor的属性来停止事件传播。那是likely to look something like this：

<a href="" onclick="@SomeAction" onclick-prevent-default="true" />

Answer 1

release 3.1 of ASP.NET Core之后的处理方式似乎是

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

Answer 2

当前，您无法控制Blazor中的事件传播。该功能将在下一个预览即预览6中提供。您可以在GitHub https://www.w3schools.com/php/func_string_trim.asp上查看相关问题。

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

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

Answer 3

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

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

Answer 4

此问题终于得到解决。

arrange

Answer 5

我遇到了同样的问题，并且不喜欢添加额外的onclick：preventDefault

的想法。

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

所以我改用了按钮。我将光标悬停在上面，并且按我的意愿进行操作。

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