binding kendo ui html scheduler data to mvc method

Question

have been assigned task to use kendo ui html version of scheduler and use json for data. the read functionality seems to be working but when testing the create method, the data does not seem to be binded with the action method parameter..

the sample code is as under:

<script type="text/javascript">
$("#scheduler").kendoScheduler({
    date: new Date("2013/6/6"), // The current date of the scheduler
    height: 600,
    dataSource: {
        batch: true, // Enable batch updates
        transport: {
            read: {
                url: '@Url.Action("SampleKendoData","Home")',
                //url: "https://demos.telerik.com/kendo-ui/service/tasks",
                dataType: "json",
                type: "post",

            },
            update: {

                url: "https://demos.telerik.com/kendo-ui/service/tasks/update",
                dataType: "jsonp"
            },
            create: {
                url: '@Url.Action("SampleKendoCreate","Home")',
                //url: "https://demos.telerik.com/kendo-ui/service/tasks/create",
                dataType: "json",
                type: "post"
            },
            destroy: {
                url: "https://demos.telerik.com/kendo-ui/service/tasks/destroy",
                dataType: "jsonp"
            },
            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    //return { models: kendo.stringify(options.models) };
                    console.log(options.models);
                    return kendo.stringify(options.models);

                }
            }
        },
        schema: {
            model: {
                id: "Id", // The "id" of the event is the "Id" field
                fields: {
                    // Describe the scheduler event fields and map them to the fields returned by the remote service
                    taskId: {
                        from: "Id", // The 'TaskID' server-side field is mapped to the 'taskId' client-side field
                        type: "number"
                    },
                    title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                    start: { type: "date", from: "StartDate" },
                    end: { type: "date", from: "EndDate" },
                    description: { from: "Description" },
                    recurrenceId: { from: "RecurrenceId" },
                    recurrenceRule: { from: "RecurrenceRule" },
                    recurrenceException: { from: "RecurrenceException" },
                    isAllDay: { type: "boolean", from: "IsAllDay" }
                }
            }
        }
    }
});

the mvc method and the model class is as under:

public ActionResult SampleKendoCreate(List<KendoScheduleEvent> models)
{
     return Json(models);
}

public class KendoScheduleEvent
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
        public string Description { get; set; }
        public int RecurrenceId { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public bool IsAllDay { get; set; }
        public string StartTimezone { get; set; }
        public string EndTimezone { get; set; }
    }

when testing create, the debugger shows 0 list items

the form data being posted is as under:

[{"StartTimezone":null,"EndTimezone":null,"Id":1,"Title":"Birthday","StartDate":"2017-11-21T11:20:00.000Z","EndDate":"2017-11-21T11:25:00.000Z","Description":"Birthday","RecurrenceId":0,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":false},{"StartTimezone":null,"EndTimezone":null,"Id":1,"Title":"Games","StartDate":"2017-11-21T11:30:00.000Z","EndDate":"2017-11-21T11:35:00.000Z","Description":"Game time","RecurrenceId":0,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":false},{"StartTimezone":null,"EndTimezone":null,"Id":1,"Title":"Rest","StartDate":"2017-11-21T11:40:00.000Z","EndDate":"2017-11-21T11:50:00.000Z","Description":"Rest","RecurrenceId":0,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":false},{"startTimezone":"","endTimezone":"","Id":0,"Title":"asdf","StartDate":"2017-11-21T20:00:00.000Z","EndDate":"2017-11-21T20:30:00.000Z","Description":"qwee","RecurrenceId":"","RecurrenceRule":"","RecurrenceException":"","IsAllDay":false}]

any help appreciated..

Answer 1

I guess the problem is regarding the data that is posted to Action. The format in which it is posted is following

{
  models: []
}

That means you need to bind it with a class which contains models property. Like below

public ActionResult SampleKendoCreate(KendoScheduleEventModel data)
{
   return Json(data.models);
}

public class KendoScheduleEventModel
{
   public list<KendoScheduleEvent> models { get; set; }
}

If you want to use POST instead of GET then use following configuration for create. Remove dataType

create: {
  url: '@Url.Action("SampleKendoCreate","Home")',
  type: "post"
}

Edited:

Please try following

public ActionResult SampleKendoCreate(KendoRequest request)
{
   var model = JsonConvert.DeserializeObject<KendoRequest>(request.models);
   return Json(data.models);
}

public class KendoRequest
{
   public string models { get; set; }
}