使用jQuery Ajax给ASP.NET Core 6.0日历绑定时数组出现undefined问题

1. 确认后端返回数据的字段匹配性 #

数组出现undefined的核心原因是前端访问的字段在后端返回的JSON中不存在或名称不匹配。你需要：

• 在success回调内添加console.log(result)，打印完整返回数据，逐一核对每个对象的字段名是否与代码中的title、description、startDate、endDate完全一致（注意大小写、拼写，比如后端可能返回Title而非title）。

2. 修正字段映射 #

如果字段名不匹配，调整前端的字段访问逻辑：

$.each(result, function(i, data) {
  Booking.push({
    title: data.Title,    // 替换为后端实际返回的字段名
    description: data.Description,
    start: data.StartDate,
    end: data.EndDate
  });
});

3. 检查后端返回的数据结构 #

确保接口返回的是纯数组结构，而非嵌套在对象中的数组（比如{ "data": [...] }）。如果是嵌套结构，需调整遍历对象：

// 假设后端返回格式为 { "bookings": [...] }
$.each(result.bookings, function(i, data) { ... });

4. 完善日历数据绑定 #

当前GenerateCalendar函数未将Booking数组传入fullCalendar，需添加events配置：

function GenerateCalendar(Booking) {
  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next,today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    events: Booking // 将数据传入日历组件
  });
}

5. 精准调试技巧 #

• 遍历过程中打印单个data对象：console.log(data)，定位具体哪个字段为undefined；
• 在浏览器开发者工具的Network标签中查看Ajax请求的响应详情，确认返回JSON的正确性。

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