I have a Kendo Scheduler posting to a C# Web API when a new schedule event is created. The problem is with parameter binding - the web API method does not receive the posted data properly.
When I look at the server request in Fiddler, the content type is json, but the request body is URL encoded. How to get the Scheduler to encode the event as JSON?
POST http://localhost:58623/api/booking HTTP/1.1
Host: localhost:58623
Accept: application/json, text/javascript, */*; q=0.01
Accept-Language: en-gb,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: application/json; charset=utf-8
Referer: http://localhost:58623/Booking
Content-Length: 2141
models=%5B%7B%22Id%22%3A0%2C%22Title%22%3A%22No+title%22%2C%22Start%22%3A%222013-06-11T08%3A00%3A00.000Z etc...
Here is my js file:
$("#scheduler").kendoScheduler({
date: new Date("2013-06-13"),
startTime: new Date("2013-06-13T07:00"),
endTime: new Date("2013-06-13T23:59"),
height: 800,
views: [
"day",
{ type: "week", selected: true },
"month",
"agenda"
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "/api/booking",
dataType: "json"
},
update: {
url: "/api/booking",
type: "PUT",
dataType: "json"
},
destroy: {
url: function (rec) {
return "/api/booking/" + rec.Id;
},
type: "DELETE"
},
create: {
url: "/api/booking",
type: "POST",
dataType: "json",
contentType: 'application/json; charset=utf-8'
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return kendo.stringify(options.models);
}
}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "Id", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceId" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
clubId: { from: "ClubId", nullable: false, defaultValue: 0 },
fieldId: { from: "FieldId", nullable: false, defaultValue: 0 },
lightIds: { from: "LightIds", nullable: false, defaultValue: 0 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
},
resources: [
{
field: "fieldId",
dataSource: [
{ text: "Main Oval", value: 1, color: "#6eb3fa" },
{ text: "Practice Oval", value: 2, color: "#f58a8a" }
],
title: "Club"
},
{
field: "lightIds",
dataSource: [
{ text: "Match Lights", value: 1, color: "#f8a398" },
{ text: "Auxilliary Lighting", value: 2, color: "#51a0ed" },
{ text: "Practice Lights", value: 3, color: "#56ca85" }
],
multiple: true,
title: "Lights"
}
]
});
When I look at the server request in Fiddler, the content type is json, but the request body is URL encoded. How to get the Scheduler to encode the event as JSON?
POST http://localhost:58623/api/booking HTTP/1.1
Host: localhost:58623
Accept: application/json, text/javascript, */*; q=0.01
Accept-Language: en-gb,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: application/json; charset=utf-8
Referer: http://localhost:58623/Booking
Content-Length: 2141
models=%5B%7B%22Id%22%3A0%2C%22Title%22%3A%22No+title%22%2C%22Start%22%3A%222013-06-11T08%3A00%3A00.000Z etc...
Here is my js file:
$("#scheduler").kendoScheduler({
date: new Date("2013-06-13"),
startTime: new Date("2013-06-13T07:00"),
endTime: new Date("2013-06-13T23:59"),
height: 800,
views: [
"day",
{ type: "week", selected: true },
"month",
"agenda"
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "/api/booking",
dataType: "json"
},
update: {
url: "/api/booking",
type: "PUT",
dataType: "json"
},
destroy: {
url: function (rec) {
return "/api/booking/" + rec.Id;
},
type: "DELETE"
},
create: {
url: "/api/booking",
type: "POST",
dataType: "json",
contentType: 'application/json; charset=utf-8'
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return kendo.stringify(options.models);
}
}
},
schema: {
model: {
id: "id",
fields: {
id: { from: "Id", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceId" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
clubId: { from: "ClubId", nullable: false, defaultValue: 0 },
fieldId: { from: "FieldId", nullable: false, defaultValue: 0 },
lightIds: { from: "LightIds", nullable: false, defaultValue: 0 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
},
resources: [
{
field: "fieldId",
dataSource: [
{ text: "Main Oval", value: 1, color: "#6eb3fa" },
{ text: "Practice Oval", value: 2, color: "#f58a8a" }
],
title: "Club"
},
{
field: "lightIds",
dataSource: [
{ text: "Match Lights", value: 1, color: "#f8a398" },
{ text: "Auxilliary Lighting", value: 2, color: "#51a0ed" },
{ text: "Practice Lights", value: 3, color: "#56ca85" }
],
multiple: true,
title: "Lights"
}
]
});