javascript - 从 FullCalendar 调用 Controller 操作

Question

我正在开发一个使用 jQuery 插件 Fullcalendar 的小型应用程序。这个插件非常好，但现在我需要对其进行一些小改动。

一旦事件被存储，它就会显示在日历上，默认情况下单击事件会显示带有事件标题的警报。我想要发生的是点击事件在我的日历 Controller 上调用一个 Action 。

我使用的是 fullcalendar.js 的 javascript，然后是我自己的 javascript 库:

function padDigits(n, totalDigits) {

    n = n.toString();

    var pd = '';

    if (totalDigits > n.length) {

        for (i = 0; i < (totalDigits - n.length); i++) {

            pd += '0';

        }

    }

    return pd + n.toString();

}



function createEvent(date, allDay, jsEvent, View) {

    var eventDate = padDigits(date.getMonth() + 1, 2) + '-' +

                    padDigits(date.getDate(), 2) + '-' +

                    padDigits(date.getFullYear(), 4);

    window.location.href = "/Calendar/Create/" + eventDate;

}



$(document).ready(function () {

    $('#calendar').fullCalendar({

        editable: true,

        events: $('#calendar').data('url'), /*"/Calendar/GetEvents",*/

        eventClick: "/Calendar/ReviewApproveBooking", 

        dayClick: function (date, allDay, jsEvent, view) {

            createEvent(date, allDay, jsEvent, view);

        }

    });

});

eventClick 是我要进行调用的地方。

Action 看起来像:

[HttpGet]
        [Authorize(Roles="Admin")]
        public ActionResult ReviewApproveBooking()
        {
            var booking = from b in DBContext.Events
                          where b.EventID == 1
                          select b;
            var em = booking.Single();
            Guid memberKey = em.MemberID;
            MembershipUser mu_booker = Membership.GetUser(memberKey);

            ProfileModel pm = ProfileModel.GetProfile(mu_booker.UserName);

            em.BookerName = pm.FullName;

            return View(em);
        }

        [HttpPost]
        [Authorize(Roles="Admin")]
        public ActionResult ReviewApproveBooking(int id, EventModel em)
        {
            // get the actual user ID
            // Need to complete - I know this is blank
            return View();
        }

我已经为此工作了一天，但我看不出我需要做什么才能完成这项工作。非常感谢任何帮助。

非常感谢nathj07

Answer 1

简而言之，如果我是正确的，您只是想在单击事件时进行 ajax 调用，查看文档这相当简单...

首先，您需要使用 ajax 调用来调用 [Post] 方法，我将向您展示下面的 jquery 代码:

The docs say this..
$('#calendar').fullCalendar({
    eventClick: function(calEvent, jsEvent, view) {

        alert('Event: ' + calEvent.title);
        alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
        alert('View: ' + view.name);

        // change the border color just for fun
        $(this).css('border-color', 'red');

    }
});

$('#calendar').fullCalendar({
    eventClick: function(calEvent, jsEvent, view) {
        $.ajax({
            url: _url,
            type: "POST",
            cache: false,
            data: { id= "",  }, *//sort out your params here*
            error: function(xhr, status, error) {
//handle errors
            },
            success: function(data) {
//handle sucess here

            } // end on sucess
        }); // end ajax call

    }
});