ASP.NET Core MVC Razor页面提交时如何获取复选框选中状态？

问题说明 #

开发ASP.NET Core MVC Razor页面时，需要在PageModel中准确获取每个复选框的选中状态：比如StockTake（值1）和ShelfLabelPrint（值2）选中时对应状态为true，Transfer（值3）未选中时为false。

现有代码 #

PageModel代码 #

public class AddUserAccessModel : PageModel
{
    [BindProperty]
    public UC.ADC.Core.Entities.SQL.UserAccess UserAccess { get; set; }
    public async Task OnPost(UC.ADC.Core.Entities.SQL.UserAccess useraccess)
    {
        string[] checkedModuleCodes = Request.Form["checks"];
        // 如何在此识别哪个复选框被选中或未被选中
    }
}

Razor视图（AddUserAccess.cshtml）代码 #

@Html.AntiForgeryToken()
<form method="post">
    <button  type="submit" class="col-sm-1 btn btn-primary">Submit</button>
    
    <div class="form-group row">
        <label for="user-id" class="col-sm-1 col-form-label" style="font-size:15px;font-family: 'Open Sans', sans-serif;font-weight: bold;">User ID</label>
        <div class="col-sm-3">
            <input id="useraccess-id"  asp-for="UserAccess.UserId" type="text" class="form-control" style=" margin-left:10px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;" />
        </div>
    </div>
    <input id="StockTake" name="checks" type="checkbox" asp-for="UserAccess.MODULECODE" value="1">
        <label for="lblStockTake">Stock Take</label>
    <input id="ShelfLabelPrint" name="checks" type="checkbox" asp-for="UserAccess.MODULECODE" value="2">
        <label for="lblShelfLabel">Shelf Label Print</label>

    <input id="Transfer" name="checks" type="checkbox" asp-for="UserAccess.MODULECODE" value="3">
        <label for="lblTransfer" style="margin-right:5px;">Transfer</label>
</form>

解决方案 #

方法一：使用模型绑定（推荐） #

这种方法符合ASP.NET Core的设计规范，代码更简洁易维护。

修改PageModel

添加对应每个复选框的bool属性并标记[BindProperty]，直接通过模型绑定获取选中状态：

public class AddUserAccessModel : PageModel
{
    [BindProperty]
    public UC.ADC.Core.Entities.SQL.UserAccess UserAccess { get; set; }

    [BindProperty]
    public bool StockTake { get; set; }

    [BindProperty]
    public bool ShelfLabelPrint { get; set; }

    [BindProperty]
    public bool Transfer { get; set; }

    public async Task<IActionResult> OnPost()
    {
        // 直接使用绑定后的属性判断选中状态
        bool isStockTakeChecked = StockTake;
        bool isShelfLabelPrintChecked = ShelfLabelPrint;
        bool isTransferChecked = Transfer;

        // 可选：根据选中状态组合MODULECODE值（如果需要存储到UserAccess中）
        int moduleCode = 0;
        if (StockTake) moduleCode |= 1;
        if (ShelfLabelPrint) moduleCode |= 2;
        if (Transfer) moduleCode |= 3;
        UserAccess.MODULECODE = moduleCode;

        // 后续保存等业务逻辑
        return Page();
    }
}

修改Razor视图

将每个复选框的asp-for绑定到对应的bool属性，移除手动设置的name="checks"（asp-for会自动生成正确的name）：

@Html.AntiForgeryToken()
<form method="post">
    <button type="submit" class="col-sm-1 btn btn-primary">Submit</button>
    
    <div class="form-group row">
        <label for="user-id" class="col-sm-1 col-form-label" style="font-size:15px;font-family: 'Open Sans', sans-serif;font-weight: bold;">User ID</label>
        <div class="col-sm-3">
            <input id="useraccess-id" asp-for="UserAccess.UserId" type="text" class="form-control" style=" margin-left:10px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;" />
        </div>
    </div>

    <input id="StockTake" type="checkbox" asp-for="StockTake" value="1">
    <label for="StockTake">Stock Take</label>

    <input id="ShelfLabelPrint" type="checkbox" asp-for="ShelfLabelPrint" value="2">
    <label for="ShelfLabelPrint">Shelf Label Print</label>

    <input id="Transfer" type="checkbox" asp-for="Transfer" value="3">
    <label for="Transfer" style="margin-right:5px;">Transfer</label>
</form>

方法二：通过Request.Form直接判断 #

如果不想修改PageModel结构，可以通过检查Request.Form中是否存在对应复选框的name来判断选中状态（未选中的复选框不会被提交到服务器）。

修改PageModel的OnPost方法

public async Task OnPost(UC.ADC.Core.Entities.SQL.UserAccess useraccess)
{
    bool isStockTakeChecked = Request.Form.ContainsKey("StockTake");
    bool isShelfLabelPrintChecked = Request.Form.ContainsKey("ShelfLabelPrint");
    bool isTransferChecked = Request.Form.ContainsKey("Transfer");

    // 后续业务逻辑处理
}

修改Razor视图

将每个复选框的name设置为各自的唯一标识（如id）：

@Html.AntiForgeryToken()
<form method="post">
    <button type="submit" class="col-sm-1 btn btn-primary">Submit</button>
    
    <div class="form-group row">
        <label for="user-id" class="col-sm-1 col-form-label" style="font-size:15px;font-family: 'Open Sans', sans-serif;font-weight: bold;">User ID</label>
        <div class="col-sm-3">
            <input id="useraccess-id" asp-for="UserAccess.UserId" type="text" class="form-control" style=" margin-left:10px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;" />
        </div>
    </div>

    <input id="StockTake" name="StockTake" type="checkbox" value="1">
    <label for="StockTake">Stock Take</label>

    <input id="ShelfLabelPrint" name="ShelfLabelPrint" type="checkbox" value="2">
    <label for="ShelfLabelPrint">Shelf Label Print</label>

    <input id="Transfer" name="Transfer" type="checkbox" value="3">
    <label for="Transfer" style="margin-right:5px;">Transfer</label>
</form>

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