如何将 SignalR 数据源与 Kendo 网格一起使用

Question

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

然而，我的情况是从其他页面创建和更新记录，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();
    }
}

Index.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
});

Answer 1

其他页面，你指的是不同的应用？如果是这样的话，这将使问题复杂化。

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

这是一个示例，您可以如何让 "connected" 客户端进行刷新读取。

在您的中心：

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>

这将强制所有连接的客户端进行刷新。完美的场景是将适当的更改推送给客户端。此实现可能会变得棘手，因为您不知道 filter/sort/grouping 用户在他们这边有什么。然而，这是可以实现的。您可以让每个连接的客户端将其 filter/grouping/sort 发送回服务器并仅提取适当的更改。

如何将 SignalR 数据源与 Kendo 网格一起使用

How to use SignalR Datasource with Kendo Grid

c#

asp.net-mvc

push-notification

kendo-ui

signalr