Question

我是Angular的新手，但有ASP.NET MVC的经验，所以这里的基本概念对我来说并不陌生。我试图将一个简单的文本参数传递给我的WebAPI控制器，比如单词＆＃39; park＆＃39;，然后WebAPI控制器会执行linq查询并将结果返回给Angular，后者将使用ng-repeat显示这些结果在一个视角。它在我从数据库返回所有行的情况下工作正常但是当我尝试传入关键字参数时没有任何反应。将参数从Angular传递到WebAPI控制器以便在数据库linq查询中使用的最简单方法是什么？谢谢。

AngularJS代码：

var PhrasierApp = angular.module("Phrasier", ["ngRoute", "ngResource"]).
    config(function ($routeProvider) {
        $routeProvider.
            when('/', { controller: DialogCtrl, templateUrl: 'dialog.html' }).
            otherwise({ redirectTo: '/' });
    });


PhrasierApp.factory('Phrase', function ($resource) {
    return $resource('/api/Phrase/:Keyword1', { Keyword1: 'park' }, { update: { method: 'PUT' } });
});


var DialogCtrl = function ($scope, $location, Phrase) {
       $scope.phraseResults = Phrase.query();
};

Web API Controller：

    public IQueryable<Phrase> GetPhrases(string Keyword1)
    {
        var model = from p in db.Phrases where p.Text.Contains(Keyword1) select p;
        return model;
    }

部分视图：

<table class="table">

    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>

    <tbody>
        <tr ng-repeat="phraseResult in phraseResults">
            <td>{{phraseResult.Text}}</td>
        </tr>
    </tbody>

</table>

Answer 1

我对AngularJS Resource不太熟悉，我使用$http从AnuglarJS连接我的ASP.NET WebAPI。但我认为您遇到的问题是，对WebAPI的请求是http://web-api/api/Phrase/shaun，但您的WebAPI控制器尝试以http://web-api/api/Phrase?Keyword1=shaun格式提供参数。

解决方案可能是，更改您的AngularJS代码，以便它以查询字符串模式发送请求，或更改您的WebAPU代码以从URL解析参数。在我的情况下，我应用了第一个解决方案。

Answer 2

您可以抽象出一个通用的HttpService

'use strict';
appModule.factory('HttpService', ['$http', '$q', function ($http, $q) {   

var HttpService = this;
HttpService.httpPost = function (url, config) {
    return function (data) {

        var deferred = $q.defer();

        $http.post(url, data, config).success(function (data, status, headers, config) {
            deferred.resolve(data);
        }).error(function (reason) {
            deferred.reject(reason);
        });
        return deferred.promise;
    };
};

return HttpService;
}]);

然后在另一个有角度的服务中你可以有这样的东西

PhraseService.getPhrases = HttpService.httpPost("/api/Phrases/GetPhrases");

然后在你的角度控制器中你可以有这样的东西

function getPhrases() {
        PhraseService.getPhrases({ Keyword1: $scope.keyword1 }).then(function (result) {
            $scope.phraseResults = result
        });
    }

你的WebApi控制器可能看起来像这样，或者我更喜欢后者，以便你返回一个实际的HttpAction结果

 [AcceptVerbs("POST")]
    public IQueryable<Phrase> GetPhrases(string Keyword1)
    {
        var model = from p in db.Phrases where p.Text.Contains(Keyword1) select p;
        return model;
    }

[AcceptVerbs("POST")]
    public IHttpActionResult GetPhrases([FromUri]string Keyword1)
    {
        var phrases = _phraseService.GetPhrases(Keyword1);
        return Ok(phrases);
    }

AngularJS WebAPI传递参数

2 个答案: