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

Question

In Blazor I have an <a> element that has both a href and an onclick method:

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

onclick calls this method:

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

    return false;
  }

Normally in JavaScript returning false from the event method stops the subsequent navigation to the link in the href but this doesn't seem to be working with my code above.

How can I stop Blazor changing the page to the root url after the link is clicked?

(The obvious answer here would be to remove the href altogether, but I'm using the link in a bootstrap Pill and removing the href stops the Pills working)

Other things I've tried that didn't work:

Changing the <a> element to a span and setting the data-target attribute, but that stops the Pills rendering properly.
Adding return into the onclick event (as per this answer): onclick="return @(() => ChangePage(_overviewModel))" but that doesn't compile.
Adding return after the onclick event: onclick="@(() => ChangePage(_overviewModel)); return false;" but that doesn't compile either.
using a Blazor NavLink component <NavLink href="" onclick="@(() => ChangePage(_someObject))">NavLink</NavLink>. That doesn't work, see here for more on that.

score 110 · Accepted Answer · edited Feb 14 '20 at 16:36

110

The way to do it after release 3.1 of ASP.NET Core seems to be

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

edited Feb 14 '20 at 16:36

Antonio Correia

1,093
1
15
22

answered Jan 06 '20 at 17:29

Stilgar

22,354
14
64
101

1

Changing this to be the accepted answer as this is the right way to achieve this going forward. – tomRedox Jan 06 '20 at 17:54
7

Not accepted: "The component parameter 'onclick' is used two or more times for this component. Parameters must be unique (case-insensitive)" – Aurelien B Feb 11 '20 at 16:24
1

@AurelienB are you sure you use : instead of = on preventDefault? – Stilgar Feb 11 '20 at 22:45
1

Having the same problem as @AurelienB , did you happen to find an alternative? – Matt Sanders Feb 18 '20 at 22:18
3

@MattSanders if you're using a rather than an then this approach doesn't work. See this answer for more https://stackoverflow.com/a/60653319/1879019 – tomRedox Mar 12 '20 at 11:38
1

@AurelienB see above in case this applies to your case – tomRedox Mar 12 '20 at 11:39
this doesn't work for me with Chrome. I get an error in the browser debug console: Failed to execute 'setAttribute' on 'Element': '@onclick:preventDefault"' is not a valid attribute name. – Randy Gamage Jul 01 '21 at 15:36
@RandyGamage my wild guess is that for some reason you are not in Blazor context, like this code is not in a blazor component or something like that – Stilgar Jul 02 '21 at 13:22

score 8 · Answer 2 · answered May 17 '19 at 10:43

8

You could try adding the javascript void method to the href.

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

answered May 17 '19 at 10:43

simpleman

153
7

Excellent, that's got the event working without then navigating to the href. The link is also behaving correctly in a Bootstrap pill too. – tomRedox May 17 '19 at 10:47
This is a hacking and temporary solution, of course. The use of href="javascript: void(0);" is considered abusive and is repudiated. Needless to say that JavaScript functions should not be embedded in Blazor code... There is one way to call a JavaScript from Blazor: JS Interop. – enet May 17 '19 at 13:20
@Issac, yes absolutely re avoiding JS. I've added some notes in the original question to reflect that. – tomRedox May 17 '19 at 13:40
Shouldn't it now be : ChangePage(_someObject))">Test – Landy Nov 15 '19 at 14:52
This will work, but for .net 6, you will need to put @onclick="@(() =>Method())". Using just onclick will apply onclick as an attribute, like 'class=', and it will not work. – Brandon Dekker Mar 29 '22 at 11:54
This works for MudBlazor's MudLink too. – TheLegendaryCopyCoder Jul 25 '22 at 07:09

score 6 · Answer 3 · answered May 17 '19 at 10:01

6

Currently you can't control event propagation in Blazor. This feature will be available in the next preview, which is preview 6. You can see the relevant issue on GitHub, https://github.com/aspnet/AspNetCore/issues/5545.

As you have found the pills in bootstrap are styled based on the elements used hence why swapping the a tag for another breaks things.

I think your options right now are either wait for preview 6 or rewrite the pills yourself.

answered May 17 '19 at 10:01

Chris Sainty

7,861
2
37
59

Ah yes of course, I've already been down the event propagation rabbit hole with something else, but it didn't occur to me this was another instance of the same sort of thing. Thanks Chris, and thanks for the heads up that this should be in preview 6, I hadn't spotted that. – tomRedox May 17 '19 at 10:08
No problem, glad to help. – Chris Sainty May 17 '19 at 10:08

Fahad Mullaji · Answer 4 · 2019-11-08T17:29:52.120

4

This has been finally fixed.

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

edited Nov 08 '19 at 17:29

answered Nov 06 '19 at 19:48

Fahad Mullaji

1,332
5
15
30

score 2 · Answer 5 · answered May 25 '20 at 18:37

2

I had the same problem, and didnt like the idea of adding the extra onclick:preventDefault

I also want to avoid adding javascript and seeing how much blazor and C# I can use.

So i used a button instead. I get the cursor on hover over and it acting as I would like.

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

answered May 25 '20 at 18:37

Ashley Kilgour

1,110
2
15
33

this answer is more semantically correct, as well, for the current implementation of `ChangePage` (which doesn't "actually" change the page) https://bitsofco.de/anchors-vs-buttons/ . if a true page change is wanted (browser forward/back button support, bookmarking, etc), I think an `` tag should be used, placing the `objectToDisplay`'s id in the URL, for example, detecting the change, and loading the object that way – Ben Jul 01 '22 at 17:22

score 0 · Answer 6 · answered Feb 18 '23 at 18:39

0

For me, it worked by changing from:

private void Click(){}

to:

private async Task Click(){}

answered Feb 18 '23 at 18:39

Jazz.

458
4
12

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

Other things I've tried that didn't work:

6 Answers6

Linked