在MVC中使用Angular的Webservice调用

时间:2016-05-25 00:45:00

标签: angularjs

有人可以解释如何在MVC项目中使用Angular调用动作?

我设法使用这样的Ajax调用动作:

var app = angular.module('toprightSec', ['ng']);
app.controller('NationalityCtrl', ['$scope', function ($scope, $http) {
$scope.items = [];

var items = populateListFromLocalStorage("offices", "Login/GetOffices", 24);
var officelist = "";

for (var i = 0; i < items.length; i++)
{
    $scope.items[i] = { "name": read_prop(items[i], 'office_desc'), "guid": read_prop(items[i], 'office_guid') };
}

$scope.reloadPage = function () { window.location.reload(); }

$scope.getResult = function ($index, item) {

    $.ajax({
            type: 'GET',
            async: true,
            url: 'Login/ChangeOffice',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: {
                officeID: $scope.items[$index].guid,
                officeName: $scope.items[$index].name,
            },
            success: function (msg) {
            }
        });
};

}]);

我尝试将其更改为Angular,如下所示:

var AngularModule = angular.module('toprightSec', ['ng']);

AngularModule.service('ApiCall', ['http', function ($http) {

var result;
this.PostApiCall = function (controllerName, methodName, obj) {
    debugger;
    result = $http.post('api/' + controllerName + '/' + methodName,obj).success(function (data, success) {
        result = (data);
    }).error(function () {
        ("Something went wrong");
    });
    return result;
};

}]);

AngularModule.controller('NationalityCtrl', ['$scope', function ($scope, $http, ApiCall) {
$scope.items = [];
var items = populateListFromLocalStorage("offices", "Login/GetOffices", 24);
var officelist = "";
for (var i = 0; i < items.length; i++)
{
    $scope.items[i] = { "name": read_prop(items[i], 'office_desc'), "guid": read_prop(items[i], 'office_guid') };
}

$scope.reloadPage = function () { window.location.reload(); }

$scope.getResult = function ($index, item) {

    var obj = {
        'officeID' : '123',
        'officeName' : 'Sample'
    }

    var result = ApiCall.PostApiCall("Login", "ChangeOffice", obj).success(function (data) {

        var data = $.parseJSON(JSON.parse(data));
        $scope.message = data;

    });

};

}]);

我一直收到此错误“PostApiCall”未在浏览器控制台上定义。

知道我在这里做错了什么吗?

感谢。

2 个答案:

答案 0 :(得分:1)

用户承诺,在完成$ http时返回:

    this.PostApiCall = function (controllerName, methodName, obj) {
        debugger;
        var deferred = $q.defer();
        $http.post('api/' + controllerName + '/' + methodName,obj).success(function (data) {
            deferred.resolve(data);
        });
        return deferred.promise;
    };

    var result = ApiCall.PostApiCall("Login", "ChangeOffice", obj).then(function (data) {
        var data = $.parseJSON(JSON.parse(data));
        $scope.message = data;
    });

答案 1 :(得分:0)

好吧,我设法修复它,我发现我的代码有两个问题:

  1. 我在两个不同的地方使用$ http,而且我在两个地方都使用了成功。 (charlietfl建议的解决方案)
  2. 另一个问题是我传递的参数,他们不对。
  3. 这是我更新的工作代码:

    var app = angular.module('BMSApp', []);
    
    app.factory('ApiCall', ['$http', function ($http) {
    var PostApiCall = function (controllerName, methodName) {
        return $http.post(controllerName + '/' + methodName);
    };
    var GetApiCall = function (controllerName, methodName) {
        return $http.get(controllerName + '/' + methodName);
    };
    return {
        PostApiCall: PostApiCall,
        GetApiCall: GetApiCall
    };
    }]);
    
    app.controller('NationalityCtrl', ['ApiCall', '$scope', function (ApiCall,$scope) {         
    $scope.items = [];
    var items = populateListFromLocalStorage("offices", "Login/GetOffices", 24);
    var officelist = "";
    for (var i = 0; i < items.length; i++)
    {
        $scope.items[i] = { "name": read_prop(items[i], 'office_desc'), "guid": read_prop(items[i], 'office_guid') };
    }
    $scope.getResult = function ($index, item) {
        var result = ApiCall.PostApiCall("Login", "ChangeOffice/?officeID=" + $scope.items[$index].guid + "&officeName="+$scope.items[$index].name).then(function (data) {
            $scope.reloadPage();
        });
    };
    }]);
    

    感谢大家的帮助。