如何获取单击的事件 ID 并使用这些详细信息导航到 ASPX 页面?(完整日历)

Question

我正在开发混合项目，我在MVC下使用FullCalendar，但所有其他页面使用Webforms。当我单击一个事件时，它会正常显示它的详细信息。没有问题。我刚刚在"eventClick"模式中添加了一个"更多详细信息"按钮，我可以跳转到ASPX页面，以更详细的形式显示事件的详细信息。我一直在努力弄清楚，但我似乎找不到方法。有什么建议吗？

"事件点击"模态的图片

@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

我为其他场景做了一个例子，但您也可以使用相同的方法来读出值以显示所需的数据。您必须处理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>