如何获取点击的事件ID并导航到具有这些详细信息的ASPX页面？ （FullCalendar）

Question

我正在开发混合项目，我在MVC下使用FullCalendar，但Webforms用于所有其他页面。当我点击一个事件时，它会正常显示它的详细信息。没问题。我刚刚添加了一个按钮＆＃39;更多细节＆＃39;在＆＃39; eventClick＆＃39;模态，我可以跳转到ASPX页面，以更详细的形式显示事件的详细信息。我一直试图想，但我似乎无法找到方法。有什么建议吗？

Picture of 'eventClick' Modal

@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.9.0/fullcalendar.min.js"></script>

<script>
    $(document).ready(function () {
        var events = [];
        $.ajax({
            type: "GET",
            url: "/home/GetEvents",
            success: function (data) {
                $.each(data, function (i, v) {
                    events.push({
                        title: v.EquipID,
                        modelno: v.ModelNo,
                        description: v.ModelDesc,
                        caltype: v.CalType,
                        start: moment(v.EquipApprovedDate),
                        end: v.EquipCalDueDate != null ? moment(v.EquipCalDueDate) : null,
                        color: v.ThemeColor,
                        allDay: v.IsFullDay
                    });
                })

                GenerateCalender(events);
            },
            error: function (error) {
                alert('failed');
            }
        })

        function GenerateCalender(events) {
            $('#calender').fullCalendar('destroy');
            $('#calender').fullCalendar({
                contentHeight: 400,
                defaultDate: moment('@(ViewBag.eqStartDate)'),
                timeFormat: 'h(:mm)a',
                displayEventTime: false,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay,agenda'
                },
                eventLimit: true,
                eventColor: '#378006',
                events: events,
                eventClick: function (calEvent, jsEvent, view) {
                    $('#myModal #eventTitle').text(calEvent.title);
                    var $description = $('<div/>');
                    $description.append($('<p/>').html('<b>Model No: </b>' + calEvent.modelno));
                    $description.append($('<p/>').html('<b>Description: </b>' + calEvent.description));
                    $description.append($('<p/>').html('<b>Cal Type: </b>' + calEvent.caltype));
                    $description.append($('<p/>').html('<b>Start: </b>' + calEvent.start.format("DD-MMM-YYYY")));
                    if (calEvent.end != null) {
                        $description.append($('<p/>').html('<b>End: </b>' + calEvent.end.format("DD-MMM-YYYY")));
                    }
                    $('#myModal #pDetails').empty().html($description);

                    $('#myModal').modal();
                },
                eventRender: function eventRender(events, jsEvent, view) {
                    return ['all', events.title].indexOf($('#type_selector').val()) >= 0
                }
            });
            $('#type_selector').on('change', function () {
                $('#calendar').fullCalendar('removeEventSource', events);
                $('#calendar').fullCalendar('addEventSource', events);
                $('#calendar').fullCalendar('refetchEvents');
            });
        }
    })
</script>}

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title"><span id="eventTitle"></span></h4>
        </div>
        <div class="modal-body">
            <p id="pDetails"></p>
        </div>
        <div class="modal-footer">
        <a type="button" class="btn btn-default" href="" onclick="this.href = 'EqDetails.aspx?idid=' + document.getElementById('eventTitle').value">More Details</a>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
</div>

Answer 1

我为其他场景制作了example，但您也可以使用相同的方式读取值以显示所需的数据。您必须处理Page_Load部分

然后使用href转到页面应该是

<a type="button" class="btn btn-default" href="javascript:;" onclick="javascript:document.location.href='EqDetails.aspx?id='+document.getElementById('eventTitle').innerHTML">More Details</a>