.NET Core 7 Razor页面如何获取未勾选复选框列表？

HTML表单默认仅提交已勾选的复选框值，未勾选的不会发送任何数据到后端，可通过以下方案收集未勾选的复选框值：

方案一：后端对比全量模块值（最简实现） #

已知所有模块代码为1、2、3，后端通过对比全量值与提交的勾选值，直接计算出未勾选的项：

1. 在PageModel中定义全量模块代码数组：

private readonly int[] _allModuleCodes = { 1, 2, 3 };

2. 在OnPost方法中计算未勾选值：

public async Task OnPost(UserAccessViewModel UserAccessViewModel)
{
    // 获取提交的勾选值，无勾选时为空数组
    var checkedValues = UserAccessViewModel.checks ?? Array.Empty<int>();
    // 筛选全量中不在勾选列表的值，即为未勾选项
    var uncheckedValues = _allModuleCodes.Except(checkedValues).ToArray();

    // 后续处理uncheckedValues即可
}

此方案无需修改前端代码，仅需后端逻辑处理，适合模块数量固定的场景。

方案二：前端JS收集未勾选值（动态场景适用） #

通过JavaScript在表单提交前收集所有未勾选的复选框值，存入隐藏字段提交到后端：

1. 表单中添加隐藏字段：

@Html.AntiForgeryToken()
<form method="post">
    <button id="FillCheckBox" type="submit" class="col-sm-1 btn btn-primary">Submit</button>
  
    <!-- 原有复选框保留 -->
    <input id="StockTake" name="UserAccessViewModel.checks" type="checkbox" value="1">
    <label for="StockTake">Stock Take</label>
    <input id="ShelfLabelPrint" name="UserAccessViewModel.checks" type="checkbox" value="2">
    <label for="ShelfLabelPrint">Shelf Label Print</label>
    <input id="Transfer" name="UserAccessViewModel.checks" type="checkbox" value="3">
    <label for="Transfer" style="margin-right:5px;">Transfer</label>

    <!-- 新增隐藏字段存储未勾选值 -->
    <input type="hidden" name="UncheckedChecks" id="UncheckedChecks" />
</form>

2. 添加表单提交监听脚本：

<script>
document.querySelector('form').addEventListener('submit', function(e) {
    // 筛选未勾选的目标复选框
    const uncheckedBoxes = document.querySelectorAll('input[name="UserAccessViewModel.checks"]:not(:checked)');
    // 提取未勾选框的value值组成数组
    const uncheckedValues = Array.from(uncheckedBoxes).map(box => box.value);
    // 将数组转为JSON字符串存入隐藏字段
    document.getElementById('UncheckedChecks').value = JSON.stringify(uncheckedValues);
});
</script>

3. 在ViewModel中添加接收属性：

public class UserAccessViewModel
{
    public UserAccess userAccess { get; set; }
    public int[] checks { get; set; }
    public string UncheckedChecks { get; set; }
}

4. 后端解析未勾选值：

using System.Text.Json;

public async Task OnPost(UserAccessViewModel UserAccessViewModel)
{
    var uncheckedValues = JsonSerializer.Deserialize<int[]>(UserAccessViewModel.UncheckedChecks);
    // 处理未勾选值
}

方案三：强类型绑定优化（推荐长期维护） #

重构ViewModel和前端绑定逻辑，使用强类型列表存储模块状态，确保所有模块的勾选状态都能被提交：

1. 重构ViewModel：

public class UserAccessViewModel
{
    public UserAccess UserAccess { get; set; }
    public List<ModuleAccess> ModuleAccesses { get; set; } = new();
}

public class ModuleAccess
{
    public int ModuleCode { get; set; }
    public string ModuleName { get; set; } = string.Empty;
    public bool IsChecked { get; set; }
}

2. PageModel的OnGet方法初始化模块列表：

public void OnGet()
{
    UserAccessViewModel.ModuleAccesses = new List<ModuleAccess>
    {
        new() { ModuleCode = 1, ModuleName = "Stock Take" },
        new() { ModuleCode = 2, ModuleName = "Shelf Label Print" },
        new() { ModuleCode = 3, ModuleName = "Transfer" }
    };
}

3. 前端页面循环生成复选框（强类型绑定）：

@model UserAccessViewModel

@Html.AntiForgeryToken()
<form method="post">
    <button id="FillCheckBox" type="submit" class="col-sm-1 btn btn-primary">Submit</button>
    
    @for (int i = 0; i < Model.ModuleAccesses.Count; i++)
    {
        <div>
            <input type="checkbox" asp-for="ModuleAccesses[i].IsChecked" />
            <label asp-for="ModuleAccesses[i].IsChecked">@Model.ModuleAccesses[i].ModuleName</label>
            <!-- 隐藏字段确保模块代码和名称被提交 -->
            <input type="hidden" asp-for="ModuleAccesses[i].ModuleCode" />
            <input type="hidden" asp-for="ModuleAccesses[i].ModuleName" />
        </div>
    }
</form>

4. 后端直接筛选未勾选项：

public async Task OnPost(UserAccessViewModel UserAccessViewModel)
{
    var uncheckedModules = UserAccessViewModel.ModuleAccesses
        .Where(m => !m.IsChecked)
        .Select(m => m.ModuleCode)
        .ToArray();

    // 处理未勾选的模块代码
}

此方案代码结构清晰，易于扩展模块数量，符合Razor页面的最佳实践。

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