要求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

弄清楚了！ :)这是范围var问题。

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"
            });
       }
    };
}

} ]);