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

时间:2017-11-22 06:23:36

标签: c# asp.net-mvc kendo-scheduler

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

示例代码如下:

<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方法和模型类如下:

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

任何帮助表示赞赏..

1 个答案:

答案 0 :(得分:0)

我猜问题是关于发布到Action的数据。发布的格式如下:

{
  models: []
}

这意味着您需要将其与包含models属性的类绑定。如下所示

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