Asp.net Core Razor Pages中FullCalendar无法显示数据问题排查

嘿，我来帮你解决这个FullCalendar的问题！我之前在Razor Pages里折腾过这个插件，踩过不少坑，咱们一步步来搞定～

一、先解决事件不显示的问题（从控制台报错入手） #

控制台报错是定位问题的核心，先把这个搞定，事件才能正常显示。常见的坑和解决方法：

1. 数据接口返回异常（404/500） #

如果控制台显示请求事件数据的接口返回404或者500，先检查后台的handler路由和返回格式：

• 在Index.cshtml.cs里，你的事件数据接口（比如OnGetEvents）要符合Razor Pages handler格式，前端请求地址应该是/Index?handler=Events。给你个示例后台代码：

public JsonResult OnGetEvents()
{
    // 先模拟测试数据，确保格式符合FullCalendar要求
    var testEvents = new List<Calendar>
    {
        new Calendar
        {
            Id = 1,
            Title = "我的测试事件",
            Start = DateTime.Now.ToString("yyyy-MM-dd"),
            End = DateTime.Now.AddDays(1).ToString("yyyy-MM-dd"),
            AllDay = true
        }
    };
    return new JsonResult(testEvents);
}

• 再检查Calendar.cs的实体类，必须包含FullCalendar必填字段：Id、Title、Start，可选的End、AllDay等字段名要和前端对应，别写错！

2. FullCalendar初始化配置错误 #

看看index.cshtml里的初始化代码，events配置必须正确指向后台handler：

<script>
document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        // 重点：这里的地址要和后台handler对应
        events: '/Index?handler=Events',
        // 其他配置...
    });
    calendar.render();
});
</script>

如果控制台报FullCalendar is not defined，那就是你没正确引入FullCalendar的JS/CSS，赶紧补上：

<!-- 先引入FullCalendar样式 -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/main.min.css" rel="stylesheet">
<!-- 再引入FullCalendar脚本 -->
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/main.min.js"></script>

3. 其他小细节 #

如果遇到跨域报错（Razor Pages同域一般不会，但万一用了独立API），可以在Program.cs中添加CORS配置，但这种情况比较少见。

二、实现点击日期弹出对话框录入事件 #

搞定显示问题后，咱们来做添加事件的功能，用Bootstrap模态框最方便，步骤如下：

1. 添加模态框HTML #

在index.cshtml里插入模态框代码，用来录入事件信息：

<!-- 添加事件的模态框 -->
<div class="modal fade" id="addEventModal" tabindex="-1" aria-labelledby="addEventModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addEventModalLabel">添加新事件</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="addEventForm">
        <div class="modal-body">
          <div class="mb-3">
            <label for="eventTitle" class="form-label">事件标题</label>
            <input type="text" class="form-control" id="eventTitle" required>
          </div>
          <div class="mb-3">
            <label for="eventStart" class="form-label">开始日期</label>
            <input type="date" class="form-control" id="eventStart" required>
          </div>
          <div class="mb-3">
            <label for="eventEnd" class="form-label">结束日期（可选）</label>
            <input type="date" class="form-control" id="eventEnd">
          </div>
          <div class="mb-3">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="eventAllDay">
              <label class="form-check-label" for="eventAllDay">全天事件</label>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">保存事件</button>
        </div>
      </form>
    </div>
  </div>
</div>

记得要引入Bootstrap的JS和CSS，不然模态框无法正常工作！

2. 给FullCalendar添加日期点击事件 #

修改FullCalendar初始化代码，加上dateClick回调，点击日期时自动填充开始日期并弹出模态框：

<script>
document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        events: '/Index?handler=Events',
        // 点击日期触发的回调
        dateClick: function(info) {
            // 把点击的日期填充到开始日期输入框
            document.getElementById('eventStart').value = info.dateStr;
            // 弹出模态框
            const modal = new bootstrap.Modal(document.getElementById('addEventModal'));
            modal.show();
        }
    });
    calendar.render();

    // 处理表单提交，保存事件
    document.getElementById('addEventForm').addEventListener('submit', function(e) {
        e.preventDefault();
        // 收集表单数据
        const eventData = {
            Title: document.getElementById('eventTitle').value,
            Start: document.getElementById('eventStart').value,
            End: document.getElementById('eventEnd').value || null,
            AllDay: document.getElementById('eventAllDay').checked
        };
        // 发送POST请求到后台保存
        fetch('/Index?handler=AddEvent', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                // 别忘了加Razor Pages的防伪令牌
                'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
            },
            body: JSON.stringify(eventData)
        })
        .then(res => res.json())
        .then(data => {
            // 关闭模态框
            const modal = bootstrap.Modal.getInstance(document.getElementById('addEventModal'));
            modal.hide();
            // 重新加载日历事件，显示新添加的内容
            calendar.refetchEvents();
            alert('事件添加成功啦！');
        })
        .catch(err => {
            console.error('添加失败:', err);
            alert('添加失败，请重试！');
        });
    });
});
</script>

3. 后台添加保存事件的Handler #

在Index.cshtml.cs里添加OnPostAddEvent方法，接收前端请求并保存事件：

// 用[FromBody]接收JSON格式的事件数据
public async Task<IActionResult> OnPostAddEvent([FromBody] Calendar newEvent)
{
    if (ModelState.IsValid)
    {
        // 这里替换成你的数据库操作逻辑，比如用EF Core保存到数据库
        // _context.Calendars.Add(newEvent);
        // await _context.SaveChangesAsync();
        return new JsonResult(new { success = true, @event = newEvent });
    }
    return new JsonResult(new { success = false, message = "输入的数据有问题哦" });
}

Calendar.cs实体类要和前端提交的字段对应：

public class Calendar
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Start { get; set; }
    public string End { get; set; }
    public bool AllDay { get; set; }
}

三、最后检查这些关键点 #

• 确保Bootstrap的JS/CSS已正确引入，否则模态框无法正常使用。
• 打开浏览器Network标签，查看事件请求和保存请求的返回状态，排查接口异常。
• 日期格式统一使用yyyy-MM-dd，FullCalendar对该格式兼容性最好。

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