大佬教程收集整理的这篇文章主要介绍了集成ASP.NET Webforms,WebAPI和AngularJS,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我创建了一个空白的,新的ASP.NET 4.5.1 webforms应用程序,并将WebAPI包含在其中.我为我的客户列表创建了一个示例页面,以及一个基于EF6的标准WebAPI CustomerController:ApiController以及所有常用的CRUD方法.我使用Fiddler测试了那个WebAPI,并且看得很低 – 我从我的数据库中恢复了我的8个客户.
然而,进入AngularJS有点不成功和非常令人沮丧的经历….
我从NuGet中包含了AngularJS,这似乎有效 – 没有显示任何错误或任何东西,一堆角度* .js文件被转储到我的Scripts文件夹中.
我基于母版页创建了一个基本的CustomerList.aspx页面,其中包含< html lang =“en”ng-app =“TestAngular”>标签.
为了从WebAPI服务获取数据,我创建了我的Angular模块,并在$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理解,这应该定义一个调用我的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 @R_9_10586@l 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总是未定义的,而ASPX页面只显示两个空行,这些行可能对应于已经存在的客户检索 – 但为什么只有2,而不是8?
我完全迷失了 – 有人能看出我做错了什么,我在这里缺少什么?
您应该返回承诺,然后数据将链接到控制器:
getAllClients: function(callBACk) { return $http.get(srv._baseUrl + '/api/Customer').success(callBACk); }
您可能还想查看计数行:
$scope.model.clientCount = $scope.model.clients.count;
在解析promise之前(并且调用了回调),$scope.model.clients将是未定义的.所以,我希望这条线路失败.另外,要获得数组的计数,您需要长度.
您应该在回调中设置clientCount:
clientservice.getAllClients(function(results) { $scope.model.clients = results; $scope.model.clientCount = $scope.model.clients.length; });
编辑:
通常,使用$http返回的promise是有利的.因此,控制器会略微改为:
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而不是回调的承诺(对于大多数apis).它们使链接和异常处理变得更加容易.
此外,因为在这种情况下,您知道您正在处理$http的承诺,您也可以使用控制器中的success方法:
clientservice.getAllClients().success(function(results) { $scope.model.clients = results; $scope.model.clientCount = results.length; });
成功展开响应并仅将正文发送到回调.
以上是大佬教程为你收集整理的集成ASP.NET Webforms,WebAPI和AngularJS全部内容,希望文章能够帮你解决集成ASP.NET Webforms,WebAPI和AngularJS所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。