Kendo UI Scheduler的Javascript本地数据库绑定 [英] Javascript local database binding of the Kendo UI Scheduler

问题描述

我正在寻找一种使用javascript将我的开源Kendo UI Scheduler连接到本地数据库的方法.

I'm looking for a way to connect my open source Kendo UI Scheduler to a local database using javascript.

我已经开始但陷入困境，因为我找不到任何有关如何使用JavaScript进行操作的有用文档.

I've already started but got stuck because I can't find any helpful documentation on how to do this using javascript.

$(function () {
        $('#scheduler').kendoScheduler({
            views: [{type:"day", selected:true}],
            dataSource:
                {
                    transport:
                    {
                        read: { url: "@Url.Action("GetTasks","Schedules")", dataType: "json" },
                        update: { url: "@Url.Action("UpdateTask","Schedules")", dataType: "json" },
                        create: { url: "@Url.Action("CreateTask","Schedules")", dataType: "json" },
                        destroy: { url: "@Url.Action("DeleteTask","Schedules")", dataType: "json" },
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return { models: kendo.stringify(options.models) };
                            }  
                        }
                    },
                    schema:
                    {
                        /* Define your actual models for your events here */
                        model:
                        {


                            /* See the available documentation for more information */
                        }
                    }

我一直在寻找Telerik文档没有成功，除了我在这里寻找了关于stackoverflow的一些线索外，除了这个线程

I've been looking on the Telerik documentation without any success besides that I looked for some clues here on stackoverflow but besides this thread https://stackoverflow.com/questions/23322409/how-to-bind-datasource-to-the-scheduler-in-kendo-ui-using-javascript I couldn't find anything helpful.

有人可以为我指出有用文档的正确方向，还是可以使用javascript将Kendo UI Scheduler绑定到本地数据库的说明性示例?

Can anybody point me in the right direction concerning useful documentation or an illustrative example binding the Kendo UI Scheduler to a local database using javascript?

预先感谢

模型

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
using System.ComponentModel.DataAnnotations;

namespace Eindwerk.Models
{
    public class Events
    {
        public int Id { get; set; }
        public string eventTitle { get; set; }

        public DateTime eventStart { get; set; }
        public DateTime eventStop { get; set; }

        public Boolean eventAllday { get; set; }

        public string eventDescription { get; set; }

        public string eventRoom { get; set; }

        public string eventAttend { get; set; }

        public string eventExtra { get; set; }

        public string eventRequest { get; set; }

        public class CalendarDBContext : DbContext
        {
            public DbSet<Events> RoomEvents { get; set; }
        }
    }


}

TASKVIEWMODEL

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Eindwerk.Models
{
    public class TaskViewModel
    {
        public int TaskID { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }

        private DateTime start;
        public DateTime Start
        {
            get
            {
                return start;
            }
            set
            {
                start = value.ToUniversalTime();
            }
        }

        private DateTime end;
        public DateTime End
        {
            get
            {
                return end;
            }
            set
            {
                end = value.ToUniversalTime();
            }
        }
        public bool IsAllDay { get; set; }
        public int? OwnerID { get; set; }
        public string eventRoom { get; set; }
        public string eventAttend { get; set; }
        public string eventExtra { get; set; }
        public string eventRequest { get; set; }


    }
}

CONTROLLER

      private Events.CalendarDBContext db = new Events.CalendarDBContext();

        public ActionResult Tasks_Read()
        {

            using (var sampleDB = db)
            {
                IQueryable<TaskViewModel> tasks = sampleDB.RoomEvents.ToList().Select(task => new TaskViewModel()
                {
                    TaskID = task.Id,
                    Title = task.eventTitle,
                    Start = DateTime.SpecifyKind(task.eventStart, DateTimeKind.Utc),
                    End = DateTime.SpecifyKind(task.eventStop, DateTimeKind.Utc),
                    Description = task.eventDescription,
                    IsAllDay = task.eventAllday,
                    OwnerID = 1
                }).AsQueryable();
                //return Json(tasks.ToDataSourceResult(Request));
                return Json(tasks.ToList(), JsonRequestBehavior.AllowGet);


            }
        }

        public ActionResult Tasks_Create([DataSourceRequest]DataSourceRequest request, TaskViewModel task)
        {


            if (ModelState.IsValid)
            {
                using (var sampleDB = db)
                {
                    //Create a new Task entity and set its properties from the posted TaskViewModel
                    var entity = new Events
                    {
                        Id = task.TaskID,
                        eventTitle = task.Title,
                        eventStart = DateTime.SpecifyKind(task.Start, DateTimeKind.Utc),
                        eventStop = DateTime.SpecifyKind(task.End, DateTimeKind.Utc),
                        eventDescription = task.Description,
                        eventAllday = task.IsAllDay


                    };


                    // Add the entity
                    sampleDB.RoomEvents.Add(entity);
                    //sampleDB.Tasks.AddObject(entity);
                    // Insert the entity in the database
                    sampleDB.SaveChanges();

                    // Get the TaskID generated by the database
                    task.TaskID = entity.Id;
                }
            }
            // Return the inserted task. The scheduler needs the generated TaskID. Also return any validation errors.
            return Json(new[] { task }.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);


        }
    }
}

查看

$(function () {
    $('#scheduler').kendoScheduler({
        date: new Date(Date.now()),
        startTime: new Date("2014/03/07 09:00 AM"),
        endTime: new Date("2014/03/07 07:00 PM"),
        height:800,
        views: [{type:"day", selected:true}],
        timezone: "Etc/UTC",
        dataSource:
            {
                transport:
                {
                    read: { url: "@Url.Action("Tasks_Read","Home")", dataType: "json" },
                    update: { url: "@Url.Action("Tasks_Update","Home")", dataType: "json" },
                    create: { url: "@Url.Action("Tasks_Create","Home")", dataType: "json" },
                    destroy: { url: "@Url.Action("Tasks_Destroy","Home")", dataType: "json" },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return { models: kendo.stringify(options.models) };
                        }  
                    }
                },

            },
        schema: {

            model: { 
                id: "meetingID", 
                fields: { 
                    meetingID: { type: "number" }, 
                    title: { defaultValue: "No title", validation: { required: true } }, 
                    start: { type: "DateTime" }, 
                    end: { type: "DateTime" }, 
                    roomId: { nullable: true }, 
                    attendee: { defaultValue: 1 }, 
                    isAllDay: { type: "boolean" } 
                } 
            } 
        }

推荐答案

我使用JavaScript和HTML

I did this using JavaScript and HTML

演示可用，请点击此处 JSfiddle demo

这篇关于Kendo UI Scheduler的Javascript本地数据库绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！