angular.js $http（不是 $resource）和 ASP.NET/C# 的请求示例

Question

我还在努力学习 AngularJS 的框架是如何工作的，所以请多多包涵。

我在使用 BarcodeSave() 方法保存数据时遇到问题，但是，我从 BarcodeItem() 和 BarcodeList() 检索数据没有问题。

到目前为止我所听到的（我可能是错的），$resource 对于这个项目有点有限，这就是为什么我只对使用 $http 感兴趣。虽然，无论如何，我都喜欢听听您对解决方案的意见。

ASP.NET/C#

public CsBarcode BarcodeSave(string barcodeVal, string courierType, string userName)
Saves to the database and returns JSON, IsSuccess = true for success or IsFailed = true if failed. The status will be in the Status field
Name: BarcodeSave
Returns: CsBarcode (JSON object)
Parameters
barcodeVal (string) – the value that came from the scanner
courierType (string) – the location, send constant: PICKUP or DROPOFF
userName (string) – the login name of the user. Will come from the Sign In page


public CsBarcode BarcodeItem(string barcodeVal, string userName)
Retrieves information from the database for one individual item matching by the barcode value
Name: BarcodeItem
Returns: CsBarcode (JSON object)
Parameters
barcodeVal (string) – the value that came from the scanner
userName (string) – the login name of the user. Will come from the Sign In page

public List<CsBarcode> BarcodeList(string userName)
Retrieves information from the database for all items by the courier - userName
Name: BarcodeList
Returns: List of CsBarcode (list of JSON objects)
Parameters
userName (string) – the login name of the user. Will come from the Sign In page

AngularJS - 工厂

//Factory to get Pick Up List
angular.module('app.pickUpServ', []).factory('pickUpServ', ['$http',
    function($http) {

    var params = "{'barcodeVal':'" + '12345678' +
            "','courierType':'" + 'PICKUP' +
            "','userName':'" + 'aspuser' + "'}";

        return {
            getPickUpList: function(data) {
                $http({
                    method: 'POST',
                    url: 'app/Service/CourierService.asmx/BarcodeItem2',
                    data: params,
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                }).success(data).error(function (error) {
                    console.log('Error - getPickUpList');
                });
            },
            updatePickUpList: function(data) {
                $http({
                    method: 'POST',
                    url: 'app/Service/CourierService.asmx/BarcodeSave2',
                    contentType: 'application/json; charset=utf-8',
                    data: params,
                    dataType: 'json'
                }).success(data).error(function (error) {
                    console.log('Error - updatePickUpList');
                });
            }
        }
    }
]);

AngularJS - 控制器

angular.module('app.scanListCtrl', []).controller('ScanListCtrl', ['$scope', '$rootScope', 'pickUpServ', function ($scope, $rootScope, pickUpServ) {
        //Get Pick Up Data
        pickUpServ.getPickUpList(function (data) {
                $scope.items = data;
                console.log(data);
        });

} ]);

JSON

[
  {
       "Id":1,
       "BarcodeValue":"99999999",
       "CSN":"99999999",
       "MRN":"99999999xxx",
       "UserName":"steinan",
"FirstName":"Anthony",
"LastName":"Stein",
"DateProcessed":"9/1/2014",
"IsProcessed":false,
"IsSuccess”:false,
"IsFailed":true,
       "Status":"Failed"
  },
  {    "Id":1,
       "BarcodeValue":"88888888",
       "CSN":"88888888",
       "MRN":"88888888xxx",
       "UserName":"davisnick",
"FirstName":"Nick",
"LastName":"Davis",
"DateProcessed":"8/1/2014",
"IsProcessed":true,
"IsSuccess”:true,
"IsFailed":false,
       "Status":"Success"
  }
]

HTML

<div ng-controller="ScanListCtrl">
    <div class="row prepend-top-md">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="fa fa-barcode"></i>&nbspScan Item</h3>
                </div>
                <div class="panel-body">
                    <div class="input-group input-group-lg">
                        <input type="number" class="form-control" placeholder="Scan Item" ng-model="BarcodeValue"
                            ng-change="autoAddItem()" is-focus>
                        <span class="input-group-btn">
                            <button class="btn btn-info" type="button" ng-click="addRow()">
                                Add Barcode</button>
                        </span></div>
                </div>
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th class="text-center" style="width: 3%">
                                #
                            </th>
                            <th>
                                <i class="fa fa-barcode"></i>&nbspBarcode
                            </th>
                            <th>
                                <i class="fa fa-medkit"></i>&nbspCSN
                            </th>
                            <th>
                                <i class="fa fa-user"></i>&nbspUser
                            </th>
                            <th>
                                <i class="fa fa-clock-o"></i>&nbspDate
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in items | orderBy:'Id':true:reverse">
                            <td class="text-center">
                                [{{item.Id}}]
                            </td>
                            <td>
                                {{item.BarcodeValue}}
                            </td>
                            <td>
                                {{item.CSN}}
                            </td>
                            <td>
                                {{item.LastName + ', ' + item.FirstName}}
                            </td>
                            <td>
                                {{item.DateProcessed}}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Answer 1

想通了！ :) 这是范围变量问题。

pickUpServ - 工厂

angular.module('app.pickUpServ', []).factory('pickUpServ', ['$rootScope', '$http',
function ($rootScope, $http) {

    var params = "{'barcodeVal':'" + '12345678' +
                "','courierType':'" + 'PICKUP' +
                "','userName':'" + 'aspuser' + "'}";

    return {
        items: [params],
        getPickUpList: function (data) {
            $http({
                method: 'POST',
                url: 'app/Service/CourierService.asmx/BarcodeList',
                data: params,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
            }).success(data).error(function (error) {
                console.log('Error - getPickUpList');
            });
        },
        savePickUpList: function (item) {
            this.items.push(item);
            console.log(item);
            console.log('item --- ' + JSON.stringify(item));
            console.log('params --- ' + params);

            $http({
                method: 'POST',
                url: 'app/Service/CourierService.asmx/BarcodeSave',
                data: JSON.stringify(item),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
            }).success(function(data, status, headers, config){
                console.log('Success! - updatePickUpList');
            }).error(function (error) {
                console.log('Error - updatePickUpList');
            });
        }
    };
    }
]);

ScanListCtrl - 控制器

angular.module('app.scanListCtrl', []).controller('ScanListCtrl', ['$scope', 'pickUpServ', function ($scope, pickUpServ) {
//Get Pick Up Data
if ($scope.title == 'Pick Up') {
    $scope.items = pickUpServ.items;

    pickUpServ.getPickUpList(function (data) {
        $scope.items = data.d
    });

    $scope.autoAddItem = function () {
       if (($scope.BarcodeValue + '').length == 8) {
           pickUpServ.savePickUpList({
                "barcodeVal": $scope.BarcodeValue,
                //CSN: $scope.BarcodeValue,
                "courierType": "PICKUP",
                "userName": "aspuser"
            });
       }
    };
}

} ]);