zoukankan      html  css  js  c++  java
  • 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();
    }

  • 相关阅读:
    JavaWeb核心之Servlet
    Http&Tomcat
    XML&反射
    JDBC连接池和DBUtils
    JDBC
    testng依赖
    java mysql
    eclipse自动补全的设置
    java Logger 的使用与配置
    python数据持久存储:pickle模块的基本使用
  • 原文地址:https://www.cnblogs.com/zxdz/p/13323931.html
Copyright © 2011-2022 走看看