C# - Using Razor Components In A Razor Page - @onclick event don't work

Question

I've an existing "Razor Page Web Project", and I've added my component as explain here: https://www.mikesdotnetting.com/article/338/using-razor-components-in-a-razor-page

After this, I've build and used my personal component. This as rendered correctly, but after added an @onclick event in a tag, this seem not work correctly (event not triggered)

Theoretically I've done all correct steps, and I've already check for a solution, but without success:

1. in my startup.cs:

in ConfigureServices: services.AddServerSideBlazor();

in Configure:

app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
                endpoints.MapBlazorHub();   
                endpoints.MapFallbackToPage("/_Host"); 
            });

2. [+]: Components folder
3. [+]: _Imports.razor inside my Components folder

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop

4. [+]: in my _Layout.cshtml (at the end of the Body TAG, after others script):

<script src="_framework/blazor.server.js"></script>

5. [+]: App.razor in the root of the project:

@using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <div class="alert alert-primary" role="alert">         
            <h1>Page Not Found</h1>
            <p>Sorry, but there's nothing here!</p>            
        </div>
    </NotFound>
</Router>

Now, my razor component (inside the Components folder):

@inherits LateralMenuComponent

@if (IsAuthenticate)
{
    <div class="mt-3"> 
        <div class="btn-group-vertical btn-group-toggle" role="toolbar" aria-label="Common Toolbar">
            <a type="button" class="btn btn-warning text-left" href=".\">
                <img src="src/dash.png" class="float-left pr-3" />
                Dashboard
                <span class="badge badge-light">@BadgeAlert</span>
            </a>
            @if (MenuItems != null)
            {
                foreach (var vitem in MenuItems)
                {
                    <a type="button" class="btn btn-secondary text-left" href="@vitem.Function.PagePath"
                       @onclick="UpdateHeading">  @* <--- [/!\] event trigger, pls note this! *@
                        <img src="src/@vitem.Function.ImageShort" 
                             class="float-left pr-3" />@vitem.Function.Label
                    </a>
                }                
            }
        </div>
    </div>
}

whit relative componentBase:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using System;
using System.Collections.Generic; 

namespace myAppWeb.Components
{
    public class LateralMenuComponent : ComponentBase
    {        
      [Parameter] public bool IsAuthenticate { get; set; }>           
      [Parameter] public List<MenuItem> MenuItems { get; set; }>     
      [Parameter] public short BadgeAlert { get; set; } = 3; // 3 => Draft, TO_DO!


      // [/!\] - This don't work!
        public void UpdateHeading(MouseEventArgs e)
        {
            Console.WriteLine(e);        
        }

    }
}

Are you able to help me understand what I'm doing wrong in my environment? Thanks in advance!

EDIT

As Vencovsky correctly suggested in a comment below, the problem was that I was using static rendering, so no clicks could be triggered in this case - a trivial problem, I know ...

Answer 1

You should pass @onclick:preventDefault

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

Working example on blazorfiddle.