C# Blazor 按钮(button)的onclick事件没有被触发

在一个Blazor组件（ServerComponent.razor）中，有以下代码：

<button type="button" class="btn btn-primary" @onclick="Change">ChangeStatus</button>

但是在@code部分没有定义Change方法，上面代码也不会报错。如果定义了，那么执行的时候，点击按钮，也没有任何反应。

打开F12，查看网络，点击按钮时没有任何数据，控制台也没有任何报错。

定位该按钮元素，发现为<button type="button" @onclick="Change">ChangeStatus</button>。（正常情况下，应该为：<button type="button">ChangeStatus</button>）。

 

最后发现，组件所在路径不对。ServerComponent.razor在Controls文件夹中，Controls文件夹与Components文件夹平级，而_Imports.razor文件位于Components文件夹中。

image

 

所以，Controls文件夹里面没有_Imports.razor文件，也就没有相关的名称空间，那么ServerComponent.razor中的 @onclick 指令没有被正确识别。

 

解决办法：

方案一：

在现在的ServerComponent.razor中添加名称空间的引用：

@using Microsoft.AspNetCore.Components.Web

方案二：

把Contols文件夹移入Components文件夹内，使它在_Imports.razor作用域下。

 

 

注：要启用 InteractiveServer ，需要3步：

1、在Program.cs 中注册服务：AddInteractiveServerComponents()

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

2、在Program.cs 中 启用 InteractiveServer：AddInteractiveServerRenderMode()

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

3、在组件中使用@rendermode 指令。有两种类别

1）组件级别：可以在三个不同的地方指定

a）在组件定义中使用：

@rendermode InteractiveServer

b）在组件实例中使用（推荐这种方式，你可以自由的为每个组件指定不同的交互方式）：

<Counter @rendermode="InteractiveServer" />

 c)在父组件的定义中使用：

@rendermode InteractiveServer

如果在父组件中指定了@rendermode指令，那么该组件及其所有子组件都将开启交互式。

2）全局级别：

在App.razor中的Routes组件中指定 @rendermode 指令。整个应用程序都将受其影响。

<body>
    <Routes @rendermode="InteractiveServer"/>
    <script src="_framework/blazor.web.js"></script>
</body>

 

posted @ 2026-02-04 23:00  竹楼风雨声  阅读(9)  评论(0)    收藏  举报