SignalR 和 Kendo Ui 调度程序

Posted

技术标签:

【中文标题】SignalR 和 Kendo Ui 调度程序【英文标题】:SignalR and Kendo Ui Scheduler 【发布时间】:2014-07-28 00:41:22 【问题描述】:

我正在使用 SignalR 和 Kendo Scheduler 进行实施。创建新任务时(例如),SchedulerDataSource 传输将连接集线器 ID 作为附加参数发送到服务器:

transport: 
    read:  url: global.web_path + 'Home/Tasks' ,
    update:  url: global.web_path + 'Home/UpdateTask', type: 'PUT', contentType: 'application/json' ,
    create:  url: global.web_path + 'Home/CreateTask', type: 'POST', contentType: 'application/json' ,
    destroy:  url: global.web_path + 'Home/DeleteTask', type: 'DELETE', contentType: 'application/json' ,
    parameterMap: function (options, operation) 
        if (operation == "destroy" && options.models) 
            return JSON.stringify( taskId: options.models[0].Id, callerId: $.connection.hub.id );
        
        if (operation !== "read" && options.models) 
            return JSON.stringify( tasks: options.models, callerId: $.connection.hub.id );
        
    
,

服务器做它必须做的任何事情,并向除调用者之外的所有其他用户发送通知:

[HttpPost]
public JsonResult CreateTask(List<ScheduledEvent> tasks, string callerId)

   ...create task and other stuff

   //broadcast the newly created object to everyone except caller
   var hubContext =     GlobalHost.ConnectionManager.GetHubContext<Notebooks.Hubs.SchedulerHub>();
   hubContext.Clients.AllExcept(callerId).UpdateSchedule(task);

   //return the object to caller
   return Json(task);

一旦其他客户端收到来自中心的新任务,它就会被添加到 SchedulerDataSource:

hub.client.updateSchedule = function (scheduledEvent) 
   schedulerDataSource.add(scheduledEvent);

似乎一切正常,我确实花了一些时间才意识到这种行为:如果客户端打开了调度程序窗口,则一旦更新了 schedulerDataSource,该窗口就会关闭。这是意料之中的还是我做错了什么?

【问题讨论】:

听起来像是预期的行为,因为.add 事件将关闭约会编辑对话框。 【参考方案1】:

编辑:我刚刚意识到这个问题有多老了,所以您现在可能已经转移到其他事情上,或者当时可能不存在 pushCreate 方法。

我认为这可能是它的工作方式,但它似乎应该能够在幕后添加这些事件而无需关闭编辑窗口。你试过pushCreate method吗?如果这不起作用,由于添加会自动关闭编辑对话框,也许当事件进入时,如果对话框打开,您可以存储新事件,然后在用户关闭编辑对话框时添加它们。

【讨论】:

【参考方案2】:

我的答案现在更老了 ;) 但我今天遇到了同样的问题。

首先,我很确定这确实是预期的行为。您可以在 kendo 源代码中看到传输更新中关闭编辑器窗口方法的调用以及调度程序的创建方法。

以下是我为绕过该问题所做的工作。 这个想法很简单,当约会修改来自另一个中心客户端时,防止编辑窗口关闭。

服务器端:修改中心方法(以更新方法为例)

    public MyAppointmentViewModel Update(MyAppointmentViewModel appointment)
    
        if (!appointmentService.Update(appointment))
             throw new InvalidOperationException("Something went wrong");
        else
        
             Clients.Others.PrepareBeforeAddOrUpdateSignal(appointment.Id);
             Clients.Others.Update(appointment);
             return appointment;

        
    

您在这里看到我们通知所有其他客户(通过 PrepareBeforeAddOrUpdate)我们即将更新一个应用程序。

现在是客户端(例如在 index.cshtml 中)

schedulerHub.client.prepareBeforeAddOrUpdateSignal = function(id) lastModifiedRdvId = id; ;
schedulerHub.client.create = function(appointment) lastModifiedRdvId = 0; ; /* reset the variable for next time */
schedulerHub.client.update = function(appointment) lastModifiedRdvId = 0; ; /* reset the variable for next time */

function SchedulerEditor()

    return $(".k-scheduler-edit-form").data("kendoWindow");


var eventBeforeChanges = null;
var lastModifiedRdvId = 0;

function onEditorClose(e) 
    if (eventBeforeChanges != null) 
        if (lastModifiedRdvId > 0 && eventBeforeChanges.Id != lastModifiedRdvId)
            e.preventDefault();
    else 
        var editWin = SchedulerEditor(); /* unbind this callback and use default behavior again */
        editWin.unbind('close', onEditorClose);
    

function onEditRdv(e)     
    var editWin = SchedulerEditor();
    if (editWin != null) /*Bind the close event */
        editWin.unbind('close', onEditorClose).bind('close', onEditorClose);

     eventBeforeChanges = e.event;

     /* continue onEditRdv */

您在此处看到,当约会 id 不是当前客户端更新的约会 id 时,关闭事件被阻止。

幸运的是,防止关闭事件可以防止在另一个中心客户端更改一个后,出现类似幽灵约会的烦人行为。

如果我不清楚或代码不够清楚,我很抱歉。如有需要,我可以提供更多信息。

再见

【讨论】:

以上是关于SignalR 和 Kendo Ui 调度程序的主要内容,如果未能解决你的问题,请参考以下文章

启用服务器过滤、排序、分页会中断 MVC Kendo UI 网格的 SignalR 客户端更新

过滤 kendo ui 调度程序

更改 Kendo UI 调度程序中事件的宽度

有没有办法在 kendo ui 调度程序中禁用特定事件?

如何以编程方式为 Kendo Ui 调度程序调用导航事件

在 kendo ui 的调度程序导航中更改日期格式