如何获取FullCalendar点击事件ID并跳转至ASPX详情页？

嘿，这个需求其实挺常见的，我来给你捋捋具体怎么实现：

核心思路就是拿到事件的唯一标识，通过URL参数传递给ASPX页面，让它加载对应的数据。下面是一步步的具体操作：

1. 在FullCalendar的eventClick中处理模态框与按钮跳转 #

在你的MVC视图的@section Scripts里，修改FullCalendar的eventClick回调，添加模态框逻辑和按钮跳转事件：

document.addEventListener('DOMContentLoaded', function() {
    var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
        // 你的日历基础配置（比如事件源、视图模式等）
        eventClick: function(info) {
            // 填充模态框的基础信息（比如标题、简短描述）
            $('#modalEventTitle').text(info.event.title);
            $('#modalEventShortDesc').text(info.event.extendedProps.shortDesc);
            
            // 给「更多详情」按钮绑定跳转逻辑（用off防止重复绑定）
            $('#btnViewFullDetails').off('click').on('click', function() {
                // 获取事件的唯一ID（这里假设你的event对象里有id属性，对应数据库主键）
                const eventId = info.event.id;
                // 跳转到WebForms详情页，带上EventID参数
                window.location.href = '/EventDetails.aspx?EventID=' + eventId;
            });
            
            // 打开模态框（这里用Bootstrap模态框为例，可替换成你自己的模态框实现）
            $('#eventDetailModal').modal('show');
        }
    });
    calendar.render();
});

2. 准备模态框的HTML结构 #

在你的MVC视图里添加模态框的HTML（如果用Bootstrap，确保已引入它的JS和CSS）：

<!-- 事件详情模态框 -->
<div class="modal fade" id="eventDetailModal" tabindex="-1" aria-labelledby="modalEventTitle" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalEventTitle"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p id="modalEventShortDesc"></p>
        <!-- 更多详情按钮 -->
        <button id="btnViewFullDetails" class="btn btn-primary mt-3">更多详情</button>
      </div>
    </div>
  </div>
</div>

3. 在WebForms页面接收参数并加载详情 #

在你的ASPX页面（比如EventDetails.aspx）的后台代码（.cs文件）中，获取URL传递的EventID，然后从数据源加载详细信息并展示：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 检查URL参数是否存在
        if (Request.QueryString["EventID"] != null)
        {
            // 转换参数类型（根据你的主键类型调整，比如int/string）
            if (int.TryParse(Request.QueryString["EventID"], out int eventId))
            {
                // 从数据库或服务中获取事件详情
                var eventFullDetails = YourDataAccess.GetEventById(eventId);
                
                // 将详情绑定到页面控件（比如Label、TextBox等）
                lblFullTitle.Text = eventFullDetails.Title;
                lblStartDateTime.Text = eventFullDetails.StartTime.ToString("yyyy-MM-dd HH:mm");
                lblEndDateTime.Text = eventFullDetails.EndTime.ToString("yyyy-MM-dd HH:mm");
                lblFullDescription.Text = eventFullDetails.Description;
                // 其他更多字段...
            }
            else
            {
                // 参数不合法的提示
                lblErrorMessage.Text = "无效的事件ID";
            }
        }
        else
        {
            lblErrorMessage.Text = "未指定事件ID";
        }
    }
}

几个注意事项 #

• 路径正确性：如果你的ASPX页面在子目录下（比如/WebForms/EventDetails.aspx），要调整跳转路径，避免404错误。
• 参数安全：记得对传入的EventID进行合法性校验，防止恶意参数注入。
• 事件数据传递：确保FullCalendar的事件对象里包含唯一标识（比如id），如果事件源从MVC后端返回，要在事件模型里包含这个字段。

这样操作下来，点击模态框里的「更多详情」按钮就能顺利跳转到WebForms页面展示完整的事件信息啦！

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