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

我在一些指导之后如何将angularjs整合到这个项目中。我正在寻找一种将数据写入表格的更好方法。非常感激任何的帮助。在C＃中将AngularJS与Signalr结合使用asp.net项目

控制器

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>

来源

2017-04-18 user7881196

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

通过操作DOM追加数据是不是要走的最有效的方式。相反，请在您的HTML中尝试下面的内容。注意：我还没有测试过任何 - 这是即时的。但你会得到主意。

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

对于控制器代码，你可以试试：

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

请注意，您可以通过将其附加到这是在阵列中使用的NG-重复到其他项目追加到表，因为他们进来与ng-repeat绑定。

例如，你可能有：

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

与AngularJS工作+ SignalR时建议还有一个词：有用于设置客户端侧的集线器作为一个服务或工厂一个伟大的文章，然后发射SignalR事件并捕获您个人控制器中的事件。这确保您只有一个连接到每个应用程序的SignalR，而不是N个控制器的连接。看看here。

来源

2017-04-21 18:23:19

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

回答

相关问题