SignalR2结合ujtopo实现拓扑图动态变化

   上一篇文章基于jTopo的拓扑图设计工具库ujtopo,介绍了拓扑设计工具,这一篇我们使用SignalR2结合ujtopo实现拓扑图的动态变化。

        仅仅作为演示,之前的文章SignalR2简易数据看板演示,用一个小的示例演示了SignalR作为数据看板的用法,这次我们将这个例子稍微改变一下,当点击【数据模拟】的时候,数据还是加1,当为奇数时,改变其中一个结点的图片,当为偶数时,再把这个结点的图片改变为另一张图片;以此为基础,可以延伸出很多应用。

        软件环境:VS2015

        使用VS2015创建.net Framework4.5的Web应用程序,选择MVC,身份认证选择不需要身份验证。

        Nuget包,选择AdminLTE,选择安装,版本是最新的2.4.0。

        Nuget包,选择WebHelpers.Mvc5,选择安装,版本是最新的2.1.0。

        SignalR的安装,请参见之前的博文SignalR 2 入门

        Designer.cshtml页面跟上篇博文jTopo的拓扑图设计工具库ujtopo designer.html一样;

        Index.cshtml页面引入SignalR2


@Scripts.Render("~/Bundles/ujtopo")

    <script src="@Url.Content("~/Scripts/jquery.signalR-2.4.0.min.js")"></script>

    <script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>


Bundles/ujtopo使用Bundle压缩了ujtopo相关的js


bundles.Add(new ScriptBundle("~/Bundles/ujtopo")

                .Include("~/Content/js/plugins/jTopo/jtopo-0.4.8-min.js")

                .Include("~/Content/js/plugins/jTopo/toolbar.js")

                .Include("~/Content/js/plugins/ujtopo/ujtopo.js"));

其它的代码同上篇博文jTopo的拓扑图设计工具库ujtopo 中的index.html一样;topo初始化之后连接SignalR。


var startConn = function () {

            var connection = $.hubConnection();

            var hub = connection.createHubProxy("ChartHub");

            hub.on("updateChart"function (chart) {

                var tmp = chart % 2;

                if (tmp == 1) {

                    var eNode = jtopo.findNode('j_10');

                    if (eNode != null && eNode != undefined) {

                        eNode.setImage(rootUrl + "Images/ujtopo/net-yuan.png"true);

                    }

                }

                else {

                    var eNode = jtopo.findNode('j_10');

                    if (eNode != null && eNode != undefined) {

                        eNode.setImage(rootUrl + "Images/ujtopo/comb-brush-hair-make.png"true);

                    }

                }

            });

            connection.start();

        }

j_10是指的baby坐浴椅这个节点,因为我们在设计的时候,它的id是10,前面加了前缀j_是因为使用的是uid


dealArgs = function (args) {

        args.uid = "j_" + args.id;

        return args;

    },  

另外,当具有signalr的网站未以根网站运行时,不是使用/signalr,使用../signalr。它适用于任何站点名称文件夹。没有硬编码名称'

var connection = $.hubConnection('../signalr', {useDefaultPath: false});

https://www.e-learn.cn/content/wangluowenzhang/723307

用designer页面设计了拓扑图,在index页面展示

640?wx_fmt=png

640?wx_fmt=png

640?wx_fmt=png

GitHub:https://github.com/net-yuan/ujtopo-SignalR

文章同步在http://net-yuan.com/Article/Detail/20b4742a-305f-4534-9298-dad957f8807d

演示地址:http://net-yuan.com/ujtopo/

原文地址:https://www.cnblogs.com/net-yuan/p/SignalR-ujtopo.html

.NET社区新闻,深度好文,欢迎访问公众号文章汇总 http://www.csharpkit.com
640?wx_fmt=jpeg


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/316860.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

树的同构模板题(法1.最小表示法+法2.树哈希)

树的同构problemsolutioncodesolutioncodeproblem 模板题 solution Ⅰ. 最小表示法 将树转化为 0/10/10/1 括号序列&#xff1a;从根开始 dfs\text{dfs}dfs&#xff0c;000 就往下遍历一个儿子&#xff0c;111 就返回&#xff0c;构成一个 2n2\times n2n 的括号序列。 显然…

CF917B MADMAX

CF917B MADMAX 题意&#xff1a; Alice和Bob有一个n个点m条边的DAG&#xff0c;每条边上有一个小写英文字母表示权值&#xff0c;Alice和Bob每人有一个棋子&#xff0c;每个人放在一个节点上&#xff08;可以放在同一个节点上&#xff09;。 第一轮Alice可以沿一条边把棋子移…

CF1534F:Falling Sand(tarjan、贪心、dp)

解析 本题做的过程大概是&#xff1a;到了正解门口决定回头&#xff0c;绕了地球一圈最后从另一边走到正解了… 我的分析&#xff1a; 首先 easy version 很简单&#xff0c;如果从一列最大值可以走到另一列最大值&#xff0c;那么后者就没用了。缩完点所有的零度点就是答案。…

Ocelot 入门Demo系列(01-Ocelot极简单Demo及负载均衡的配置)

来源&#xff1a;https://www.cnblogs.com/7tiny/p/10493805.html【前言】Ocelot是一个用.NET Core实现并且开源的API网关&#xff0c;它功能强大&#xff0c;包括了&#xff1a;路由、请求聚合、服务发现、认证、鉴权、限流熔断、并内置了负载均衡器与Service Fabric、Butterf…

CF464E The Classic Problem(主席树+哈希+最短路)

CF464E The Classic Problemproblemsolutioncodeproblem 题目链接 solution 经典题。 本题很特别的是每条边的边权都是 222 的幂&#xff0c;而且数据读入的是指数。 所以可以将路径权值看作一个二进制串&#xff0c;每加一条边就是对应二进制位 111&#xff0c;当然会有相…

CF1192B Dynamic Diameter(LCT)

Foreword\text{Foreword}Foreword zhengrunzhe 大佬的矩阵做法过于神奇&#xff0c;蒟蒻无法理解… 欧拉序的做法确实非常巧妙&#xff0c;但我也想不到这么神仙的做法… 提供一种可能简单一些的 LCT 做法。 由于本人 LCT 无法像大佬那么神&#xff0c;讲的会比较详细一些&…

博弈论(基础概念+例题)

博弈论(b站视频) 文章目录一些概念以Nim游戏为例Nim游戏介绍定义 必败/必胜局面必败/必胜局面的判定引理Nim游戏判定引理的等价命题有向图游戏对判定引理的数学描述-Sg函数有向图游戏的和题目&#xff1a;[有向图游戏][有向图游戏的和][构造/转化类]一些概念 以Nim游戏为例 Ni…

.NET Core 3.0 linux 部署小贴士

dotnet core 3.0 目前还是测试版&#xff0c;在linux下安装 sdk 需要有一些注意事项1.下载urlhttps://dotnet.microsoft.com/download/thank-you/dotnet-sdk-3.0.100-preview-009812-linux-x64-binaries2.安装指令mkdir -p $HOME/dotnet && tar zxf dotnet-sdk-3.0.100…

莓良心(第二类斯特林数)

莓良心problemsolutioncodeproblem 莓在执行任务时&#xff0c;收集到了 nnn 份岩浆能源&#xff0c;其中第 iii 份的能量值是 wiw_iwi​ &#xff0c;她 决定将它们分成恰好 kkk 组带回基地&#xff0c;每一组都要有至少 111 份能源。 每一组能源会对运输设备产生负荷值&…

CF1654E Arithmetic Operations(根号分治)

解析 降智谔谔题。 明明都把做法大块想出来&#xff0c;最后很沙雕的一步掉牛角尖里了… 无能狂怒之下写了一发实际复杂度 n2n^2n2 的代码。 不过暴力艹题还是很爽的。 可能确实不太好卡吧&#xff0c;让我自己构造我是卡不掉。 更何况CF应该不会有人和我一样在如此沙雕的地方…

P2575 高手过招

P2575 高手过招 题意&#xff1a; AKN玩游戏玩累了&#xff0c;于是他开始和同伴下棋了&#xff0c;玩的是跳棋&#xff01;对手是wwx&#xff01;这两位上古神遇在一起下棋&#xff0c;使得棋局变得玄幻莫测&#xff0c;高手过招&#xff0c;必有一赢&#xff0c;他们都将用…

PuppeteerSharp: 更友好的 Headless Chrome C# API

前端就有了对 headless 浏览器的需求&#xff0c;最多的应用场景有两个UI 自动化测试&#xff1a;摆脱手工浏览点击页面确认功能模式爬虫&#xff1a;解决页面内容异步加载等问题也就有了很多杰出的实现&#xff0c;前端经常使用的莫过于 PhantomJS 和 selenium-webdriver&…

尽梨了(贪心+dp)

尽梨了problemsolutioncodeproblem 丰之崎学园附近共有 nnn 个商店&#xff0c;在时刻 000 时&#xff0c;英梨梨从学园出发开始购物。 从学园走到任意一个商店&#xff0c;或从一个商店走到另一个商店需要 111 单位时间。 如果英梨梨在时刻 ttt 到达了商店 iii &#xff0c…

CF1612G Max Sum Array

解析 被蓝题虐了。&#xff08;悲 确实不太难&#xff0c;就是没往那边想。 考虑如果某个值的下标分别位 i1,i2,...,ini_1,i_2,...,i_ni1​,i2​,...,in​ 那么如何计算贡献。 每一个下标和前面统计时作为被减数&#xff0c;和后面统计时作为减数&#xff0c;所以 iki_kik​ …

【Acwing 219. 剪纸游戏】

【Acwing 219. 剪纸游戏】 题意&#xff1a; 给定一张 NM 的矩形网格纸&#xff0c;两名玩家轮流行动。 在每一次行动中&#xff0c;可以任选一张矩形网格纸&#xff0c;沿着某一行或某一列的格线&#xff0c;把它剪成两部分。 首先剪出 11 的格纸的玩家获胜。 两名玩家都采取…

中国.NET:东莞+长沙.NET俱乐部现场花絮及合肥、苏州、上海等地活动预

《传承有序》与微软技术的发展历程相似&#xff0c;微软俱乐部的发展经历着沉沉浮浮&#xff0c;曾经随着微软走向封闭与固执&#xff0c;.NET社区年轻一代的声音被忽略&#xff0c;.NET社区后继无人。社区的沉默是可怕的&#xff0c;很多社区沉寂消亡。但是在2018年&#xff0…

团不过(dp)

团不过problemsolutioncodeproblem 由比滨结衣和雪之下雪乃在玩 NimNimNim 游戏。 共有 nnn 堆石子&#xff0c;双方轮流操作&#xff0c;每次可以从一堆非空石子堆中取走任意个石 子&#xff0c;取走最后一个石子的人胜利。 她们决定让由比滨结衣先手&#xff0c;但忘记了每…

【AcWing 235. 魔法珠

【AcWing 235. 魔法珠 题意&#xff1a; 有n堆魔法珠&#xff0c;第i堆有ai个&#xff0c;两个人轮流进行以下操作&#xff1a; 当轮到某人操作时&#xff0c;如果每堆中魔法珠的数量均为 1&#xff0c;那么他就输了。 问谁赢谁输 题解&#xff1a; 经典博弈论问题 注意本…

P5039 [SHOI2010]最小生成树(网络流)

解析 我大受震撼。 真的没想到是网络流。&#xff08;事后诸葛&#xff1a;看几百的数据范围应该试试枚举算法&#xff09; 一道比较开眼界的题吧。 然而用一个十分钟写完的假做法可以骗90分&#xff0c;还是挺香的 首先是一个没什么意思的转化&#xff1a;操作等价于给一条边…

Abp vNext 切换MySql数据库

Abp vNext是Abp的下一代版本&#xff0c;目前还在经一步完善&#xff0c;代码已经全部重写了&#xff0c;好的东西保留了下来&#xff0c;去除了很多笨重的东西&#xff0c;从官宣来看&#xff0c;Abp vNext主要是为了以后微服务架构而诞生的。从源码来看&#xff0c;Abp vNext…