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

Question

在 Blazor 中，我有一个包含 href 和 onclick 方法的 <a> 元素：

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

onclick 调用此方法：

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

    return false;
  }

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

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

（显然的答案是完全删除href，但我正在使用bootstrap Pill中的链接，删除href会停止Pill工作）

我尝试过但没用的其他事情：

• 将<a>元素更改为并设置data-target属性，但这会导致Pills无法正确呈现。
• 按照此答案将return添加到onclick事件中：onclick="return @(() => ChangePage(_overviewModel))"，但这不会编译。
• 在onclick事件后添加return：onclick="@(() => ChangePage(_overviewModel)); return false;"，但这也不会编译。
• 使用Blazor NavLink组件<NavLink href="" onclick="@(() => ChangePage(_someObject))">NavLink</NavLink>。那行不通，在这里查看更多信息。

- tomRedox

Answer 1

在发布了 ASP.NET Core 3.1 之后，似乎可以这样做

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

- Stilgar

---

将此更改为被接受的答案，因为这是未来实现此目标的正确方法。 - tomRedox

该组件参数“onclick”在此组件中被使用了两次或更多次。参数必须唯一（不区分大小写）。 - Aurelien B

@AurelienB 你确定在 preventDefault 中使用 : 而不是 = 吗？ - Stilgar

和 @AurelienB 一样遇到了同样的问题，你有找到替代方案吗？ - Matt Sanders

如果您使用的是<NavLink>而不是<A>，那么这种方法就不起作用了。请参阅此答案以获取更多信息：https://dev59.com/7bnoa4cB1Zd3GeqPWsPI#60653319 - tomRedox

Answer 2

你可以尝试将javascript void方法添加到href中。 <a href="javascript: void(0);" onclick="@(() => ChangePage(_someObject))">测试</a>

- simpleman

---

太好了，这样就可以在不导航到href的情况下使事件起作用了。链接在Bootstrap pill中也表现得很正常。 - tomRedox

这只是一种黑客和临时的解决方案。当然，使用href =“javascript：void（0）;”被认为是滥用的，并遭到了谴责。不用说，在Blazor代码中不应嵌入JavaScript函数... 从Blazor调用JavaScript的一种方法是JS Interop。 - enet

@Issac，是的，绝对要避免使用JS。我已经在原问题中添加了一些注释以反映这一点。 - tomRedox

现在应该是这样的吧： <a href="javascript: void(0);" @onclick="@(() => ChangePage(_someObject))">测试</a> - Landy

这个可以工作，但是对于 .net 6，你需要使用 @onclick="@(() =>Method())"。仅使用 onclick 将把 onclick 应用为属性，例如 'class='，它将无法工作。 - Brandon Dekker

这同样适用于 MudBlazor 的 MudLink。 - TheLegendaryCopyCoder

Answer 3

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

正如你发现的那样，Bootstrap中的标签样式是基于使用的元素进行设置的，因此更换a标签会导致破坏。

我认为你现在的选择是要么等待预览版6，要么自己重写标签样式。

- Chris Sainty

---

当然，我已经在另一个事件传播的问题上深入研究过了，但是我没有想到这是同样类型的另一个实例。谢谢Chris，也感谢你提醒我这应该在预览6中，我没有注意到。 - tomRedox

没问题，很高兴能帮忙。 - Chris Sainty

Answer 4

这个问题最终已经解决。

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

- Fahad Mullaji

Answer 5

我曾经遇到同样的问题，不喜欢添加额外的onclick:preventDefault。

我也想避免添加 JavaScript，看看我能用多少 Blazor 和 C#。

所以我使用了一个按钮。当鼠标悬停时，我可以得到光标并且它表现得像我想要的那样。

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

- Ashley Kilgour

---

这个回答在当前的 ChangePage 实现中更语义化地表达了，因为它并没有“真正”改变页面。如果要实现真正的页面更改（浏览器前进/后退按钮支持、书签等），我认为应该使用 <a> 标签，将 objectToDisplay 的 id 放在 URL 中，例如通过检测更改并以这种方式加载对象。 - Ben

Answer 6

对我来说，通过改变以下内容，它可以正常工作：

private void Click(){}

to:

private async Task Click(){}

- Jazz.