如何在Kendo Grid中使用SignalR数据源

debugcn 发表于 Dev

贾斯汀·范（Justin Pham）

为了制作实时.NET Web应用程序，我将SignalR用于Kendo网格，它与网格上的read，update，destroy方法一起使用。

但是，我的情况是从其他页面（Kendo Grid）创建和更新记录，而Kendo Grid仅用于读取数据。每当新记录添加到数据库中时，我都想实现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
    });

用户名

在其他页面上，您是指不同的应用程序吗？如果真是这样，这会使问题复杂化。

请记住，kendo网格仅带有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>

这将强制您所有连接的客户端进行刷新。理想的情况是将适当的更改推送给客户端。由于您不知道用户支持哪种过滤器/排序/分组，因此此实现可能会很棘手。但是，这是可以实现的。您可以让每个连接的客户端将其过滤器/分组/排序发送回服务器，并仅提取适当的更改。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。