Blazor Server中Blazorise组件点击事件无法执行求助

以下是针对你遇到的Button点击事件既不输出控制台日志也不触发JS弹窗的排查和解决步骤：

1. 确认Blazorise的初始化配置是否完整 #

Blazor Server项目中必须正确配置Blazorise服务和中间件，否则组件事件可能无法正常工作：

• 在Program.cs中，确保添加了Blazorise服务注册：

builder.Services.AddBlazorise(options =>
{
    options.Immediate = true; // 部分场景下需开启此配置
})
.AddBootstrapProviders() // 根据你使用的主题调整，比如使用Material就换为AddMaterialProviders
.AddFontAwesomeIcons();

• 同时在中间件部分添加：

app.UseBlazorise();

2. 验证Blazorise组件的事件绑定语法 #

Blazorise的Button组件点击事件为Clicked，你的绑定语法本身没问题，但可以尝试显式传递参数的写法来排查：

<Button Clicked="@(() => OnUniClick())">
    <Figure Size="FigureSize.Is128x128" Rounded>
        <FigureImage Source="@Logo" AlternateText="@Name" />
        <FigureCaption>@Name</FigureCaption>
    </Figure>
</Button>

3. 检查浏览器控制台的JS错误 #

打开浏览器开发者工具（F12）的Console面板，查看是否存在资源加载或初始化错误：

• 未引入Blazorise的CSS/JS文件
• IJSRuntime初始化失败

如果有资源加载错误，确保在_Host.cshtml中正确引入对应主题的静态资源（以Bootstrap为例）：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/blazorise@1.2.4/dist/blazorise.bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/blazorise-icons@1.2.4/dist/blazorise-icons.min.css" rel="stylesheet" />

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/blazorise@1.2.4/dist/blazorise.bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/blazorise-icons@1.2.4/dist/blazorise-icons.min.js"></script>

4. 排查异步方法的执行问题 #

你的OnUniClick是async Task，可以临时改为async void（仅用于事件排查，不推荐常规使用）测试是否生效：

public async void OnUniClick()
{
    Console.WriteLine("Clicked");
    await _runtime.InvokeVoidAsync("alert", "This is a test alert");
}

如果改为async void后事件正常触发，说明可能存在异步上下文异常，此时需要检查组件是否处于正常渲染状态（比如是否被条件渲染隐藏、父组件是否存在未捕获的异常）。

5. 验证组件参数的传递是否正确 #

确保父组件在使用该自定义组件时，正确传递了Logo和Name参数，比如：

<YourCustomComponent Logo="/images/app-logo.png" Name="测试按钮" />

若参数未正确传递，可能导致组件未正常渲染，点击事件自然无法触发。

内容的提问来源于stack exchange，提问作者Derithus