C# - 在 Razor 页面中使用 Razor 组件 - @onclick 事件不起作用

Question

我有一个现有的“Razor 页面 Web 项目”，并且我已经添加了我的组件，如下所述： https://www.mikesdotnetting.com/article/338/using-razor-components-in-a-razor-page

在此之后，我构建并使用了我的个人组件。这是正确呈现的，但是在标签中添加了 @onclick 事件后，这似乎无法正常工作（事件未触发）

理论上我已经完成了所有正确的步骤，并且我已经检查了解决方案，但没有成功：

1. 在我的 startup.cs 中：

在ConfigureServices中：services.AddServerSideBlazor();

在配置中：

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

1. [+]：组件文件夹
2. [+]：_Imports.razor 在我的组件文件夹中

@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. [+]：在我的 _Layout.cshtml 中（在 Body TAG 的末尾，在其他脚本之后）：

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

5. [+]：项目根目录下的 App.razor：

@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>

现在，我的剃须刀组件（在 Components 文件夹中）：

@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>
}

相对组件基础：

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);        
        }

    }
}

您能否帮助我了解我在环境中做错了什么？ 提前致谢！

编辑

正如 Vencovsky 在下面的评论中正确建议的那样，问题在于我使用的是 静态 渲染，因此在这种情况下不会触发任何点击 - 我知道这是一个微不足道的问题......

Answer 1

你应该通过@onclick:preventDefault

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

blazorfiddle 上的工作示例。