C# MVC model層數據有變化，view層實現刷新

需要引用:

using Microsoft.AspNet.SingleR;

using Microsoft.AspNet.SignalR.Hubs;

實現方式：

操作數據庫后調用客戶端的函數，調用的方式是 通過ASP.NET SignalR實時通訊的功能，客戶端的函數觸發刷新功能。

 

ASP.NET SignalR是一個開源的實時通訊（real-time）庫，有了ASP.NET SignalR，我們可以在

詳細介紹參考：https://docs.microsoft.com/en-us/aspnet/signalr/overview/getting-started/introduction-to-signalr#what-is-signalr

入門demo：源代碼地址：https://github.com/mcgrady525/GettingStarted.SignalR

 

以下是我今天在實現此功能時針對我的項目所寫的代碼：

首先web端發送控閥指令給電信nbiot平台后，指令的狀態變化電信平台會推送到我們的平台。要實現的功能是平台收到后更新指令狀態，同時此時需要刷新頁面。

1、電信平台推送命令變化指令到接口，接口進行處理（接口是在mvc controller里處理，例如 CallBackController），同時在CallBackController里調用

// 命令狀態改變，觸發頁面，刷新\
new AlarmPushHub().ValvePush(meterAddr);

2、實時通信 aspnet.SingleR 代碼寫在單獨一個類里

using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;

namespace SmartMeterV5.Application.Web
{
[HubName("alarmHub")]
public class AlarmPushHub : Hub
{
[HubMethodName("alarmPush")]//客戶端調用，首字母要小寫
public void AlarmPush(string msg)
{
//因為在后台調用，所以要這樣寫，否則會出錯，提示Using a Hub instance not created by the HubPipeline is unsupported
var hubContext = GlobalHost.ConnectionManager.GetHubContext<AlarmPushHub>();
hubContext.Clients.All.ShowAlarm(msg); //用戶調用客戶端的函數
}

[HubMethodName("valvePush")]//客戶端調用，首字母要小寫
public void ValvePush(string meterAddr)
{
//因為在后台調用，所以要這樣寫，否則會出錯，提示Using a Hub instance not created by the HubPipeline is unsupported
var hubContext = GlobalHost.ConnectionManager.GetHubContext<AlarmPushHub>();
hubContext.Clients.All.Refresh(meterAddr); //用戶調用客戶端的函數
}
[HubMethodName("valvePushLoRaWan")]//客戶端調用，首字母要小寫
internal void valvePushLoRaWan(string meterAddr)
{
//因為在后台調用，所以要這樣寫，否則會出錯，提示Using a Hub instance not created by the HubPipeline is unsupported
var hubContext = GlobalHost.ConnectionManager.GetHubContext<AlarmPushHub>();
hubContext.Clients.All.refrenshloRaWan(meterAddr); //用戶調用客戶端的函數
}

}
}

 

 

3、頁面端，調用js。在js里進行處理。我這里直接放到類似母版頁掉的js中（lr-admin.js）

var loaddfimg;
var chat;
(function ($, learun) {
"use strict";

var page = {
init: function () {
/*判斷當前瀏覽器是否是IE瀏覽器*/
if ($('body').hasClass('IE') || $('body').hasClass('InternetExplorer')) {
$('#lr_loadbg').append('<img data-img="imgdw" src="' + top.$.rootUrl + '/Content/images/ie-loader.gif" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;vertical-align: middle;">');
Pace.stop();
}
else {
Pace.on('done', function () {
$('#lr_loadbg').fadeOut();
Pace.options.target = '#learunpacenone';
});
}

// 通知欄插件初始化設置
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": true,
"progressBar": false,
"positionClass": "toast-top-center",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "3000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
// 打開首頁模板
learun.frameTab.open({ F_ModuleId: '0', F_Icon: 'fa fa-desktop', F_FullName: '首頁', F_UrlAddress: '/Home/AdminDesktopTemp' }, true);
learun.clientdata.init(function () {
page.userInit();
// 初始頁面特例
bootstrap($, learun);

chat = page.startSignalRClient();

chat.client.refresh = function (meterAddr) {
//向頁面添加消息
console.log(meterAddr);
var src = $("iframe:last")[0].src;

alert("11," + src);
if (src.indexOf("Controlhistory?MeterAddr=" + meterAddr) > 0 &&
window.frames[window.frames.length - 1].acceptClick)
window.frames[window.frames.length - 1].acceptClick();
}

chat.client.refrenshloRaWan = function (meteraddr) {
//向頁面添加消息
console.log(meteraddr);
var src = $("iframe:last")[0].src;
if (src.indexOf("ControlhistoryLoRaWan?MeterAddr=" + meteraddr) > 0 &&
window.frames[window.frames.length - 1].acceptClick)
window.frames[window.frames.length - 1].acceptClick();
}
},

 

startSignalRClient: function (obj) {
var chat = $.connection.alarmHub;
$.connection.hub.start().done(function () {
console.log("connection success!");
});
return chat;
},

 

$(function () {
page.init();
});
})(window.jQuery, top.learun);

 

 

 

 

 

 

var src = $("iframe:last")[0].src;

alert("11," + src);
if (src.indexOf("Controlhistory?MeterAddr=" + meterAddr) > 0 &&
window.frames[window.frames.length - 1].acceptClick)
window.frames[window.frames.length - 1].acceptClick();
}

chat.client.refrenshloRaWan = function (meteraddr) {
//向頁面添加消息
console.log(meteraddr);
var src = $("iframe:last")[0].src;
if (src.indexOf("ControlhistoryLoRaWan?MeterAddr=" + meteraddr) > 0 &&
window.frames[window.frames.length - 1].acceptClick)
window.frames[window.frames.length - 1].acceptClick();
}