Как получить идентификатор события по клику и перейти на страницу ASPX с этими подробностями? (FullCalendar) - PullRequest
Новая
       12

Как получить идентификатор события по клику и перейти на страницу ASPX с этими подробностями? (FullCalendar)

0 голосов
/ 07 мая 2018

Я разрабатываю гибридный проект, в котором я использую FullCalendar под MVC, но Webforms для всех остальных страниц. Когда я нажимаю на событие, оно показывает детали этого обычно. Никаких проблем по этому поводу. Я просто добавил кнопку «Подробнее» в модале «eventClick», где я могу перейти на страницу ASPX, отображающую детали события в более подробной форме. Я пытался понять, но я не могу найти способ. Любое предложение?

Изображение '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>

1 Ответ

0 голосов
/ 07 мая 2018

Я сделал пример для другого сценария, но вы также можете использовать тот же способ для считывания значения для отображения нужных вам данных. Вы должны обработать 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>
...