完整日历 (v4) 无法使用有效的 JSON

Question

我希望有人可以在使用 Json 选项时帮助 FullCalendar (v4( 不加载事件。当相同的数据被硬编码为事件时，它工作正常。

生成的 Json 是有效的 - 即 它使用 https://jsoncompare.com 进行验证

我花了大量的时间试图自己解决这个问题，我碰壁了 - 所以是时候寻求帮助了。

我尝试使用内置的Net Json序列化程序 - 但这会产生错误的日期格式，所以我也尝试了Newtonsoft Json.net，它确实为FullCallendar生成了正确的日期格式，但仍然不会加载事件。

使用 JSON 时没有 JS 控制台错误，它只是不会加载到日历中。JSON 来自同一域(即不受跨域问题的影响(。

任何帮助/建议将非常受欢迎，谢谢。

当事件被硬编码时，这非常有效：

var calendar = new FullCalendar.Calendar(calendarEl,
{
plugins: ['interaction', 'dayGrid', 'timeGrid'],
defaultDate: new Date(),
defaultView: 'timeGridWeek',
minTime: '07:00:00',
maxTime: '22:00:00',
timeZone: 'local',
header: {
left: 'prev,next today',
center: 'title',
right: 'timeGridDay,timeGridWeek,dayGridMonth'
},
events: [ //hardcoded events load just fine
{
id: '12',
title: 'Event Name',
start: '2019-08-28T08:00:00',
end: '2019-08-28T08:30:00'
}
]
});
calendar.render();
}

使用 JSON 选项时，它不起作用：

//JSON provided events do not load
events: {
url:'/CourseTimetable/GetAllEventsAsJson' 
}

提供源的替代方式(不带大括号和"url："前缀(：

events:'/CourseTimetable/GetAllEventsAsJson' 

URL 工作正常 - 验证为 JSON - 并且不会生成任何错误 - 它产生：

"[{"id":12,"title":"Event 1","start":"2019-08-29T08:00:00","end":"2019-08-29T08:30:00"}]"

标题和代码信息：

Content-Type: application/json; charset=utf-8
Referer: http://localhost:54928/CourseTimetable
Request Method: GET
Status Code: 200 OK
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin

提前感谢您的任何帮助/建议:)

下面是两个备用控制器版本(使用标准 .net，然后使用 json.net(

标准网

public JsonResult GetAllEventsAsJson(DateTime? start = null, DateTime? end = null)
{
var events = db.CourseTimetables.Where(p => p.StartTime >= start && p.EndTime <= end)
.Select(s => new
{
id = s.Id,
title = s.Title,
start = s.StartTime,
end = s.EndTime
}).ToList();
//using built in .NET serialiser
return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}

上述操作的输出(主要区别在于输出日期和转义(：

[{"id":12,"title":"Event 1","start":"/Date(1567062000000)/","end":"/Date(1567063800000)/"},{"id":13,"title":"Event 2","start":"/Date(1567148400000)/","end":"/Date(1567150200000)/"}]

Json.Net 版本

public ActionResult GetAllEventsAsJson(DateTime? start = null, DateTime? end = null)
{
var events = db.CourseTimetables.Where(p => p.StartTime >= start && p.EndTime <= end)
.Select(s => new
{
id = s.Id,
title = s.Title,
start = s.StartTime,
end = s.EndTime
}).ToList();
//USING JSON.NET
string jsonData = JsonConvert.SerializeObject(events);
return Json(jsonData, JsonRequestBehavior.AllowGet);
}

上述操作的输出(日期采用正确的 ISO 格式(：

"[{"id":12,"title":"Event 1","start":"2019-08-29T08:00:00","end":"2019-08-29T08:30:00"},{"id":13,"title":"Event 2","start":"2019-08-30T08:00:00","end":"2019-08-30T08:30:00"}]"

Answer 1

这种格式："[{"id":12,"title":"Event 1","start":...等等就是问题所在。您正在对数据进行双重序列化。看到那些外引号("(和斜杠吗？外部引号表示您返回一个简单的字符串作为响应(这是有效的 JSON，但解析器将被视为纯文本(，斜杠是必须转义字符串中的引号的结果。因此，内部数据虽然看起来像 JSON，但客户端解析器不会将其视为 JSON。相反，整个事情只是被视为一个大字符串，其中没有对象、属性等。

在 MVC ASP.NET 中，return Json...希望您为其提供一个对象。然后，它会自动将其序列化为 JSON。在传入之前，无需对其进行序列化。只需删除该代码并将events直接发送到Json()方法：

public ActionResult GetAllEventsAsJson(DateTime? start = null, DateTime? end = null)
{
var events = db.CourseTimetables.Where(p => p.StartTime >= start && p.EndTime <= end)
.Select(s => new
{
id = s.Id,
title = s.Title,
start = s.StartTime,
end = s.EndTime
}).ToList();
return Json(events, JsonRequestBehavior.AllowGet);
}

附言您使用的是哪个版本的 MVC？无论如何，较新的受支持版本都使用 JSON.NET 作为默认序列化程序，因此没有理由必须手动执行此操作。如果您有一个旧版本的 MVC(看起来您可能拥有它，因为它正在产生那些奇怪的日期格式，例如Date(1567062000000)(，并且由于某种原因无法升级，有一些方法可以使它默认使用 JSON.NET。或者，您可以使用 JSON.NET 自己进行序列化，然后从操作方法返回一个纯字符串。

附言上述方法的另一种方法是在fullCalendar中使用momentJS插件，然后允许您使用momentJS来解析日期 - momentJS包括解析ASP的能力。NET 的旧日期格式。