SignalR更新打破了页面上的布局和脚本

时间:2017-07-13 17:21:55

标签: javascript asp.net angularjs highcharts signalr

当SignalR更新进入我们的页面以更新我们的模态时,我们的项目名称会更改,我们的脚本似乎会中断。

简要概述:我们的SignalR更新很好地发送到网站,但数据本身的名称无效。 更新后,我们的项目会刷新格式错误的名称。我们的名字首先不应由SignalR更新,我似乎无法在我们的代码中找到对它的任何引用。 关闭模态,我们的Highcharts和Angular脚本会抛出控制台错误。

服务器端代码:

public partial class Device
{
 if (device != null)
 {
  if ((Enumerables.DeviceType)device.Type == Enumerables.DeviceType.Store)
   SignalrClient.UpdateStore(device.DeviceID);
  else // check if need to update a modal on the dashboard
  {
   foreach (var key in SignalrClient.DevicesDictionary.Keys)
   {
    var devices = SignalrClient.DevicesDictionary[key];
    if (devices != null)
    {
     if (devices.Contains(device.DeviceID))
      SignalrClient.UpdateModal(key, device.DeviceID);
    }
   }
  }
 }
}

class SignalrClient
{
 public static async Task Start()
 {
  if (_hubConnection == null || _hubConnection.State == ConnectionState.Disconnected)
  {
   _hubConnection = new HubConnection("http://stevessiteofamazingboats.net/");
   _dashboardHubProxy = _hubConnection.CreateHubProxy("DashboardHub");
   _dashboardHubProxy.On("OnRegisterDevice", new Action<string, int>(OnRegisterDevice));
   _dashboardHubProxy.On("OnDeregisterDevices", new Action<string>(OnDeregisterDevices));
   _dashboardHubProxy.On("OnDeregisterDevice", new Action<string, int>(OnDeregisterDevice));
   await _hubConnection.Start();
  }
 }
 public static async void UpdateModal(string connectionId, int deviceId)
 {
  await Start();
  if (_hubConnection.State == ConnectionState.Connected)
  await _dashboardHubProxy.Invoke("UpdateModal", new object[] { connectionId, deviceId });
  }
}

public class DashboardHub : Hub
{
 private static string EventHubConnectionId {get;set;}
 private AlarmDBEntities db = Utils.DbContext;

 public void UpdateModal(string connectionId, int deviceId)
 {
  var db = Utils.DbContext;
  var device = db.Device.Find(deviceId);
  var modal = new Portal.DeviceModalViewModel()
  {
   DeviceId = deviceId,
   SuctionGroups = device.Device1.Where(x => (Enumerables.DeviceType)x.Type == Enumerables.DeviceType.SuctionGroup).Select(x => new DeviceModalViewModel.SGNode()
   {
   SubChildren = x.Device1.Where(y => (Enumerables.DeviceType)y.Type == Enumerables.DeviceType.Compressor).Select(y => new DeviceModalViewModel.DeviceNode()
    {
    DeviceId = y.DeviceID,
    Name = y.Name,
    Amp = db.Property.Where(z => z.Name == "Amps" && z.DeviceID == y.DeviceID).OrderByDescending(z => z.CreatedOn).Select(z => z.Value).FirstOrDefault()
   }).OrderBy(y => y.Name).ToList()
  }).OrderBy(x => x.Name).ToList(),
 };
}

客户端javascript。 viewModel包含格式错误的名称: 可以在JSFiddle上查看 https://jsfiddle.net/wmqdyv8r/

这是我们的Angular控制台错误:

angular.min.js:6 Uncaught Error: [ng:areq]    
http://errors.angularjs.org/1.5.7/ng/areq?
p0=HeaderController&p1=not%20a%20function%2C%20got%20undefined
at angular.min.js:6
at sb (angular.min.js:22)
at Qa (angular.min.js:23)
at angular.min.js:89
at ag (angular.min.js:72)
at m (angular.min.js:64)
at g (angular.min.js:58)
at g (angular.min.js:58)
at g (angular.min.js:58)
at g (angular.min.js:58)

angular.min.js:312 WARNING: Tried to load angular more than once.

如果我们在SignalR刷新后尝试打开图表,则会显示此Highcharts错误:

store.js:856 Uncaught TypeError: $(...).highcharts is not a function
at Object.success (store.js:856)
at c (<anonymous>:1:132617)
at Object.fireWith [as resolveWith] (<anonymous>:1:133382)
at b (<anonymous>:1:168933)
at XMLHttpRequest.<anonymous> (<anonymous>:1:173769)

此外,关闭模式后,我们的主页面将刷新,现在抛出此错误:

Exception: Sequence contains no elements
Type: System.InvalidOperationException

主要担心的是更新事件正在破坏某些事情。命名问题的优先级较低,但我确定它是相关的。

1 个答案:

答案 0 :(得分:0)

找到并修复了问题!

发现格式错误的名称总是修剪真实姓名的前5个字符,所以我把它固定在底部附近,虽然我仍然不知道修剪的位置。

更严重的问题,脚本的破坏也得到了解决。 在UpdateModal方法中,其中一个脚本正在查找storeID字段以及deviceID字段。将日志打印到Chrome javascript控制台后,我可以看到storeID始终返回0,即使它之前已在UpdateModal方法之前初始化。

我必须做的就是跟随该死的火车添加在DeviceId下看到的storeID字段:

library(dplyr)
makeVlist <- function(dta) { 
     labels <- sapply(dta, function(x) attr(x, "label"))
      tibble(name = names(labels),
             label = labels)
}