mar*_*c_s 5 webforms asp.net-web-api angularjs
我正在尝试启动和运行我的第一个ASP.NET Webforms和AngularJS应用程序,但我正在努力......
我创建了一个空白的,新的ASP.NET 4.5.1 webforms应用程序,并将WebAPI包含在其中.我为我的客户列表创建了一个示例页面,并为CustomerController : ApiController所有常用的CRUD方法创建了一个基于EF6的标准WebAPI .我使用Fiddler测试了那个WebAPI,并且看得很低 - 我从我的数据库中恢复了我的8个客户.
然而,进入AngularJS有点不成功和非常令人沮丧的经历....
我AngularJS从NuGet 包括,似乎有效 - 没有显示错误或任何东西,一堆angular*.js文件转储到我的Scripts文件夹中.
我CustomerList.aspx基于包含<html lang="en" ng-app="TestAngular">标签的母版页创建了一个基本页面.
为了从服务的WebAPI获取数据,我创造了我的角模块,并创建了一个model内部的$scope,并创建一个服务来获取来自的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？
我完全迷失了 - 有人能看出我做错了什么,我在这里缺少什么？
您绝对走在正确的道路上。目前，问题出在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。所以，我预计这条线会失败。另外，要获取数组的计数length，您需要.
您应该设置clientCount回调的内部：
clientService.getAllClients(function(results) {
$scope.model.clients = results;
$scope.model.clientCount = $scope.model.clients.length;
});
编辑：
通常，最好使用 . 返回的 Promise $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解开响应并仅将正文发送到回调。
| 归档时间： |
|
| 查看次数： |
7007 次 |
| 最近记录： |