Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.
like image 691
tomRedox Avatar asked May 17 '19 09:05

tomRedox


People also ask

How can I disable href If onclick is executed?

To disable href if onclick is executed with JavaScript, we call preventDefault to stop the default navigation action. document. getElementsById("ignore-click"). addEventListener("click", (event) => { event.

Can we use href and onclick together?

How to make this a tag working with href and onClick? The default behavior of the <a> tag's onclick and href properties are to execute the onclick , then follow the href as long as the onclick doesn't return false , canceling the event (or the event hasn't been prevented).

Does Onclick fire before href?

onclick does trigger first, the href only goes once onclick has returned! Are you doing something asynchronous in the onclick and you want to wait until it returns or something?


2 Answers

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

<a href="" @onclick="@SomeAction" @onclick:preventDefault /> 
like image 105
Stilgar Avatar answered Sep 21 '22 16:09

Stilgar


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.

like image 24
Chris Sainty Avatar answered Sep 21 '22 16:09

Chris Sainty