如何将 SignalR 数据源与 Kendo Grid 一起使用答案

【问题标题】：How to use SignalR Datasource with Kendo Grid如何将 SignalR 数据源与 Kendo Grid 一起使用
【发布时间】：2015-06-14 06:38:50
【问题描述】：

为了制作实时的 .NET Web 应用程序，我使用 SignalR for Kendo 网格，它与网格上的读取、更新、销毁方法一起使用。

但是，我的情况是从其他页面创建和更新记录，剑道网格仅用于读取数据。我想实现 SignalR 以在将新记录添加到数据库时通知用户。

这是我的代码

SignalRHub class     public class SignalRHub : Hub
{
    private DbEntities db;
    public SignalRHub()
    {
        db = new DbEntities();
    }

    public IEnumerable<ViewTicketModel> Read()
    {
        return db.Post_User.AsEnumerable().Select(ticket => new ViewTicketModel
        {
            Id = ticket.Id,
            BuyerName = ticket.Name,
            DateCreated = ticket.CreatedOn.ToString("dd/MM/yyyy"),
            BuyerPhoneNumber = ticket.Mobile,
            Details = ticket.Details,
            Location = ticket.Location,
        }).OrderByDescending(x => DateTime.ParseExact(x.DateCreated, "dd/MM/yyyy", null)).ToList();
    }
}

索引.cshtml

    var connection = $.connection;
    var hub = connection.signalRHub;
    var hubStart = connection.hub.start();
    console.log("here");
    var signalRDataSource = new kendo.data.DataSource({
        type: "signalr",
        autoSync: true,
        push: function(e) {
            var notification = $("#notification").data("kendoNotification");
            notification.success(e.type);
        },
        schema: {
            model: {
                id: "Id",
                fields: {
                    "Id": { editable: false, type: "Number" },
                    "BuyerName": { type: "string" },
                    "DateCreated": { type: "string" },
                    "BuyerPhone": { type: "string" },
                    "Details": { type: "string" },
                    "Location": { type: "string" }
                }
            }
        },
        transport: {
            signalr: {
                promise: hubStart,
                hub: hub,
                server: {
                    read: "read",
                },
                client: {
                    read: "read",
                }
            }
        },
        pageSize: 10,
});

    $("#grid").kendoGrid({
        height: 700,           
        filterable: {
            extra: false,
        pageable: true,
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        columns: [
                { field: "Id", title: "Notification Id", width: 100, hidden: true },
                {
                    field: "DateCreated",
                    title: "Date Created",
                    width: 150,
                    filterable: {
                        ui: "datetimepicker"
                    }
                },
                { field: "Location", title: "Location", width: 150 },                   
                { field: "BuyerName", title: "Buyer Name", width: 120, hidden: true },
                { field: "BuyerPhoneNumber", title: "Buyer Phone", width: 120, hidden: true },
        ],
        dataSource: signalRDataSource
    });

【问题讨论】：

查看这篇文章demos.telerik.com/kendo-ui/grid/signalr
感谢 Anik，我在实现剑道网格时已经阅读了这篇文章。在文章中，示例显示 SignalR 仅在您在网格中执行 CRUD 时才有效。我的问题是，如果您在网格之外（例如在其他页面上）执行 CUD 并且只在 Kendo Grid 中使用 Read，我们该怎么做？
@JustinPham 你找到解决方案了吗？如果是这样，您能否更新/回答您的问题？

标签： c# asp.net-mvc kendo-ui push-notification signalr

【解决方案1】：

通过其他页面，您的意思是不同的应用程序？如果是这样的话，这将使问题复杂化。

记住剑道网格只有 4 个默认的信号动作（创建、更新、读取、销毁）。任何其他都必须由您实施。

这是一个示例，您可以如何让“已连接”的客户端进行刷新读取。

在您的中心：

IHubContext context = GlobalHost.ConnectionManager.GetHubContext<Dashboard>();
        context.Clients.All.reload();

在您的客户端 html 页面中：

<script type="text/javascript">
var hub = $.connection.dashboard;
hub.client.reload = function () {
    updategrid();
};
var hubStart = $.connection.hub.start();
function updategrid()
{
    $('#GridName').data('kendoGrid').dataSource.read();
    $('#GridName').data('kendoGrid').refresh();
}</script>

这将强制所有连接的客户端进行刷新。完美的场景是将适当的更改推送给客户端。这个实现可能会变得很棘手，因为你不知道用户有什么过滤器/排序/分组。不过，这是可以实现的。您可以让每个连接的客户端将其过滤器/分组/排序发送回服务器并仅提取适当的更改。

【讨论】：