AJAX提交FullCalendar事件到.NET时后端参数为null

后端接收到参数为null是三个问题叠加导致的：

• 前端提交的是事件对象数组，后端Action定义的是单个AgendaAJAX对象作为接收参数，数据结构不匹配导致反序列化失败
• .NET 后端处理application/json类型的请求时，必须给参数添加[FromBody]特性，否则框架默认从表单字段取值，不会解析请求体里的JSON内容
• 直接调用JSON.stringify(calendar.getEvents())序列化的是FullCalendar的EventApi实例，不是普通JS对象，会附带大量框架内部冗余字段，时间字段也不是标准可解析格式，进一步导致反序列化异常

前端代码调整 #

修改自定义保存按钮的点击逻辑，手动提取需要的事件字段，将时间转为标准ISO格式后再序列化提交：

enregistrermodifs: {
    text: 'enregistrer',
    click: function() {
        // 从FullCalendar事件实例中提取需要的字段，过滤冗余内部属性
        var eventData = calendar.getEvents().map(item => ({
            title: item.title,
            start: item.start?.toISOString(), // 转为标准UTC时间字符串，适配.NET DateTime解析
            end: item.end?.toISOString()
        }));

        $.ajax({
            type: 'POST',
            url: '@Url.Action("MAJAgenda","Agenda")',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(eventData),
            success: function(result) {
                alert('Enregistrement réussi');
                console.log(result);
            },
            error: function() {
                alert('Erreur : enregistrement non effectué');
                console.log('Request failed');
            }
        });
    }
}

后端代码调整 #

修改Action方法的参数定义，添加[FromBody]特性，将参数类型改为集合类型匹配前端提交的数组结构：

[HttpPost]
public async Task<IActionResult> MAJAgenda([FromBody] List<AgendaAJAX> agendaList)
{
    // 此处agendaList即可正常获取前端提交的所有事件数据
    string userID = User.FindFirstValue(ClaimTypes.NameIdentifier);
    // 后续业务逻辑编写
    return View("Agenda");
}

• 提交时请求体的JSON结构为纯数组，每个元素仅包含title、start、end三个字段，无多余冗余属性
• 时间字段为2024-05-20T08:00:00.000Z格式的标准ISO时间字符串，可被.NET 直接反序列化为DateTime类型
• Action参数上必须添加[FromBody]，否则JSON数据不会被框架映射

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