Blazor MAUI混合应用中Checkbox的OnClick函数未调用致SQL更新失败

你遇到的核心问题是原生HTML的onclick是JavaScript事件，无法直接调用Blazor的C#方法，所以你的CheckOutEquipment函数根本没被执行，自然SQL表不会有变化。以下是具体修复方案：

1. 修复Checkbox的事件绑定 #

替换原生onclick为Blazor专属的指令，才能正确触发C#方法。推荐使用双向绑定同步UI和数据状态：

<th><input type="checkbox" @bind-checked="equipment.IsCheckedOut" @onchange="() => CheckOutEquipment(equipment)" /></th>

若不需要双向绑定，也可手动处理状态切换：

<th><input type="checkbox" checked="@equipment.IsCheckedOut" @onclick="() => ToggleCheckOut(equipment)" /></th>

2. 优化数据库操作逻辑 #

原代码存在SQL注入风险、连接资源泄漏、仅处理勾选状态的问题，修改后的C#函数如下：

public void CheckOutEquipment(Equipment equipment)
{
    // 根据当前勾选状态设置更新值
    int isCheckedOut = equipment.IsCheckedOut ? 1 : 0;

    var builder = new MySqlConnectionStringBuilder
    {
        Server = "localhost",
        UserID = "root",
        Password = "password",
        Database = "demo211",
    };

    // using语句自动释放连接，避免资源泄漏
    using var connection = new MySqlConnection(builder.ConnectionString);
    connection.Open();

    // 参数化查询防止SQL注入
    string updateSql = "UPDATE Equipment SET CheckedOut = @IsCheckedOut WHERE ID = @EquipmentId";
    using var updateCmd = new MySqlCommand(updateSql, connection);
    updateCmd.Parameters.AddWithValue("@IsCheckedOut", isCheckedOut);
    updateCmd.Parameters.AddWithValue("@EquipmentId", equipment.ID);

    updateCmd.ExecuteNonQuery();
}

如果用手动切换状态的写法，新增辅助函数：

public void ToggleCheckOut(Equipment equipment)
{
    // 先切换本地状态
    equipment.IsCheckedOut = !equipment.IsCheckedOut;
    // 执行数据库更新
    CheckOutEquipment(equipment);
}

3. 额外注意事项 #

• 确保Equipment类的IsCheckedOut属性为可读写，否则双向绑定无法生效。
• 建议将数据库操作改为异步方法，避免阻塞UI：把void改成async Task，调用await updateCmd.ExecuteNonQueryAsync()，事件绑定同步改为@onchange="async () => await CheckOutEquipment(equipment)"。

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