Question

我正在开发一个使用jQuery插件Fullcalendar的小应用程序。这个插件非常好，但现在我需要改变它。

一旦事件被存储，它将显示在日历上，默认情况下单击该事件会显示一个包含事件标题的警报。我想要发生的是点击事件在我的日历控制器上调用一个动作。

我使用的是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是我要拨打电话的地方。

动作如下：

[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

    }
});

从FullCalendar调用Controller Action

1 个答案: