事件更改不会随 Fullcalendar.js 和 WebAPI ASP.Net 发布

Question

我正在尝试将Fullcalendar与MVC WebApi应用程序一起使用。数据加载成功，但更改不会命中服务器发布。

我使用的是最新的完整日历 - 测试版。

这是我的完整日历 - 初始化：

$(document).ready(function () {
    $('#calendar').fullCalendar({
        events: '/api/CalendarData',
        eventClick: function (calEvent, jsEvent, view) {
            var form = $("<form class='form-inline'><label>Change event name &nbsp;</label></form>");
            form.append("<input class='middle' autocomplete=off type=text value='" + calEvent.title + "' /> ");
            form.append("<button type='submit' class='btn btn-sm btn-success'><i class='icon-ok'></i> Save</button>");
            var div = bootbox.dialog({
                message: form,
                buttons: {
                    "delete": {
                        "label": "<i class='icon-trash'></i> Delete Event",
                        "className": "btn-sm btn-danger",
                        "callback": function () {
                            calendar.fullCalendar('removeEvents', function (ev) {
                                return (ev._id == calEvent._id);
                            })
                        }
                    },
                    "close": {
                        "label": "<i class='icon-remove'></i> Close",
                        "className": "btn-sm"
                    }
                }
            });
            form.on('submit', function () {
                calEvent.title = form.find("input[type=text]").val();
                calendar.fullCalendar('updateEvent', calEvent);                
                div.modal("hide");
                return false;
            });
        ...
    });
});

这些是我的WebApi控制器方法：

    public IEnumerable<FullCalendarEvent> Get(DateTime start, DateTime end)
    {
        List<FullCalendarEvent> retList = new List<FullCalendarEvent>()
        {
            new FullCalendarEvent(){
                id = 1,
                start = new DateTime(2014,2,22,10,00,00),
                end = new DateTime(2014,2,22,12,00,00),
                title = "Mein zweiter Termin"
            },
            new FullCalendarEvent(){
                id = 2,
                start = new DateTime(2014,2,20,10,00,00),
                end = new DateTime(2014,2,20,12,00,00),
                title = "Mein erster Termin"
            }
        };
        return retList;
    }
    // POST api/calendardata
    public void Post([FromBody]FullCalendarEvent value)
    {
    }

MVC WebApi - 项目模板的路由默认值保持不变。

谢谢！

Answer 1

我不确定这种方式是否正确，但它对我有用。我正在使用 $.post 自己对帖子进行编程。

这是现在的代码：

    eventClick: function (calEvent, jsEvent, view) {
        var form = $("<form id='EditEventForm' class='form-inline'  method='post' action='api/changes/EditEvent' enctype='application/x-www-form-urlencoded'><label>Change event name &nbsp;</label>");
        form.append("<input id='title' name='title' class='middle' autocomplete=off type=text value='" + calEvent.title + "' data-val='true' /> ");
        form.append("<input id='id' type='hidden' value='1' name='id' data-val='true'>");
        form.append("<button type='submit' class='btn btn-sm btn-success'><i class='icon-ok'></i> Save</button></form>");
        var div = bootbox.dialog({
            message: form,
            buttons: {
                "delete": {
                    "label": "<i class='icon-trash'></i> Delete Event",
                    "className": "btn-sm btn-danger",
                    "callback": function () {
                        calendar.fullCalendar('removeEvents', function (ev) {
                            return (ev._id == calEvent._id);
                        })
                    }
                },
                "close": {
                    "label": "<i class='icon-remove'></i> Close",
                    "className": "btn-sm"
                }
            }
        });
        form.on('submit', function () {
            var Event = JSON.stringify(calEvent);
            Event = $('#EditEventForm').serialize();
            $.post('api/CalendarData/EditEvent', Event);
        });