ASP.NET 网络表单和 AngularJS

Question

我仍在努力获得我的第一个 ASP.NET WebApi / AngularJS 应用程序和运行...

我正在尝试从 Angular 查询 WebAPI 服务（我已经使用 Fiddler 编写并验证它工作正常），并且我正在尝试显示返回到我的 ASP.NET 网络表单页面。我学习了很多教程和 Pluralsight 课程，并且真的认为我知道该怎么做 - 但 Angular 不同意我的看法:-(

我的 Angular app/controller 在这里：

var app = angular.module('MyApp', []);

app.controller('MyCtrl', function ($scope, $http) {
    $scope.model = [];

    //Call to web API
    var Url = 'http://localhost:13811/api/v1/mydata';

    $http({
            method: 'GET',
            url: Url
    }).success(function (MyList) {
            $scope.model = MyList;
    }).error(function () {

    });
});

我（非常有限）JS/Angular 的理解是，这定义了一个 Angular 应用程序和一个控制器，如果我将这个控制器添加到我的 ASPX 页面上的 DOM 元素，控制器将被调用，将调用我的 WebAPI 服务（我确实看到这是发生），然后存储结果（一些数据对象的列表来自数据库）放入 $scope.model 变量。

所以我假设我可以将它集成到一个空白的 ASPX 中，如下所示：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DemoAngular.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">   
<head runat="server">
    <title>Angular Demo</title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/app/plz-controller.js"></script>
</head>
<body  ng-app="MyApp">
    <form id="form1" runat="server">
    <div ng-controller="MyCtrl">
        <span>Angular says: {{1+2}} </span>

        <div class="list-group" data-ng-repeat="x in model">
            <div class="list-group-item">
                <span>{{x.Field1}}</span><br/>
                <span>{{x.Field2}}</span><br/>
            </div>     
        </div>    
    </div>
    </form>
</body>
</html>

我假设将 ng-app="MyApp" 指令添加到 <body> 标记会将 ASPX 页面 link 添加到 Angular 应用程序，并添加 ng-controller="MyCtrl" 然后 <div> 将实例化 Angular 控制器（从而进行 WebAPI 调用 - 它确实如此，我在 F12 开发人员工具中看到了）。

我还期望通过使用 data-ng-repeat="x in model" 指令，我将能够遍历从 WebAPI 调用返回的数据元素列表，并使用 {{....}} 语法，我是希望能够访问那些对象的各个字段并显示它们。

唉：我确实在我的页面顶部看到了 Angular says: 3，所以 Angular 似乎是 "there" 并且处于活动状态，而且我确实在 F12 开发人员中看到了 WebAPI 调用工具（并且我可以验证是否返回了预期数量的数据元素） - 但无论我尝试什么，我都找不到任何方法来实际 SHOW 从 WebAPI 检索到的数据在我的 ASPX 页面上......

有什么想法吗？我错过了什么？一定是一些非常愚蠢的东西 - 我敢肯定 - 但我只是不再只见树木不见森林了.......

Answer 1

启动调试器并在 $scope.model = MyList 行上放置一个断点。很可能你在这里得到了一个 http 响应对象，你需要将它更改为 $scope.model = MyList.data 之类的东西。检查调试器中的对象将明确告诉您是否属于这种情况。

ASP.NET 网络表单和 AngularJS

ASP.NET Webforms and AngularJS

webforms

asp.net-4.5

asp.net-web-api

angularjs