C# Razor Pages中AJAX提交复选框值的模型绑定问题

核心问题原因 #

后端[FromBody]绑定JSON格式数据时，bool类型要求传入的是布尔值true/false，但通过FormData获取的复选框值是字符串"true"，导致JSON反序列化失败，最终model参数为null。直接用JSON.parse(value)会把所有值为"true"/"false"的字段（包括文本框）都转成布尔值，不符合业务需求。

最优解决方法：区分表单元素类型处理 #

修改前端的FormToJSON函数，直接遍历表单元素而非依赖FormData，根据元素类型分别处理：复选框取checked属性的布尔值，其他元素保留原始值。

this.FormToJSON = form => {
    const json = {};
    // 遍历所有表单元素
    Array.from(form.elements).forEach(element => {
        // 跳过防伪令牌和无name属性的元素
        if (element.name === "__RequestVerificationToken" || !element.name) return;
        
        if (element.type === 'checkbox') {
            // 复选框直接取选中状态的布尔值
            json[element.name] = element.checked;
        } else {
            // 其他元素保留原始字符串值
            json[element.name] = element.value;
        }
    });
    return json;
}

补充说明 #

• 这种方式能精准区分复选框和其他输入控件，既满足后端bool类型的绑定需求，又不会影响文本框等控件的字符串值传递。
• 提交AJAX请求时，记得设置请求头Content-Type: application/json，确保后端能正确解析JSON格式的请求体。

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