如何通过ViewModel将View中的Checkbox值传递到Action

1. 定义承载复选框值的ViewModel #

根据你的业务需求在ViewModel中声明对应属性：单个复选框用bool类型，多选复选框组用List<T>类型（T为选项对应的值类型，比如int、string），也可以把可选选项列表一并存入ViewModel方便视图渲染。
示例代码：

public class SubmitViewModel
{
    // 单个复选框绑定属性，例：是否同意用户协议
    public bool AgreeProtocol { get; set; }
    
    // 多选复选框组绑定属性，例：选中的标签ID列表
    public List<int> SelectedTagIds { get; set; } = new();
    
    // 可选标签列表，用于视图渲染所有可选选项
    public List<TagOption> TagOptions { get; set; } = new();
}

public class TagOption
{
    public int Id { get; set; }
    public string TagName { get; set; }
}

2. 视图层绑定复选框 #

Razor视图直接用asp-for绑定对应属性即可，多选组需要保持所有复选框的name属性和ViewModel中对应集合属性的名称一致。

单个复选框绑定示例 #

@model SubmitViewModel

<form asp-action="HandleSubmit" method="post">
    <div class="checkbox-item">
        <input asp-for="AgreeProtocol" id="agree" />
        <label for="agree">同意用户服务协议</label>
    </div>
    <button type="submit">提交表单</button>
</form>

多选复选框组绑定示例 #

@model SubmitViewModel

<form asp-action="HandleSubmit" method="post">
    @foreach (var tag in Model.TagOptions)
    {
        <div class="checkbox-item">
            <input type="checkbox" name="SelectedTagIds" value="@tag.Id" 
                   @(Model.SelectedTagIds.Contains(tag.Id) ? "checked" : "") id="tag_@tag.Id" />
            <label for="tag_@tag.Id">@tag.TagName</label>
        </div>
    }
    <button type="submit">提交表单</button>
</form>

3. Action方法接收参数 #

在操作方法中直接将ViewModel作为入参，ASP.NET框架会自动完成复选框值到ViewModel属性的绑定：

public IActionResult HandleSubmit(SubmitViewModel model)
{
    // 直接取值即可
    bool userAgreed = model.AgreeProtocol;
    List<int> selectedTags = model.SelectedTagIds;
    
    // 后续业务逻辑处理
    return View();
}

• 未选中的bool类型复选框提交后默认值为false，无需额外处理空值
• 多选组如果没有选中任何选项，提交后对应集合属性为空集合，可根据业务需要补充非空校验
• 不要手动修改asp-for自动生成的name属性，否则会导致绑定失败

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