c# - 来自 JSON 提要的 FullCalendar 事件未显示

问题描述

我的页面上有这段 FullCalendar 代码部分，用于从 Razor Pages 项目中的 API 控制器提取事件：

    var calendar;
        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');
            calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['dayGrid', 'interaction', 'list', 'timeGrid'],
                defaultView: 'dayGridMonth',
                customButtons: {
                    newEventButton: {
                        text: 'new event',
                        click: function () {
                            window.location.assign("Calendars/EditPersonnelEvent/0");
                        }
                    }
                },
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'newEventButton,dayGridMonth,timeGridWeek,timeGridDay'
                },
                events: "/api/fetchEvents"
            });
            calendar.render();
        })

它似乎工作得很好，这是获取的片段：

问题是，获取的事件不会显示在日历上，也不会显示在任何视图上。当我将该 JSON 粘贴到一个硬编码的事件中时，它工作正常并且我看到了该事件，只是当它来自 GET 时却没有。我已经用 eventSources 试过了，但无济于事。我在这里搜索了大约 30 个不同的答案，但仍然没有运气。JSON 似乎格式正确，似乎被正确获取，只是没有显示出来。是的，我正在寻找正确的日子；）

要求更新：

这是“响应”数据：

这是此获取的 .NET 代码：

    [Route("api/fetchEvents")]
        [ApiController]
        public class FetchEventsController : ControllerBase
        {
            private readonly IPersonnelEventService _personnelEventService;

            public FetchEventsController(IPersonnelEventService personnelEventService)
            {
                _personnelEventService = personnelEventService;
            }

            // GET: api/FetchEvents/5
            [HttpGet]
            public string Get(string start, string end)
            {
                int currentUserId = User.Identity.GetUserId();
                DateTime objStart = DateTime.Parse(start, null, System.Globalization.DateTimeStyles.RoundtripKind);
                DateTime objEnd = DateTime.Parse(end, null, System.Globalization.DateTimeStyles.RoundtripKind);
                List<Entities.PersonnelEvent> events = new List<Entities.PersonnelEvent>(_personnelEventService.GetPersonnelEventsByUserId(currentUserId, objStart, objEnd));
                return JsonConvert.SerializeObject(events.Select(pe => pe.GetEventAsFullCalendarJson()).ToList());

            }
        }

这是“GetEventAsFullCalendarJson”的代码：

    public string GetEventAsFullCalendarJson()
            {
                var info = new
                {
                    title = Name,
                    start = StartDate,
                    end = EndDate
                };
                return JsonConvert.SerializeObject(info);
            }
        }

标签： c#jsonfullcalendarrazor-pagesfullcalendar-4

解决方案

问题是您正在对数据进行双重序列化。

GetEventAsFullCalendarJson()当你做的时候，你单独序列化每个事件对象return JsonConvert.SerializeObject(info);。因此，此时您已经有了一个表示单个事件的 JSON 字符串。

但是当你return JsonConvert.SerializeObject(events.Select(pe => pe.GetEventAsFullCalendarJson()).ToList());在Get()方法中编写时，你将所有这些组合在一起并再次序列化整个事情。这意味着已经序列化的 JSON 事件字符串将再次序列化 - 这就是为什么您在事件对象周围加上引号（例如"{ ... }"，然后\"在其中转义引号 ( )。

结果是，对于 fullCalendar，您的数据看起来就像一个字符串数组，而不是一个事件对象数组。

修复很简单 - 删除单个事件的序列化。一个对象/数组必须一次全部序列化以创建一个连贯的 JSON 片段。

这个：

return JsonConvert.SerializeObject(events.Select(pe => {
  title = pe.Name,
  start = pe.StartDate,
  end = pe.EndDate
}).ToList());

会工作的，我想。

c# - 来自 JSON 提要的 FullCalendar 事件未显示

问题描述

解决方案

推荐阅读