Blazor WebAssembly：如何将复选框列表值绑定到模型

1. 确认模型字段定义与初始化 #

首先检查ProductForm的StateExceptions字段：

• 如果需要收集选中项的ID（推荐，提交更高效），定义为：

  public class ProductForm
  {
      // 其他字段
      public List<int> StateExceptions { get; set; } = new List<int>(); // 必须初始化集合
  
      // 构造函数初始化（可选，确保集合不为null）
      public ProductForm()
      {
          StateExceptions = new List<int>();
      }
  }
  

• 如果需要收集完整的选中实体，定义为List<CheckboxPairing>，同样要初始化集合。

2. 正确绑定复选框到模型 #

根据StateExceptions的类型，选择对应的绑定方式：

方式一：直接绑定到ID集合（推荐） #

假设AvailableStates是页面中加载的可选状态列表（List<CheckboxPairing>），复选框绑定写法：

@foreach (var state in AvailableStates)
{
    <div class="form-check">
        <input type="checkbox" 
               class="form-check-input" 
               id="state-@state.Id"
               @bind="ProductForm.StateExceptions" 
               @bind:after="() => ProductForm.StateExceptions = ProductForm.StateExceptions.Distinct().ToList()"
               value="@state.Id" />
        <label class="form-check-label" for="state-@state.Id">@state.Name</label>
    </div>
}

• @bind="ProductForm.StateExceptions"：Blazor会自动将选中的ID添加到集合，取消选中时移除。
• @bind:after：处理重复添加的问题，确保集合中ID唯一。

方式二：通过实体的IsSelected属性收集 #

如果CheckboxPairing包含IsSelected属性：

public class CheckboxPairing
{
    public int Id { get; set; }
    public string Name { get; set; }
    public bool IsSelected { get; set; }
}

复选框绑定写法：

@foreach (var state in AvailableStates)
{
    <div class="form-check">
        <input type="checkbox" 
               class="form-check-input" 
               id="state-@state.Id"
               @bind="state.IsSelected" />
        <label class="form-check-label" for="state-@state.Id">@state.Name</label>
    </div>
}

然后在提交表单前，手动将选中项赋值给StateExceptions：

private async Task HandleSubmit()
{
    // 收集选中的ID到模型字段
    ProductForm.StateExceptions = AvailableStates
        .Where(s => s.IsSelected)
        .Select(s => s.Id)
        .ToList();

    // 提交到控制器
    var response = await Http.PostAsJsonAsync("/api/Products/Create", ProductForm);
    // 后续处理逻辑
}

3. 检查表单提交配置 #

确保使用EditForm正确绑定模型，并在OnValidSubmit中处理提交：

<EditForm Model="@ProductForm" OnValidSubmit="@HandleSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <!-- 其他表单字段（文本框、下拉框等） -->
    <div class="mb-3">
        <label class="form-label">产品名称</label>
        <InputText class="form-control" @bind-Value="ProductForm.ProductName" />
    </div>

    <!-- 复选框列表区域 -->
    <div class="mb-3">
        <label class="form-label">例外状态</label>
        <!-- 这里放上面的复选框代码 -->
    </div>

    <button type="submit" class="btn btn-primary">提交</button>
</EditForm>

4. 验证控制器接收逻辑 #

确保后端控制器的Action参数与前端模型匹配：

[ApiController]
[Route("api/[controller]")]
public class ProductsController : ControllerBase
{
    [HttpPost("Create")]
    public async Task<IActionResult> Create([FromBody] ProductForm model)
    {
        // 这里可以检查model.StateExceptions是否有值
        if (model.StateExceptions == null || !model.StateExceptions.Any())
        {
            // 处理空值情况
        }
        // 业务逻辑处理
        return Ok();
    }
}

常见错误排查 #

• 未初始化StateExceptions集合：如果集合为null，Blazor无法添加选中项，必须在模型构造函数或字段初始化时赋值为new List<int>()。
• 复选框value属性类型不匹配：如果绑定到List<int>，value必须是整数的字符串形式（如@state.Id），不能是字符串类型的ID（除非模型字段是List<string>）。
• 提交前未手动收集选中项：如果用方式二，必须在HandleSubmit中手动将选中项赋值给模型字段，否则提交时StateExceptions为空。

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