集成 ASP.NET 网络表单、WebAPI 和 AngularJS

Question

我正在尝试启动我的第一个 ASP.NET Webforms 和 AngularJS 应用程序和运行，但我正在努力...

我创建了一个空白的新 ASP.NET 4.5.1 webforms 应用程序，并将 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 理解，这应该定义一个调用我的 WebAPI URL 的 clientService（testModule.factory() 调用），获取 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 应该 "connect" 那 DIV 和 AngularJS 控制器，应该从 WebAPI 调用加载客户，并将它们包含在模型中，然后使用数据绑定语法（{{ client.Name }} 等）

将其呈现到 ASPX 页面

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

我完全迷失了方向 - 任何人都可以发现我做错了什么，我在这里错过了什么吗？？

Answer 1

你绝对是在正确的轨道上。目前，问题出在 clientService getAllClients 方法上。

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

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

您可能还想看一下计数线：

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

在解决承诺（并调用回调）之前，$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 解开响应并仅将正文发送到回调。

集成 ASP.NET 网络表单、WebAPI 和 AngularJS

Integrating ASP.NET Webforms, WebAPI and AngularJS

webforms

asp.net-web-api

angularjs