如何为ASP.NET MVC中的FullCalendar插件通过#Term下拉框创建筛选器

一、修改后端控制器方法 #

在HomeController的GetEvents方法中添加筛选参数，根据选中的学期返回对应事件：

public JsonResult GetEvents(string term = "all")
{
    // 从数据库获取事件集合（替换为你的实际查询逻辑）
    var eventsQuery = db.Events.AsQueryable();

    // 如果不是"全部"，则按学期筛选
    if (term != "all")
    {
        eventsQuery = eventsQuery.Where(e => e.TermYear == term);
    }

    // 转换为前端需要的格式
    var eventData = eventsQuery.Select(e => new
    {
        EventType = e.EventType,
        School = e.School,
        Date = e.Date.ToString("yyyy-MM-ddTHH:mm:ss"),
        End = e.End?.ToString("yyyy-MM-ddTHH:mm:ss"),
        Color = e.Color,
        TermYear = e.TermYear
    }).ToList();

    return Json(eventData, JsonRequestBehavior.AllowGet);
}

二、修改前端JavaScript逻辑 #

重构代码，添加下拉框监听事件，实现实时筛选更新日历：

@section Scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>

    <script>
        $(document).ready(function () {
            // 初始化日历基础配置
            InitializeCalendar();
            // 监听学期下拉框变化
            $('#Term').on('change', RefreshCalendar);

            function InitializeCalendar() {
                $('#calender').fullCalendar({
                    contentHeight: 400,
                    defaultDate: new Date(),
                    timeFormat: 'h(:mm)a',
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,basicWeek,basicDay,agenda'
                    },
                    eventLimit: true,
                    eventColor: '#378006',
                    eventClick: function (calEvent, jsEvent, view) {
                        $('#myModal #eventTitle').text(calEvent.title);
                        var $description = $('<div/>');
                        $description.append($('<p/>').html('<b>开始时间:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
                        if (calEvent.end != null) {
                            $description.append($('<p/>').html('<b>结束时间:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
                        }
                        $description.append($('<p/>').html('<b>学校:</b>' + calEvent.description));
                        $('#myModal #pDetails').empty().html($description);

                        $('#myModal').modal();
                    }
                });
                // 首次加载全部事件
                RefreshCalendar();
            }

            // 刷新日历数据
            function RefreshCalendar() {
                var selectedTerm = $('#Term').val();
                $.ajax({
                    type: "GET",
                    url: "/home/GetEvents",
                    data: { term: selectedTerm }, // 传递筛选参数
                    success: function (data) {
                        var events = [];
                        $.each(data, function (i, v) {
                            events.push({
                                title: v.EventType,
                                description: v.School,
                                start: moment(v.Date),
                                end: v.End != null ? moment(v.End) : null, // 修复原代码中end字段的错误
                                color: v.Color,
                                year: v.TermYear,
                                school: v.School
                            });
                        });
                        // 清空现有事件并添加新数据
                        $('#calender').fullCalendar('removeEvents');
                        $('#calender').fullCalendar('addEventSource', events);
                    },
                    error: function () {
                        alert('加载事件失败，请稍后重试');
                    }
                });
            }
        })
    </script>
}

关键说明 #

• 修复了原代码中end字段的错误：原代码用v.Date作为结束时间，现在改为v.End确保时间正确
• 将日历初始化和数据刷新分离，代码更易维护
• 使用removeEvents清空旧事件，addEventSource添加筛选后的数据，比重新初始化日历更高效
• 下拉框切换时自动触发数据刷新，实时更新日历内容

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