在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項目

回答

相關問題