[英]Combine AngularJS with Signalr in C# asp.net project
我正在寻找一些如何将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>
通过操作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连接。 在这里看看。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.