Blazor link - disable href if there's an onclick method
Solution 1
The way to do it after release 3.1 of ASP.NET Core seems to be
<a href="" @onclick="@SomeAction" @onclick:preventDefault />
Solution 2
You could try adding the javascript void method to the href.
<a href="javascript: void(0);" onclick="@(() => ChangePage(_someObject))">Test</a>
Solution 3
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.
Solution 4
This has been finally fixed.
<a style="text-underline-position:below; cursor:pointer" @onclick="(() => CloseValidation())">x</a>
Solution 5
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>
tomRedox
Director and tech evangelist at Redox Software. In my spare time I'm coding or on my bike.
Updated on June 11, 2021Comments
-
tomRedox almost 3 years
In Blazor I have an
<a>
element that has both ahref
and anonclick
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 thehref
stops the Pills working)Other things I've tried that didn't work:
- Changing the
<a>
element to a span and setting thedata-target
attribute, but that stops the Pills rendering properly. - Adding
return
into theonclick
event (as per this answer):onclick="return @(() => ChangePage(_overviewModel))"
but that doesn't compile. - Adding
return
after theonclick
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.
- Changing the
-
tomRedox almost 5 yearsAh 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.
-
Chris Sainty almost 5 yearsNo problem, glad to help.
-
tomRedox almost 5 yearsExcellent, that's got the event working without then navigating to the href. The link is also behaving correctly in a Bootstrap pill too.
-
enet almost 5 yearsThis 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.
-
tomRedox almost 5 years@Issac, yes absolutely re avoiding JS. I've added some notes in the original question to reflect that.
-
Landy over 4 yearsShouldn't it now be : <a href="javascript: void(0);" @onclick="@(() => ChangePage(_someObject))">Test</a>
-
tomRedox over 4 yearsChanging this to be the accepted answer as this is the right way to achieve this going forward.
-
Aurelien B about 4 yearsNot accepted: "The component parameter 'onclick' is used two or more times for this component. Parameters must be unique (case-insensitive)"
-
Stilgar about 4 years@AurelienB are you sure you use : instead of = on preventDefault?
-
Matt Sanders about 4 yearsHaving the same problem as @AurelienB , did you happen to find an alternative?
-
tomRedox about 4 years@MattSanders if you're using a <NavLink> rather than an <A> then this approach doesn't work. See this answer for more stackoverflow.com/a/60653319/1879019
-
tomRedox about 4 years@AurelienB see above in case this applies to your case
-
Randy Gamage almost 3 yearsthis 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.
-
Stilgar almost 3 years@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
-
Brandon Dekker about 2 yearsThis 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.
-
Ben almost 2 yearsthis answer is more semantically correct, as well, for the current implementation of
ChangePage
(which doesn't "actually" change the page) bitsofco.de/anchors-vs-buttons . if a true page change is wanted (browser forward/back button support, bookmarking, etc), I think an<a>
tag should be used, placing theobjectToDisplay
's id in the URL, for example, detecting the change, and loading the object that way