将 kendo ui html 调度程序数据绑定到 mvc 方法

Question

已分配任务以使用 kendo ui html 版本的调度程序并使用 json 数据。读取功能似乎有效，但在测试创建方法时，数据似乎没有与操作方法参数绑定..

示例代码如下：

<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" }
                }
            }
        }
    }
});

mvc方法和模型class如下：

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; }
    }

测试创建时，调试器显示 0 个列表项

正在发布的表单数据如下：

[{"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}]

感谢任何帮助..

Answer 1

我想问题出在发布到 Action 的数据上。发布格式如下

{
  models: []
}

这意味着您需要将其与包含模型属性的 class 绑定。喜欢下面

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

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

如果您想使用 POST 而不是 GET，则对 create 使用以下配置。删除 dataType

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

已编辑：

请尝试关注

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

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

将 kendo ui html 调度程序数据绑定到 mvc 方法

binding kendo ui html scheduler data to mvc method

c#

asp.net-mvc

kendo-scheduler