上次用客户端进行数据刷新的方式,和官方的Demo实现存在差异性,今天花了一点时间好好研究了一下后台时时刷新的方式.将写的代码重新update了一次,在这之前找过好多的资料,发现都没有找到好的例子,自己查了一下官方的DEMO然后本地实现了一次,结合Jqgrid的前端库,发现还是非常便捷的.不多说了,直接上代码了.
前端代码:
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <link href="Style/jquery-ui.css" rel="stylesheet" /> 5 <link href="Style/ui.jqgrid.css" rel="stylesheet" /> 6 <link href="Style/ui.jqgrid-bootstarp.css" rel="stylesheet" /> 7 8 <!--Reference the jQuery library. this library should be first one --> 9 <script src="Scripts/jquery-1.10.2.min.js"></script> 10 <!--Reference the SignalR library. --> 11 <script src="Scripts/jquery.signalR-2.0.2.js"></script> 12 <!--Reference the jqgrid core library. --> 13 <script src="Scripts/jquery.jqGrid.min.js"></script> 14 <!--Reference the jqgrid language library. --> 15 <script src="Scripts/grid.locale-en.js"></script> 16 <!--Reference the autogenerated SignalR hub script. --> 17 <script src='signalr/hubs'></script> 18 19 <script type="text/javascript"> 20 21 var mydata = { State: "none", Price: 1.99, Brand: "none" }; 22 23 var ticket; 24 25 $(function () { 26 InitJqGrid(); 27 ticket = $.connection.pricehub; 28 InitTicket(ticket); 29 $.connection.hub.start().done(function () { 30 31 $("#btnstart").click(function () { 32 ticket.server.startTickets(); 33 }); 34 35 36 37 $("#btnstop").click(function () { 38 ticket.server.stopTickets(); 39 }); 40 }); 41 42 }) 43 44 45 46 // 47 function InitJqGrid() { 48 $("#tbprice").jqGrid({ 49 datatype: "local", 50 data: mydata, 51 height: 600, 52 500, 53 multiselect: false, 54 auto true, 55 rownumbers: true, 56 rowNum: 50, //if you don't set this ,the page size will just show about 20 row counts. 57 colNames: ['State', 'Price', 'Brand'], 58 colModel: [ 59 { label: 'State', name: 'State', 60 }, 60 { label: 'Price', name: 'Price', 80 }, 61 { label: 'Brand', name: 'Brand', 80 } 62 ], 63 viewrecords: true, // show the current page, data rang and total records on the toolbar 64 caption: "Current Price Tag", 65 pager: "#jqGridPager" 66 }); 67 } 68 69 70 function refreshGrid($grid, results) { 71 $grid.jqGrid('clearGridData') 72 .jqGrid('setGridParam', { data: results }) 73 .trigger('reloadGrid'); 74 } 75 76 77 function InitTicket(ticket) { 78 //init the client function 79 ticket.client.updateprice = function (tickets) { 80 refreshGrid($("#tbprice"), tickets); 81 } 82 } 83 </script> 84 85 <title>Price Price </title> 86 87 88 </head> 89 <body> 90 91 92 <div> 93 <input type="button" id="btnstart" value="Start" /> 94 95 <input type="button" id="btnstop" value="Stop" /> 96 </div> 97 <div> 98 <table id="tbprice"></table> 99 <div id="jqGridPager"></div> 100 </div> 101 </body> 102 103 104 105 </html>
后端代码:
1 using Microsoft.AspNet.SignalR; 2 using Microsoft.AspNet.SignalR.Hubs; 3 using SignalRChat.Hubs.Data; 4 using System; 5 using System.Collections.Generic; 6 using System.Linq; 7 using System.Web; 8 using System.Threading; 9 10 namespace SignalRChat.Hubs 11 { 12 [HubName("pricehub")] 13 public class PriceHub : Hub 14 { 15 private readonly TicketPrice _ticketprice = new TicketPrice(); 16 17 private readonly object _ticketrefreshlock = new object(); 18 19 private readonly object _ticketupdatelock = new object(); 20 21 //the time val should be static or in the static class 22 private static Timer _timer; 23 24 //the Interval of call function 25 private readonly TimeSpan _updateInterval = TimeSpan.FromMilliseconds(2000); 26 27 private static string state = "close"; 28 29 [HubMethodName("startTickets")] 30 public void StartTickets() 31 { 32 lock (_ticketrefreshlock) 33 { 34 //the judge if it is necessary to init another thread to fresh the value 35 if (state == "close") 36 { 37 _timer = new Timer(RefreshTicket, null, _updateInterval, _updateInterval); 38 state = "open"; 39 } 40 } 41 } 42 43 44 45 [HubMethodName("stopTickets")] 46 public void StopTickets() 47 { 48 lock (_ticketrefreshlock) 49 { 50 if (state == "open") 51 { 52 if (_timer != null) 53 { 54 _timer.Dispose(); 55 state = "close"; 56 } 57 } 58 } 59 } 60 61 private void RefreshTicket(object state) 62 { 63 lock (_ticketupdatelock) 64 { 65 //return the tickets to client 66 BroadcastPriceTicketBoard(_ticketprice.GetAllTickets()); 67 } 68 } 69 70 71 //this is the reference for client broswer to update the price ,and pass the value to client . 72 private void BroadcastPriceTicketBoard(List<TicketPrice> tickets) 73 { 74 //call the client javascript function to refresh data to jqgrid table(the caller proproty mean the data only to pass to caller ,not all clients) 75 Clients.Caller.updateprice(tickets); 76 } 77 78 } 79 }
效果图:
参考:
===>SignalR-StockTicker-Demo<===
项目文件: