實時數據顯示


實時數據顯示--SignalR實例演示

近段時間,有實現一個看板的功能,就是用戶更新信息時,即是對數據庫的數據進行插入,更新,或是刪除時,在牆上的屏幕的數據不需要人為去刷新,用戶就能看到更新后的數據。

實現此功能,Insus.NET使用SignalR的技術來實現。下面的實例中,雖然不是實際的數據,但是實現過程是一樣的,現在分享給大家學習學習......


在項目中安裝SignalR:

 

 

 

上圖中,把綠色對鈎的組件均選擇安裝。

安裝完成,你看到一個readme.txt文件:

 

 

 

此你應該知道它在說什么。看了,在App_Start目錄中,創建一個類,類名為Startup:

 

 

 

 

 

 

接下來,我們需要在Global.asax.cs的Application_Start和Application_End方法中,添加下面高亮的2行代碼:

 

 

 

當然你的Web.config的配置文件中,還得添加真正的MS SQL Server連接語句。

 

 TableB model:

 

 

 

現在,在項目錄中,創建一個SignalR目錄,我們就可以在這個目錄中添加Hub類了:

 

 

 

所有客戶端使用的方法名,均使用駝峰寫法,小寫開頭。

現在,我們需要實現去數據庫獲取數據,當數據庫的數據變化時,客戶端也能實時顯示:


 


上圖中的藍色箭頭的Hub的方法,即是再前一張圖中的Show方法(#17行代碼)。另外有關SqlDependency類,可以查閱MSDN的網站。

 

 在MVC的項目的控制器中,我們創建2個Action操作:

 

 

 

創建視圖,參考下面的步驟:



上面#3和#4是一樣。在ASP.NET MVC 4.0之后,可以使用~/signalr/js,不過在新版的.NET是,使用#3的寫法還是行的。

另外引用js的順序有講究。先引用jQuery,再引用SignalR的,再引用#3或#4。

上面標記#6的js代碼,參考下面:


 

 上面標記#7的樣式代碼:

 

  Source Code

 

 

 

下面是實時演示,Insus.NET有使用幾個瀏覽器Edge,IE,Firefox,Chrome,並在數據庫進行添加記錄,修改數據和刪除數據,所有客戶端均能實時顯示:


 

 

 

 

 

分類:  ASP.NETASP.NET MVCjQueryJSONSignalR


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM