ASP.NET Core MVC提交表单后选中复选框对应plans变量为null如何解决

问题根因 #

1. 核心原因：你的视图中使用了基于jQuery的JS代码，但没有引入jQuery库，导致$符号未定义，submit事件绑定失败，你写的表单提交逻辑完全不执行。选中复选框后对应的隐藏输入框无法被设置正确的name属性，表单提交时不会携带plans相关参数，后端模型绑定自然得到null值。
2. 次要问题：label的for属性拼写错误，导致点击标签无法正常选中对应的复选框，不影响提交但会降低使用体验。

解决办法 #

步骤1：引入jQuery库 #

确认你的MVC项目的公共布局文件_Layout.cshtml中已经引入了本地jQuery静态资源，或者在当前视图的<script>标签之前引入本地jQuery文件，确保$符号可以正常调用。

步骤2：（可选）优化JS提交逻辑 #

原有逻辑引入jQuery后即可正常运行，如果需要更稳妥的执行效果，可以调整JS代码确保逻辑执行完成后再提交表单：

$('form').submit(function (e) {
    // 先阻止默认提交
    e.preventDefault();
    var count = 0;
    $('input[type=checkbox]').each(function () {
        if (this.checked) {
            this.nextElementSibling.name = "plans[" + count + "].PlanId";
            this.nextElementSibling.nextElementSibling.name = "plans[" + count + "].PlanName";
            count++;
        }
    });
    // 处理完成后手动提交表单
    this.submit();
});

步骤3：修正label属性 #

将视图中label的for属性修正为和复选框id一致：

<label for="@Model.plans[i].PlanId"> @Model.plans[i].PlanName </label>

修改后点击标签即可正常选中对应的复选框。

完成以上修改后重新调试，JS断点即可正常触发，提交后后端plans字段就能正常获取到选中的套餐列表。

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