ASP.NET MVC事件日历创建问题：Ajax报错且日历无法显示

问题回顾 #

你在ASP.NET MVC中实现事件日程日历，已经写好数据库表、控制器和视图代码，但运行时出现Ajax错误，日历完全无法在页面显示。相关代码如下：

数据库表结构 #

原控制器代码 #

public ActionResult Index() { return View(); } 
public JsonResult GetEvents() { 
    var events = db.MedicationTrackers.ToList(); 
    return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet }; 
}

原视图Index代码 #

@model IEnumerable<LICENTA.Database.MedicationTracker> 
@{ ViewBag.Title = "Index"; } 
<h2>Index</h2>

原@section Scripts代码 #

@section Scripts { 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
    <scripts src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script> 
    <script> 
        $(document).ready(function () { 
            var events = []; 
            $.ajax({ 
                type: "GET", 
                url: "/MedicationTrackers/GetEvents", 
                success: function (data) { 
                    $.each(data, function(i,v){ 
                        events.push({ 
                            title: v.IdMember, 
                            description: v.IdMedication, 
                            start: moment(v.Start), 
                            end: v.Stop != null? moment(v.End):null, 
                            status: v.Status 
                        }) 
                    }) 
                    GenerateCalendar(events); 
                }, 
                error: function (error) { 
                    alert("Error occured!!") 
                } 
            }) 
        }) 
        function GenerateCalendar(events) { 
            $('calender').fullCalendar('destroy'); 
            $('calender').fullCalendar({ 
                contentheight: 400, 
                defaultdate: new date(), 
                timeformat: 'h(:mn)a', 
                header: { 
                    left: 'prev,next today', 
                    center: 'title', 
                    right: 'month, basicweek, basicday, agenda' 
                }, 
                eventlimit: true, 
                eventcolor: '#378006', 
                events: events 
            }} 
    </script>

排查到的关键错误点 #

我仔细梳理了你的代码，发现几个直接导致报错和日历不显示的问题：

• Script标签语法错误：<scripts>多了个s，应该是标准的<script>标签
• 日历容器缺失+选择器错误：视图里没有添加日历的DOM容器（比如<div id="calender"></div>），而且选择器$('calender')写法错误，应该用$('#calender')匹配id容器
• JavaScript大小写&拼写错误：new date()要改成new Date()，contentheight/timeformat/eventlimit/eventcolor这些fullCalendar配置项都是驼峰命名，要改成contentHeight/timeFormat/eventLimit/eventColor，另外timeformat里的mn是笔误，应该是mm
• 字段不匹配：数据库里的结束日期字段是Stop，但你代码里写的是v.End，会导致无法获取正确的结束时间
• CSS依赖缺失：没引入fullCalendar的样式表，就算JS正常运行，日历也会因为没有样式而无法正常显示
• 代码语法错误：GenerateCalendar函数里的fullCalendar配置末尾多了一个}，导致JavaScript解析失败

修复后的完整代码 #

修改后的视图Index代码（添加日历容器） #

@model IEnumerable<LICENTA.Database.MedicationTracker> 
@{ ViewBag.Title = "日程日历"; } 

<h2>我的日程</h2>
<!-- 添加日历渲染容器 -->
<div id="calender"></div>

修改后的@section Scripts代码 #

@section Scripts { 
    <!-- 引入fullCalendar必需的CSS样式 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script> 
    <script> 
        $(document).ready(function () { 
            var events = []; 
            $.ajax({ 
                type: "GET", 
                url: "@Url.Action("GetEvents", "MedicationTrackers")", // 使用Url.Action避免路由路径问题
                success: function (data) { 
                    $.each(data, function(i, v){ 
                        events.push({ 
                            title: "成员ID: " + v.IdMember, // 优化标题显示内容
                            description: "药品ID: " + v.IdMedication, 
                            start: moment(v.Start), 
                            end: v.Stop != null ? moment(v.Stop) : null, // 修正为数据库的Stop字段
                            status: v.Status 
                        }); 
                    }); 
                    GenerateCalendar(events); 
                }, 
                error: function (xhr, status, error) { 
                    // 优化错误提示，方便调试
                    alert("请求错误: " + error + "\n状态码: " + status); 
                    console.log(xhr.responseText); // 控制台打印详细错误信息，便于排查
                } 
            }); 
        }); 

        function GenerateCalendar(events) { 
            $('#calender').fullCalendar('destroy'); // 使用正确的id选择器
            $('#calender').fullCalendar({ 
                contentHeight: 400, // 修正驼峰命名
                defaultDate: new Date(), // 修正大小写
                timeFormat: 'h(:mm)a', // 修正拼写和命名
                header: { 
                    left: 'prev,next today', 
                    center: 'title', 
                    right: 'month,basicWeek,basicDay,agendaWeek' // 修正视图名称大小写
                }, 
                eventLimit: true, // 修正驼峰命名
                eventColor: '#378006', // 修正驼峰命名
                events: events 
            }); // 移除多余的闭合括号
        }
    </script>

控制器代码优化（可选，统一日期格式） #

如果数据库返回的日期格式存在解析问题，可以在控制器里统一转成fullCalendar识别的ISO格式：

public JsonResult GetEvents() { 
    var events = db.MedicationTrackers.Select(m => new {
        IdMember = m.IdMember,
        IdMedication = m.IdMedication,
        Start = m.Start.ToString("yyyy-MM-ddTHH:mm:ss"),
        Stop = m.Stop?.ToString("yyyy-MM-ddTHH:mm:ss"),
        Status = m.Status
    }).ToList(); 
    return Json(events, JsonRequestBehavior.AllowGet); 
}

验证步骤 #

1. 确认MedicationTrackersController存在且路由配置正常
2. 运行项目后，打开浏览器控制台（F12）查看是否还有JavaScript报错
3. 在Network标签里检查GetEvents请求的返回数据是否正常

内容的提问来源于stack exchange，提问作者Andre.A