gpt4 book ai didi

angularjs - 集成 ASP.NET Web 窗体、Web API 和 AngularJS

转载 作者:行者123 更新时间:2023-12-04 20:39:36 24 4
gpt4 key购买 nike

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

我创建了一个空白的新 ASP.NET 4.5.1 webforms 应用程序,并将 WebAPI 包含在其中。我为我的客户列表创建了一个示例页面,以及一个基于 EF6 的标准 WebAPI CustomerController : ApiController使用所有常用的 CRUD 方法。我使用 Fiddler 测试了该 WebAPI,然后瞧——我从我的数据库中找回了我的 8 个客户。

然而,将它引入 AngularJS 是一种不成功且非常令人沮丧的经历......

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

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

为了从 WebAPI 服务获取数据,我创建了我的 Angular 模块,并创建了一个 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属性(property),以及 $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 Controller “连接”,应该从 WebAPI 调用加载客户,并将它们包含在模型中,然后使用数据绑定(bind)语法( {{ client.Name }} 等)将其呈现到 ASPX 页面

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

我完全迷失了,被困住了——谁能发现我做错了什么,我在这里错过了什么?

最佳答案

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

你应该 return promise ,然后数据将链接到 Controller :

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

您可能还想看一下计数线:
$scope.model.clientCount = $scope.model.clients.count;

在 promise 被解决(并且回调被调用)之前, $scope.model.clients将是 undefined .所以,我希望这条线会失败。此外,要获得数组的计数,您需要 length .

您应该设置 clientCount回调内部:
clientService.getAllClients(function(results) {
$scope.model.clients = results;
$scope.model.clientCount = $scope.model.clients.length;
});

编辑:

通常,最好使用 $http 返回的 promise 。 .因此, Controller 会稍微更改为:
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 的 promise 而不是回调(对于大多数 API)。它们使链接和异常处理变得更加容易。

此外,因为在这种情况下,您知道您正在处理来自 $http 的 promise 。 ,您可以使用 success Controller 中的方法:
clientService.getAllClients().success(function(results) {
$scope.model.clients = results;
$scope.model.clientCount = results.length;
});
success展开响应并仅将正文发送到回调。

关于angularjs - 集成 ASP.NET Web 窗体、Web API 和 AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28879173/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com