Blazor Server中MudBlazor按钮无法触发AddVerse函数问题求助

架构老林

2026-6-25

问题分析与解决方案

核心原因：事件绑定语法错误

你的按钮使用了@OnClick（大写O）绑定点击事件，但Blazor中DOM事件绑定的正确语法是小写开头的@onclick，大写的@OnClick无法触发Blazor的事件处理逻辑，这是AddVerse函数不执行的直接原因。

修复步骤

将绑定AddVerse的按钮代码修改为：

<MudButton @onclick="AddVerse" Variant="Variant.Filled" Color="Color.Primary" Class="mt-2">Sélectionner le(s) verset(s)</MudButton>

如果需要通过lambda表达式传递参数（当前场景不需要），也需使用小写的@onclick：

<MudButton @onclick="@(() => AddVerse())" Variant="Variant.Filled" Color="Color.Primary" Class="mt-2">Sélectionner le(s) verset(s)</MudButton>

额外排查点

表单验证影响：虽然该按钮不是提交类型，但如果EditForm内的控件存在未通过的验证规则（比如Book字段未选择），可检查CommentDto的DataAnnotations配置，确认是否有强制验证规则意外阻塞交互。
异步方法适配：如果JerusalemBibleService.GetVerse是异步方法，需将AddVerse改为异步方法并使用await，否则可能导致UI无响应：

private async Task AddVerse()
{
    InProgress = true;
    try
    {
        model.Verses += await JerusalemBibleService.GetVerseAsync(Book, Chapter, FirstVerse, LastVerse);
    }
    catch (Exception ex)
    {
        ErrorMessage = ex.Message;
    }
    InProgress = false;
}