Question

目前有一个使用AJAX和FullCalendar的应用程序。

我希望用户能够点击此日历上的某个项目，会出现一个对话框，其中显示一个按钮，显示＆＃34;查看详细信息＆＃34;。然后，这将使用户进入该特定的事件页面。

我的对话框正在运行，但我对如何从AJAX调用中获取ID并将其放入Javascript函数以重定向到该操作感到困惑。

我想我知道如何让它去做那个动作，但我不知道如何从AJAX电话中取出ID。

这是我的FullCalendar，有效：

 <script>
    $(document).ready(function () {
        var events = [];

        $.ajax({
            type: "GET",
            url: "/Appointments/GetEvents",
            success: function (data) {
                $.each(data, function (i, v) {
                    events.push({
                        details: v.DetailsOfAppointment,
                        date: moment(v.DateOfAppointment),
                        room: v.RoomType,
                        confirmed: v.Confirmed,
                        colour: v.ThemeColour,
                        church: v.Church.Name,
                        parishAdminName: v.Admins.AdministratorName,
                        parishAdminUser: v.Admins.AdminUsername,
                        parishAdminId: v.Admins.AdministratorId,
                        fee: v.Fee,
                        id: v.AppointmentId

                    });

                })
                 GenerateCalender(events);   
            },
            error: function (error) {
                alert("failed");
                console.log(error);
            }
        })

        function GenerateCalender(events) {
            $('#calendar').fullCalendar({
                contentHeight: 500,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek'
                },
                defaultView: 'agendaWeek',
                timeFormat: 'HH:mm',
                eventLimit: true,
                eventColor: events.ThemeColour,
                events: events,
                aspectRatio: 2.2,
                minTime: "09:00:00",
                maxTime: "17:00:00",
                eventRender: function (event, element) {
                    if (event.fee == null) {
                        if (event.confirmed == false) {
                            element.css('background-color', '#FF0000');
                            element.css('border-color', '#FF0000');
                        }
                        else {
                            element.css('background-color', '#008000');
                            element.css('border-color', '#008000');
                        }
                    }
                    else
                    {
                        element.css('background-color', '#0000FF');
                        element.css('border-color', '#0000FF');

                    }
                },
                eventClick: function (calEvent, jsEvent, view) {
                    $('#myModal #details').text(calEvent.details);
                    var $details = $('<div/>');

                    if (calEvent.fee != null) {
                        $details.append($('<p/>').html('<b>Date of Ceremony : </b>' + calEvent.date.format("DD-MMM-YYYY HH:mm a")));
                    }
                    else {
                        $details.append($('<p/>').html('<b>Date of Appointment : </b>' + calEvent.date.format("DD-MMM-YYYY HH:mm a")));
                    }
                    if (calEvent.end != null) {
                        $details.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
                    }
                    $details.append($('<p/>').html('<b>Details : </b>' + calEvent.details));
                    $details.append($('<p/>').html('<b>Church Name : </b>' + calEvent.church));
                    if (calEvent.fee == null) {
                        if (calEvent.room != null) {
                            $details.append($('<p/>').html('<b>Room : </b>' + calEvent.room));
                        }
                        else {
                            $details.append($('<p/>').html('<b>Room Not Confirmed'));
                        }
                    }
                    $details.append($('<p/>').html('<b>Parish Admin : </b>' + calEvent.parishAdminName));
                    if (calEvent.confirmed == true)
                    {
                        $details.append($('<p/>').html('<b>Status : Confirmed </b>'));
                    }
                    else
                    {
                        $details.append($('<p/>').html('<b>Status : Not Confirmed </b>'));
                    }
                    $('#myModal #pDetails').empty().html($details);

                    $('#myModal').modal();
                },

                eventDrop: function (event) {
                    var data = {
                        AppointmentID: event.id,
                    };
                }

            })
        }

    })

    $('#viewDetails').click(function (id) {
        window.location.href = '/Appointments/Details/' + id;
    }
</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>
                <button id="viewDetails" class="btn btn-default" style="margin-right:5px;">
                    View Details
                </button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Answer 1

您可以将#viewDetails链接的HREF指向您想要的页面，而不是将重定向设为javascript操作吗？如果它当前是一个按钮，您可以将其设置为一个看起来像按钮的链接。

例如，在构建和显示模态的脚本的末尾，您可以尝试这样的事情：

$('#myModal #pDetails').empty().html($details);

$('#viewDetails').attr("href", '/Appointments/Details/' + calEvent.id);

$('#myModal').modal();

将按钮更改为链接，例如：

<div class="modal-body">
    <p id="pDetails"></p>
    <a href="" id="viewDetails" class="btn btn-default" style="margin-right:5px;">
        View Details
    </a>
</div>

使用从AJAX检索的ID重定向到Action

1 个答案: