Blazor Server中如何捕获复选框用户修改并绑定选中状态？

1. 完善数据模型（新增选中状态管理） #

首先给MyObject添加选中状态属性，同时区分自动同步和用户手动修改的场景，避免输入变更时覆盖用户的手动选择：

namespace CheckBoxTest.Data
{
    public class MyObject
    {
        private string _myProperty = string.Empty;
        public string MyProperty 
        { 
            get => _myProperty; 
            set 
            {
                _myProperty = value;
                // 仅当用户未手动修改过选中状态时，自动同步有效状态
                if (!IsSelectedManuallyModified)
                {
                    IsSelected = IsValid;
                }
            }
        }
        public bool IsValid => MyProperty.Length >= 4;

        // 存储用户的勾选状态
        public bool IsSelected { get; set; }
        // 标记用户是否手动修改过选中状态
        public bool IsSelectedManuallyModified { get; set; }
    }
}

2. 调整Razor页面，实现复选框绑定与状态更新 #

修改页面中的复选框绑定逻辑，捕获用户操作，同时优化输入框的同步逻辑：

@using CheckBoxTest.Data
@page "/"

<PageTitle>Index</PageTitle>

<EditForm Model="_myObjects" OnValidSubmit="SaveMyObjectsAsync">
    <div class="form-group">
        <label for="myProperty">MyProperty</label>
        <!-- 使用绑定后的回调事件同步所有对象属性 -->
        <InputText id="myProperty" 
                   @bind-Value="_myProperty" 
                   @bind-Value:after="UpdateAllMyObjects" 
                   class="form-control" 
                   placeholder="(Please enter some text here...)"/>
    </div>

    <div class="col">
        <br />
        MyObjetsTable
        <br />

        <table class="table">
            <thead>
                <tr>
                    <th style="width: 15px;"></th>
                    <th>MyProperty</th>
                </tr>
            </thead>
            <tbody>
                @foreach (MyObject myObject in _myObjects)
                {
                    <tr>
                        <td>
                            <!-- 双向绑定选中状态，点击时标记用户手动操作 -->
                            <input type="checkbox" 
                                   @bind="myObject.IsSelected"
                                   @onclick="@(() => myObject.IsSelectedManuallyModified = true)"
                                   disabled="@(!myObject.IsValid)"/>
                            <!-- 禁用无效对象的复选框，避免无效提交 -->
                        </td>
                        <td>@myObject.MyProperty</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
    <p>
        <button type="submit" class="btn btn-primary oi oi-data-transfer-upload">提交</button>
    </p>
</EditForm>

@code {
    private string _myProperty = string.Empty;
    private List<MyObject> _myObjects = new();

    protected override Task OnInitializedAsync()
    {
        CreateMyObjects();
        return base.OnInitializedAsync();
    }

    private void CreateMyObjects()
    {
        for (int i = 0; i < 10; i++)
        {
            _myObjects.Add(new MyObject());
        }
    }

    // 同步输入框内容到所有对象的MyProperty
    private void UpdateAllMyObjects()
    {
        foreach (MyObject myObject in _myObjects)
        {
            myObject.MyProperty = _myProperty;
        }
    }

    private async Task SaveMyObjectsAsync()
    {
        // 筛选有效且被选中的对象
        List<MyObject> _myObjectsToSave = _myObjects.Where(o => o.IsValid && o.IsSelected).ToList();

        // 执行保存逻辑
        // await MySaveLogic.ExecuteAsync(_myObjectsToSave);
        
        // 提交后重置手动修改标记，以便下次输入变更时重新自动同步
        foreach (var obj in _myObjects)
        {
            obj.IsSelectedManuallyModified = false;
        }
    }
}

3. 核心逻辑说明 #

• 选中状态保护：通过IsSelectedManuallyModified标记，确保用户手动取消的勾选不会被后续输入变更自动覆盖。
• 复选框交互：使用Blazor双向绑定@bind="myObject.IsSelected"捕获用户勾选操作，@onclick事件标记手动修改状态。
• 无效对象限制：给复选框添加disabled="@(!myObject.IsValid)"，禁止用户勾选不符合校验规则的对象。
• 提交筛选：通过Linq直接筛选IsValid且IsSelected的对象，简化提交逻辑。

额外优化建议 #

• 如需更复杂的验证规则，可以给MyObject添加DataAnnotations验证属性，配合EditForm的DataAnnotationsValidator实现表单级校验。
• 若对象数量较多，可将表格行封装为独立组件，提升页面性能和代码可维护性。

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