从Angularjs传递和检索复杂对象到Web Api

时间:2015-10-17 17:07:47

标签: angularjs asp.net-web-api2

我有一个角度的表单,用户输入各种条件然后我想传递给Web Api并在运行查询后得到结果。我最初认为这是一个" Get"但无法将复杂对象传递给Web Api。通过一些建议,我然后使用了一个Post并且能够通过Web Api中运行查询的标准,但是我在Angular中得到结果时遇到了麻烦。运行Web Api方法并获取结果。但我没有在数据服务中看到结果。

查询条件是多个字段而一些是列表的最佳方法是什么?我还没有找到任何好的例子。

这是Web Api方法:

[HttpPost]         public IEnumerable Post([FromBody] FrequentPawnerReportCriteria标准)         {             var repo = new FrequentPawnerReport();             var result = repo.GetReport(criteria);             返回结果;         }`

这是dataservice:

function getFrequentPawner(criteria) {
            return $http.post("/api/FrequentPawner/Post", criteria)
                .then (getFrequentPawnerComplete)
                .catch(getFrequentPawnerFailed);
            function getFrequentPawnerComplete(response) {
                var x = response
                return response.data.results;
            }
            function getFrequentPawnerFailed(error) {
                alert("XHR failed for frequent pawner report: " + error.responseText);
            }
        }

这是控制器代码:

function getTopPawnerResults(criteria) {

            return DataContext.getFrequentPawner(criteria)
                .then(
                function (result) {
                    vm.frequentPawnerReport = result.data;

                    return vm.frequentPawnerReport;
                });
        }

3 个答案:

答案 0 :(得分:0)

只需使用JSON即可。使用JSON.stringify()将JSON对象解析为字符串并对其进行POST。同样,从服务器返回JSON字符串,并将其分配给Angular中的变量。它将自动转换为JSON对象。

答案 1 :(得分:0)

我认为当你发布帖子请求时,你需要有一个回调函数,当你的Web Api返回时会调用它。在该回调函数中,您可以更新$ scope变量,这将使您的web ui显示来自服务器的响应。你可以在这里找到我的意思的一个例子:https://docs.angularjs.org/api/ng/service/$http

它的要点: $http({ method: 'POST', url: '/path/to/your/web/api', function(success) { console.log('Successfully executed the api call'); $scope.response = response; // change this to match the data you are expecting from the server response }, function(failure) { console.error('There was an error'); $scope.failure = failure; // change this to match your failure response } );

答案 2 :(得分:0)

感谢您的回复。该项目是Web表单和angularjs的混合。我正在迁移该应用程序并且没有注意到此表单存在冲突导致回发并使其看起来结果未被返回。我把表单放到一个单独的项目中,并且能够得到我想要的结果。