Event Changes do not Post with Fullcalendar.js and ASP.Net WebApi - asp.net-web-api

Question

I'm trying to use the Fullcalendar with a MVC WebApi Application. Data gets loaded successfully, but changes do not hit a Post to the Server.
I am using the latest Fullcalendar - Beta.
This is my Fullcalendar - Init:
$(document).ready(function () {
$('#calendar').fullCalendar({
events: '/api/CalendarData',
eventClick: function (calEvent, jsEvent, view) {
var form = $("<form class='form-inline'><label>Change event name </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;
});
...
});
});
These are my WebApiController Methods:
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)
{
}
The Routingdefaults of the MVC WebApi - Projecttemplates are untouched.
Thank You!

Answer 1

I'm not sure if it is correct this way, but it works for me. I am programming the posts by myself using $.post.
This is the Code now:
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 </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);
});