集成 ASP.NET Webforms、WebAPI 和 AngularJS答案

【问题标题】：Integrating ASP.NET Webforms, WebAPI and AngularJS集成 ASP.NET Webforms、WebAPI 和 AngularJS
【发布时间】：2015-05-06 21:36:30
【问题描述】：

我正在尝试让我的第一个 ASP.NET Webforms 和 AngularJS 应用程序启动并运行，但我正在苦苦挣扎......

我创建了一个空白的新 ASP.NET 4.5.1 网络表单应用程序，并将 WebAPI 包含在其中。我为我的客户列表创建了一个示例页面，并使用所有常用的 CRUD 方法创建了一个基于 EF6 的标准 WebAPI CustomerController : ApiController。我使用 Fiddler 测试了那个 WebAPI，结果我发现 - 我从我的数据库中找回了我的 8 个客户。

然而，将它引入 AngularJS 有点不成功，而且非常令人沮丧....

我包含了来自 NuGet 的 AngularJS，这似乎奏效了 - 没有显示任何错误或任何内容，一堆 angular*.js 文件转储到我的 Scripts 文件夹中。

我基于包含<html lang="en" ng-app="TestAngular"> 标签的母版页创建了一个基本的CustomerList.aspx 页面。

为了从 WebAPI 服务获取数据，我创建了我的 Angular 模块，并在 $scope 内创建了一个 model，并创建了一个从 WebAPI 获取数据的服务：

内部app.js：

var testModule = angular.module('TestAngular', [ ]);

testModule.controller('clientController', function ($scope, clientService) {
    $scope.model = [];
    clientService.getAllClients(function(results) {
        $scope.model.clients = results;
    });

    $scope.model.clientCount = $scope.model.clients.count;
});

testModule.factory('clientService', function ($http) {
    var srv = {};
    srv._baseUrl = 'http://localhost:56313';

    // Public API
    return {
        getAllClients: function(callback) {
            return $http.get(srv._baseUrl + '/api/Customer').success(callback);
        }
    };
});

根据我对 Javascript 的有限理解，这应该定义一个 clientService（testModule.factory() 调用），它调用我的 WebAPI URL，获取 JSON，然后回调函数将检索到的这些客户填充到 $scope.model.clients属性，$scope.model.clientCount 也应该计算出来。

我的 ASPX 页面如下所示：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CustomerList.aspx.cs" Inherits="TestAngular.CustomerList" MasterPageFile="~/Site.Master"  %>

<asp:Content runat="server" ID="content" ContentPlaceHolderID="MainContent">
    <h2>My customers</h2>

    <div class="panel panel-default" data-ng-controller="clientController">
        We have a total of {{ model.clientCount }} clients in our database table ...

        <div class="list-group" data-ng-repeat="client in model.clients">
            <div class="list-group-item">
                <span>{{ client.Name }}</span><br/>
                <span>{{ client.Name2 }}</span><br/>
            </div>     
        </div>
    </div>
</asp:Content>

因此，<div> 和 data-ng-controller 应该“连接”该 DIV 与 AngularJS 控制器，应该从 WebAPI 调用加载客户，并将它们包含在模型中，然后使用渲染到 ASPX 页面数据绑定语法（{{ client.Name }} 等）

问题是：发生了对 WebAPI 的调用并返回了正确的 8 个客户，但是，当我调试 Javascript 代码时，clientCount 始终为undefined，并且 ASPX 页面仅显示两个空行，这可能将对应于已检索到的客户 - 但为什么只有 2 个，而不是 8 个？？

我完全迷失了方向 - 谁能发现我做错了什么，我在这里错过了什么？？

【问题讨论】：

标签： angularjs asp.net-web-api webforms

【解决方案1】：

你肯定走在正确的轨道上。目前，问题归结为clientServicegetAllClients方法。

您应该 return 承诺，然后数据将链接到控制器：

getAllClients: function(callback) {
    return $http.get(srv._baseUrl + '/api/Customer').success(callback);
}

您可能还想看看计数线：

$scope.model.clientCount = $scope.model.clients.count;

在 promise 被解决（并调用回调）之前，$scope.model.clients 将是 undefined。所以，我希望这条线会失败。此外，要获取数组的count，您需要length。

您应该在回调中设置clientCount：

clientService.getAllClients(function(results) {
    $scope.model.clients = results;
    $scope.model.clientCount = $scope.model.clients.length;
});

编辑：

通常，倾向于使用$http 返回的承诺。因此，控制器会稍微更改为：

clientService.getAllClients().then(function(response) {
    $scope.model.clients = response.results;
    $scope.model.clientCount = response.results.length;
});

然后服务会变成：

getAllClients: function() {
    return $http.get(srv._baseUrl + '/api/Customer');
}

Angular 使用来自$q 的承诺而不是回调（对于大多数 API）。它们使链接和异常处理变得更加容易。

此外，由于在这种情况下，您知道自己正在处理来自 $http 的承诺，因此您也可以在控制器中使用 success 方法：

clientService.getAllClients().success(function(results) {
    $scope.model.clients = results;
    $scope.model.clientCount = results.length;
});

success 解包响应并仅将正文发送到回调。

【讨论】：

谢谢 - 试过了 - 屏幕上仍然看不到任何有用的东西 :-( 它仍然和以前一样......
我刚刚意识到您使用的是回调而不是承诺机制。我将编辑答案以显示通常会做什么。
抱歉，我想你需要model.clients.length。
@DavinTryon，我会避免使用.success - 它是一个$http-only 函数，而不是每个promise-spec。此外，getAllClients 中的任何 .then 都会破坏这种用法。另外，我敢打赌，如果回调函数中有 $scope.$apply，callback 方法会起作用，但 promises 绝对是要走的路。
看来你展示的第一种方法（getAllClients: function(callback) {...} 工作得很好-另外两个（getAllClients().then(function()) 和 getAllClients().success(function()) 不显示任何数据，也不似乎完全更新了clientCount :-(