从WebAPI获取数据并使用AngularJs

时间:2016-10-19 00:30:52

标签: angularjs asp.net-web-api

我正在尝试从数据库加载下拉列表,不知道导致问题的原因,但无法看到它从webservice加载或返回。

我创建了一个单独的webapi项目,当我直接从浏览器调用api方法时,它确实以JSON格式重新编译数据,如下所示

    <ArrayOfGetCustomersList_Result xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/Repository">
<GetCustomersList_Result>
<cust_name>Alex Fraser Group : Alex Fraser</cust_name>
<custid>Alex Fraser</custid>
<customer_auto>24</customer_auto>
</GetCustomersList_Result>
<GetCustomersList_Result>
<cust_name>BMA : BMA</cust_name>
<custid>BMA</custid>
<customer_auto>16</customer_auto>
</GetCustomersList_Result>
<GetCustomersList_Result>
<cust_name>DEMO CUSTOMER 1 : DEMO CUSTOMER 1</cust_name>
<custid>DEMO CUSTOMER 1</custid>
<customer_auto>1</customer_auto>
</GetCustomersList_Result>
<GetCustomersList_Result>
<cust_name>Hydraulink Toowoomba : Hydraulink Toowoomba</cust_name>
<custid>Hydraulink Toowoomba</custid>
<customer_auto>21</customer_auto>
</GetCustomersList_Result>
<GetCustomersList_Result>
<cust_name>QA Trackspares : QA Trackspares</cust_name>
<custid>QA Trackspares</custid>
<customer_auto>22</customer_auto>
</GetCustomersList_Result>
<GetCustomersList_Result>
<cust_name>Timms Contracting : Timms</cust_name>
<custid>Timms</custid>
<customer_auto>23</customer_auto>
</GetCustomersList_Result>
<GetCustomersList_Result>
<cust_name>UNKNOWN : UNKNOWN</cust_name>
<custid>UNKNOWN</custid>
<customer_auto>17</customer_auto>
</GetCustomersList_Result>
</ArrayOfGetCustomersList_Result>

My Angular Service代码是:

var app = angular.module('dashboardModule', ['oc.lazyLoad', 'directive.contextMenu'])
.service('dashboardService', ['$http', function ($http) {

    this.loadCustomers = function (onSuccess, onError) {

        onError = onError || function () { alert('Failure getting customers'); };
        $http
            .get('http://localhost:7999/api/dashboard/GetCustomersList')
            .success(onSuccess)
            .error(onError);
    };

}]);

我从我的Angular控制器中调用它为:

angular.module('dashboardModule')
        .controller('dashboardController', ['$scope', '$rootScope', '$location', '$translate', 'dashboardService', function ($scope, $rootScope, $location, $translate, dashboardService) {

        $scope.customers = [];
        dashboardService.loadCustomers(customersLoaded,erroroccured);

        function erroroccured(response)
        {
            alert(response.data);
        }
        function customersLoaded(response) {
            $scope.customers=response.data;
        }

        $scope.selectedCustomer = $scope.customers[0].customer_auto;
    }
]);

在我的html页面上我试图将其加载为

<div class="col-sm-2"><select class="form-control" ng-model="selectedCustomer" ng-options="customer.customer_auto as (customer.custid+':'+customer.cust_name) for customer in customers">></select></div>

有人可以告诉我代码中的问题是什么。我在IE调试器中得到了这个错误

  

无法获取未定义或空引用的属性'customer_auto'

1 个答案:

答案 0 :(得分:0)

如果ajax调用出现问题,它似乎会在erroroccured方法中向您发送警报。它是否符合错误回调方法,或者服务器是否成功返回数据?

同样在您的web api项目中,尝试添加以下内容:它将使您的服务返回有效的JSON而不是XML。

&#13;
&#13;
var formatters = GlobalConfiguration.Configuration.Formatters;

formatters.Remove(formatters.XmlFormatter);
&#13;
&#13;
&#13;