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,一经查实,立即删除!

相关文章

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

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

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

博弈论(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…

PuppeteerSharp: 更友好的 Headless Chrome C# API

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

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

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

【AcWing 235. 魔法珠

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

Abp vNext 切换MySql数据库

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

采用.NET CORE的全异步模式打造一款免费的内网穿透工具--NSmartProxy

什么是NSmartProxy&#xff1f;NSmartProxy是一款免费的内网穿透工具。特点跨平台&#xff0c;客户端和服务端均可运行在MacOS&#xff0c;Linux&#xff0c;Windows系统上&#xff1b;使用方便&#xff0c;配置简单&#xff1b;多端映射&#xff0c;一个NSmart Proxy客户端可以…

Acwing 236. 格鲁吉亚和鲍勃(博弈论妙题)

Acwing 236. 格鲁吉亚和鲍勃 题意&#xff1a; 一排网格&#xff0c;将网格从左到右依次编号 1,2,3&#xff0c;…&#xff0c;并将 N 个西洋棋棋子放在不同的网格上&#xff0c;如下图所示&#xff1a; 两个人轮流移动棋子 每次玩家选择一个棋子&#xff0c;并将其向左移动…

.NET Core 跨平台 串口通讯 ,Windows/Linux 串口通讯

1&#xff0c;前言开发环境&#xff1a;在 Visual Studio 2017&#xff0c;.NET Core 2.x串口通讯用于设备之间&#xff0c;传递数据&#xff0c;物联网设备中广泛使用串口方式连接通讯&#xff0c;物联网通讯协议 &#xff1a;Modbus 协议 ASCII、RTU、TCP模式是应用层的协议&…

Game of Cards Gym - 102822G

Game of Cards Gym - 102822G 题意&#xff1a; 小兔子和小马喜欢玩奇怪的纸牌游戏。现在&#xff0c;他们正在玩一种叫做0123游戏的纸牌游戏。桌子上有几张牌。其中c0标记为0&#xff0c;c1标记为1&#xff0c;c2标记为2&#xff0c;c3标记为3。小兔子和小马轮流玩游戏&…

开源组件ExcelReport 3.x.x 使用手册(为.netcore而来

ExcelReport转眼已经开源4年了&#xff0c;期间有很长时间也停止了对它的维护。18年年末有人联系到我&#xff0c;说“兄弟&#xff0c;ExcelReport不错&#xff0c;但什么时候支持.netcore呢&#xff1f;”。我寥寥的回了几句搪塞的话&#xff0c;也没当回事。后来这兄弟又来问…

《.NET Core 和前后端那些事儿》技术交流活动纪实

长沙.NET技术社区.NET Core和前后端那些事儿技术交流纪实2019年3月10日&#xff0c;下午&#xff0c;在位于沁园春御院的长沙市互联网活动基地&#xff0c;在长沙市.NET技术社区的组织下&#xff0c;长沙市.NET技术圈第一次纯粹的技术沙龙在这里召开。这次活动总共参加人数超过…

10个小技巧助您写出高性能的ASP.NET Core代码

今天这篇文章我们来聊一聊如何提升并优化ASP.NET Core应用程序的性能&#xff0c;本文的大部分内容来自翻译&#xff0c;当然中间穿插着自己的理解&#xff0c;希望对大家有所帮助&#xff01;话不多说开始今天的主题吧&#xff01;我们都知道性能是公共网站取得成功的关键因素…

CF 1529D Kavi on Pairing Duty

CF 1529D Kavi on Pairing Duty 题意&#xff1a; 有2 * n个点&#xff0c;现在要求两个点连成线段&#xff0c;每个连法都可以得到n个线段&#xff0c;合法的连接方式为&#xff1a;连接的n个线段&#xff0c;任意两个线段要么长度相等&#xff0c;要么有包含关系 n<1e6 …

东莞.NET技术线下沙龙活动资料分享

今天天气虽然很不好&#xff0c;但不减广大.NET开发者的热情&#xff0c;仍然到场率很高。因图片还在整理中&#xff0c;暂时只发出个简单的活动资料整理分享&#xff0c;后续摄影师图片修图好后&#xff0c;再一并给到场者发送图片&#xff0c;和对活动的现场报道作更详细的图…

对弈(nim-k游戏博弈)

problem AliceAliceAlice 和 BobBobBob 又在玩游戏。 AliceAliceAlice 和 BobBobBob 在一个 1n1\times n1n 的网格图上玩游戏&#xff0c;网格图的 nnn 个格子中&#xff0c;有 kkk 个格子内被各放了一个棋子&#xff0c;其中 kkk 是一个偶数。 从左到右&#xff0c;这 kkk 个…

.Netcore 2.0 Ocelot Api网关教程(6)- 配置管理

本文介绍Ocelot中的配置管理&#xff0c;配置管理允许在Api网关运行时动态通过Http Api查看/修改当前配置。由于该功能权限很高&#xff0c;所以需要授权才能进行相关操作。有两种方式来认证&#xff0c;外部Identity Server或内部Identity Server。1、外部Identity Server修改…

最短路径(虚树+期望)

problem 给定一棵 nnn 个结点的无根树&#xff0c;每条边的边权均为 111 。 树上标记有 mmm 个互不相同的关键点&#xff0c;小 A 会在这 mmm 个点中等概率随机地选择 kkk 个不同的点放上小饼干。 你想知道&#xff0c;经过有小饼干的 kkk 个点的最短路径长度的期望是多少。…

【学习笔记】最大权闭合子图和最大密度子图(最小割的模型应用)

最大权闭合子图和最大密度子图最大权闭合子图contentexercise最大密度子图contentexerciseUpd&#xff1a;最大权闭合子图易懂证明最大权闭合子图 content 先作出以下声明&#xff1a; c(u,v):c(u,v):c(u,v): 边 (u,v)(u,v)(u,v) 的容量。 f(u,v):f(u,v):f(u,v): 边 (u,v)(u,…