ASP.NET 网络表单和 AngularJS答案

【问题标题】：ASP.NET Webforms and AngularJSASP.NET 网络表单和 AngularJS
【发布时间】：2016-04-27 19:15:44
【问题描述】：

我仍在努力让我的第一个 ASP.NET WebApi / AngularJS 应用程序启动并运行...

我正在尝试从 Angular 查询 WebAPI 服务（我已经使用 Fiddler 编写并验证了它可以正常工作），并且我正在尝试显示在我的 ASP.NET Webforms 页面上返回的数据。我学习了很多教程和 Pluralsight 课程，并且真的认为我知道该怎么做——但是 Angular 不同意我的观点:-(

我有我的 Angular 应用程序/控制器：

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 页面链接到 Angular 应用程序，然后将 ng-controller="MyCtrl" 添加到 <div> 将实例化 Angular 控制器（从而使WebAPI 调用 - 确实如此，我在 F12 开发人员工具中看到了）。

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

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

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

【问题讨论】：

你的成功函数是否被调用过？如果你退出MyList，你会得到什么？
只尝试 ng-repeat 作为
@rob: 是的，实际上调用了“成功”函数——检查MyList 显示我的错误——这不是一个平面数据列表，而是一个结构——它包含一些字段和Items 集合。当我使用MyList.Items 时，我得到了要显示的数据行列表 - 谢谢！