Telerik UI for ASP。网络核心?下载30天免费试用

SignalR绑定

SignalR允许您向网格添加实时功能。SignalR负责后台的所有工作,使实时客户端到服务器以及服务器到客户端通信成为可能。这在多方同时编辑Grid的协作场景或使用推送通知的应用程序中非常有用。

你可以在MVC和Core的Telerik UI helper中使用它,因为它们包装了jQuery网格的剑道UI

有关可运行的示例,请参阅Grid组件的SignalR绑定的演示

截至ASP。NET Core R2 2018年发布,该套件为其组件提供了SignalR支持。使用SignalR 1.0.0-rc1-final对该特性进行了测试。

本文提供了使用SignalR与网格绑定的逐步说明。

设置SignalR服务

首先安装SignalR NuGet包,并配置SignalR连接到集线器在SignalR请求:

  1. 在项目中安装Microsoft.AspNetCore.SignalR NuGet包。

  2. 注册服务并将返回的JSON序列化到PascalCase。请参阅我们的JSON序列化文章有关序列化的更多信息。

  3. Startup.cs解决方案的文件,映射SignalR集线器的端点。

使用SignalR.Mvc;public void Configure万博体育手机版网址Services(IServiceCollection services){//添加框架服务。万博体育手机版网址services . addcontrollerswithviews() //在序列化期间维护属性名。参见:// https://github.com/aspnet/Announcements/issues/194 .AddNewtonsoftJson(options => options. serializersettings . contractresolver = new DefaultContractResolver());//添加Kendo UI服务到s万博体育手机版网址ervices容器中万博体育手机版网址services.AddKendo ();//添加SignalR。万博体育手机版网址services.AddSignalR()。AddJsonProtocol(x => x. payloadserializeroptions . propertynamingpolicy = null);} public void Configure(IApplicationBuilder app, IWebHostEnvironment env){//为了清晰起见,省略了一些代码。 app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); endpoints.MapHub("/gridHub"); }); }

配置Hub访问和存储数据

SignalR使用在客户机和服务器之间进行通信的集线器.集线器是允许客户端-服务器通信的高级管道。SignalR Hubs API允许您从服务器调用连接客户端的方法。

类中定义中心中心/ GridHub.cs文件:

使用Core_CustomKendoGrid_with_SignalR.Models;使用Microsoft.AspNetCore.SignalR;使用系统;使用System.Collections.Generic;使用来;使用System.Threading.Tasks;名称空间SignalR。Mvc{公共类GridHub: Hub{公共覆盖System.Threading.Tasks.Task OnConnectedAsync() {Groups.AddToGroupAsync(上下文。ConnectionId GetGroupName ());返回base.OnConnectedAsync ();} public override System.Threading.Tasks.Task OnDisconnectedAsync(Exception e) {Groups.RemoveFromGroupAsync(上下文。ConnectionId GetGroupName ()); return base.OnDisconnectedAsync(e); } public IEnumerable Read() { var result = Enumerable.Range(1, 50).Select(i => new OrderViewModel { OrderID = i, Freight = i * 10, OrderDate = new DateTime(2016, 9, 15).AddDays(i % 7), ShipName = "ShipName " + i, ShipCity = "ShipCity " + i }).ToList(); return result; } public OrderViewModel Create(OrderViewModel product) { Clients.OthersInGroup(GetGroupName()).SendAsync("create", product); return product; } public void Update(OrderViewModel product) { Clients.OthersInGroup(GetGroupName()).SendAsync("update", product); } public void Destroy(OrderViewModel product) { Clients.OthersInGroup(GetGroupName()).SendAsync("destroy", product); } public string GetGroupName() { return GetRemoteIpAddress(); } public string GetRemoteIpAddress() { return Context.GetHttpContext()?.Connection.RemoteIpAddress.ToString(); } } }

在页面中包括SignalR的客户端实现

连接视图(例如,视图/ Home / Index.cshtml)在初始化使用集线器的网格之前。

SignalR客户端与服务器组件一起提供,并进行了版本匹配。任何受支持的客户端都可以安全连接到任何受支持的服务器。请参阅官方的SignalR文档查看客户端安装信息。

  . var

使用长轮询是因为只在一些场景而且服务器发送的事件IE/Edge不支持。

配置网格的数据源传输

接下来的步骤是配置Grid的DataSource Transport以连接到SignalR Hub。指示数据源使用SignalR协议实时传输和操作数据。

@(Html.Kendo().Grid() .Name("grid") .Columns(columns => {columns. select ();列。Bound(p => p. orderid).Filterable(true);列。绑定(p => p. freight);列。绑定(p = > p.OrderDate) .Format(“{0:MM / dd / yyyy}”);列。绑定(p => p. shipname);列。Bound(p => p.ShipCity).Width(250); columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200); }) .ToolBar(c => { c.Create(); c.Save(); c.Search(); }) .Scrollable() .Sortable() .DataSource(dataSource => dataSource .SignalR() .AutoSync(true) .Transport(tr => tr .Promise("hubStart") .Hub("hub") .Client(c => c .Read("read") .Create("create") .Update("update") .Destroy("destroy")) .Server(s => s .Read("read") .Create("create") .Update("update") .Destroy("destroy"))) .Schema(schema => schema .Model(model => { model.Id("OrderID"); model.Field("OrderID", typeof(string)).Editable(false); model.Field("Freight", typeof(decimal)); model.Field("OrderDate", typeof(DateTime)); model.Field("ShipName", typeof(string)); model.Field("ShipCity", typeof(string)); } ) ) )

带有推送通知的SignalR

下面的例子演示了一个Grid的示例实现,它使用SignalR显示推送通知。已使用的服务在这个GitHub存储库

$(document).ready(function() {var hubUrl = "http://domain/signalr-service/products";var hub = new signalR.HubConnectionBuilder() .withUrl(hubUrl, {transport: signalR.HttpTransportType.LongPolling}) .build();var hubStart = hub.start();});函数onPush(e) {var notification = $("#notification").data("kendoNotification");notification.success (e.type);}
@(Html.Kendo(). notification (). name ("notification") . width ("100%") . position (position => position . top (50) . left (50))) @(Html.Kendo().Grid< kendo . mvc . samples . models . productviewmodel >() . name ("Grid") . columns (columns => {columns。绑定(p => p. productname);列。Bound(p => p. unitprice);列。绑定(p => p. createdat);列。命令(Command => {Command . edit ();command.Destroy ();}) .Width (150);}) .HtmlAttributes(new {style = "height: 550px;margin-bottom:20px;" }) .ToolBar(toolbar => { toolbar.Create(); }) .Editable(editable => editable.Mode(GridEditMode.InCell)) .Sortable() .Scrollable() .DataSource(dataSource => dataSource .SignalR() .AutoSync(true) .Events(events => events.Push("onPush")) .Transport(tr => tr .Promise("hubStart") .Hub("hub") .Client(c => c .Read("read") .Create("create") .Update("update") .Destroy("destroy")) .Server(s => s .Read("read") .Create("create") .Update("update") .Destroy("destroy"))) .Schema(schema => schema .Model(model => { model.Id("ID"); model.Field("ID", typeof(string)).Editable(false); model.Field("ProductName", typeof(string)); model.Field("CreatedAt", typeof(DateTime)); model.Field("UnitPrice", typeof(int)); } ) ) ) )

另请参阅

在本文中
Baidu
map