在 C# asp.net 项目中将 AngularJS 与 Signalr 结合使用答案

【问题标题】：Combine AngularJS with Signalr in C# asp.net project在 C# asp.net 项目中将 AngularJS 与 Signalr 结合使用
【发布时间】：2017-09-13 16:06:02
【问题描述】：

我正在寻求如何将 angularjs 合并到这个项目中的一些指导。我正在寻找一种将数据写入表的更好方法。任何帮助将不胜感激。

控制器

public class RaceDayDisplayController : ApiControllerWithHub<RaceDayDisplayHub>
{
    [HttpPost]
    [Route("api/DoSomething")]
    public HttpResponseMessage DoSomething(Rootobject model)
    {
        Hub.Clients.All.LastSectional(model.sectionTimes[0].runners);
    }
}

html页面将html写入id

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Display</title>
</head>
<body>
<h2>Real-Time Raceday Data</h2>

<table id="showData"></table>

<!--Script references. -->
<!--Reference the Angular library. -->
<script src="/Scripts/angular.js"></script>
<!--Reference the jQuery library. -->
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<!--Reference the SignalR library. -->
<script src="/Scripts/jquery.signalR-2.1.2.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="/signalr/hubs"></script>

<script type="text/javascript">

    $(function () {
        var myHub = $.connection.raceDayDisplayHub;

        try {
            $.connection.hub.start();

            myHub.on('LastSectional', function (runners) {

                $("#showData tr").remove();
                $('#showData').append('<tr><td width="150">Pos</td><td width="210">Name</td><td width="150">Margin</td><td width="150">Last Sectional</td><td width="150">Cumulative Times</td></tr>');
                for (var i = 0; i < runners.length; i++) {
                    $('#showData').append('<tr><td>' + runners[i].position + '</td><td>' + runners[i].bookNumber + ' ' + runners[i].name + '</td><td>' + runners[i].margin + '</td><td>' + runners[i].sTime + '</td><td>' + runners[i].cumTime + '</td></tr>');
                }

                //var runners = JSON.stringify(runners)

                //var app = angular.module('myApp', []);
                //app.controller('customersCtrl', function ($scope) {
                //    $scope.runners = runners;
                //});
            });

        } catch (e) {
            alert(e.message);
        }

    });

</script>

</body>
</html>

【问题讨论】：

您是否要求进行代码审查？这不是 Stack Overflow 的主题。您目前正在做的事情是否存在实际问题？

标签： c# asp.net angularjs signalr

【解决方案1】：

通过操作 DOM 附加数据并不是最有效的方法。相反，请在您的 HTML 中尝试如下所示的内容。注意：我还没有测试过这些——它是即时的。但是你会明白要点的。

<table>
   <tr ng-repeat='runner in runners'>
      <td>{{runner.someProperty}}</td>
   </tr>
</table>

对于您的控制器代码，请尝试以下操作：

myHub.on('LastSectional', function (runners) {
     $scope.runners = runners;
  });

请注意，您可以使用 ng-repeat 将附加项目附加到表中，方法是将它们附加到与 ng-repeat 绑定的数组中。

例如，您可能有：

 myHub.on('AppendResult', function (newRunner) {
     $scope.runners.push(newRunner);
  });

在使用 AngularJS + SignalR 时再提一点建议：有一篇很棒的文章将您的客户端集线器设置为服务或工厂，然后发出 SignalR 事件并在您的各个控制器中捕获这些事件。这可确保每个应用程序只有一个到 SignalR 的连接，而不是 N 个控制器的 N 个连接。看看here。

【讨论】：