不用找了,比较全的signalR例子已经为你准备好了(2)---JqGrid 服务端刷新方式-注释详细-DEMO源码下载

    

   上次用客户端进行数据刷新的方式,和官方的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                 width: 500,
 53                 multiselect: false,
 54                 autowidth: 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', width: 60 },
 60                     { label: 'Price', name: 'Price', width: 80 },
 61                     { label: 'Brand', name: 'Brand', width: 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 }

 

效果图:

 

 

参考:

===>JqGridDemo<===

 

===>SignalR-StockTicker-Demo<===

 

项目文件:

 

===>官方StockTicker.zip<===

 

===>图中演示项目<===

 

posted @ 2015-04-08 17:24  爱吃猫的鱼  阅读(1711)  评论(0)  编辑  收藏  举报