gpt4 book ai didi

c# - 在 C# asp.net 项目中结合 AngularJS 和 Signalr

转载 作者:太空宇宙 更新时间:2023-11-03 15:06:09 25 4
gpt4 key购买 nike

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

Controller

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>

对于您的 Controller 代码,请尝试如下操作:

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

请注意,您可以使用 ng-repeat 将额外的项目追加到表中,方法是将它们追加到与 ng-repeat 绑定(bind)的数组中。

例如,您可能有:

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

在使用 AngularJS + SignalR 时还有一个建议:有一篇很棒的文章介绍如何将您的客户端中心设置为服务或工厂,然后发出 SignalR 事件并在您的个人 Controller 中捕获这些事件。这可确保每个应用程序只有一个到 SignalR 的连接,而不是 N 个 Controller 的 N 个连接。看看here .

关于c# - 在 C# asp.net 项目中结合 AngularJS 和 Signalr,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43461638/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com