.NET 8 Blazor中Checkbox值始终为空的问题求助

1. 共享状态导致同步异常：所有复选框绑定了同一个IsChecked参数，点击任意一个复选框会让所有框的状态完全同步，且IsChecked作为组件参数，通常由父组件控制，直接绑定原生checked属性无法实现独立的状态更新。
2. 未获取单个复选框的状态与标识：@onchange方法未接收事件参数，无法获取当前复选框的选中状态和对应的用户ID，也就无法追踪具体哪个用户被选中。
3. 状态存储方式错误：单一布尔变量无法存储多个复选框的独立选中状态，导致无法区分每个用户的选择情况。

方案一：使用字典存储独立选中状态（原生input实现） #

@foreach (AppUser user in NonMembers)
{
    <tr>
        <td>@user.UserName</td>
        <td>
            <input type="checkbox" 
                   value="@user.Id" 
                   checked="@(UserSelections.TryGetValue(user.Id, out var isChecked) ? isChecked : false)" 
                   @onchange="(e) => HandleCheckboxChange(user.Id, e.Value)" />
        </td>
    </tr>
}

@code {
    [Parameter]
    public List<AppUser> NonMembers { get; set; } = new();

    // 用字典存储每个用户的选中状态，键为用户ID，值为选中状态
    private Dictionary<string, bool> UserSelections { get; set; } = new();

    private void HandleCheckboxChange(string userId, object? checkedValue)
    {
        if (bool.TryParse(checkedValue?.ToString(), out bool isChecked))
        {
            if (UserSelections.ContainsKey(userId))
                UserSelections[userId] = isChecked;
            else
                UserSelections.Add(userId, isChecked);
            
            // 这里可以添加选中后的业务逻辑，比如输出选中信息
            Console.WriteLine($"用户 {userId} 选中状态：{isChecked}");
        }
    }
}

方案二：使用Blazor原生InputCheckbox组件（更符合Blazor范式） #

@foreach (AppUser user in NonMembers)
{
    <tr>
        <td>@user.UserName</td>
        <td>
            <InputCheckbox @bind-Value="@UserSelections[user.Id]" 
                           @onchange="() => OnUserSelectionUpdated(user.Id)" />
        </td>
    </tr>
}

@code {
    [Parameter]
    public List<AppUser> NonMembers { get; set; } = new();

    private Dictionary<string, bool> UserSelections { get; set; } = new();

    protected override void OnInitialized()
    {
        // 初始化所有用户的选中状态为未选中
        foreach (var user in NonMembers)
        {
            if (!UserSelections.ContainsKey(user.Id))
                UserSelections.Add(user.Id, false);
        }
    }

    private void OnUserSelectionUpdated(string userId)
    {
        bool isChecked = UserSelections[userId];
        Console.WriteLine($"用户 {userId} 选中状态：{isChecked}");
    }
}

• 若需要将选中的用户列表传递给父组件，可将UserSelections或筛选后的选中ID列表设为[Parameter]，并使用Blazor双向绑定语法（@bind-UserSelections）实现父子组件状态同步。
• [SupplyParameterFromForm]特性用于表单提交时从表单数据绑定参数，不适用于交互性的复选框状态更新场景。

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