CODEWITHSUNDEEP
angularjsasp.net-web-api
Austin Harris
Austin Harris

Reputation: 5410

AngularJS WebAPI passing parameters

I'm new to Angular but have experience with ASP.NET MVC so the basic concepts here are not new to me. I am trying to pass a simple text parameter to my WebAPI controller something like the word 'park', the WebAPI controller then would do a linq query and return the results to Angular which would display those results with ng-repeat in a veiw. It works fine in the case where I return all the rows from the database but when I try to pass in a keyword parameter nothing happens. What is the simplest way to pass in a parameter from Angular into the WebAPI controller for use there in the database linq query? Thank you.

AngularJS code:

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

Partial View:

<table class="table">

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

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

</table>

Upvotes: 0

Views: 1333

Answers (2)

Erkin Djindjiev
Erkin Djindjiev

Reputation: 577

You could abstract out a generic 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;
}]);

Then in another angular service you could have something like this

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

Then in your angular controller you could have something like this

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

And your WebApi controller could look like this, or i'd prefer the later so that you are returning an actual HttpAction Result

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

Upvotes: 0

Shaun Xu
Shaun Xu

Reputation: 4656

I'm not very familiar with AngularJS Resource, I used $http to connect my ASP.NET WebAPI from AnuglarJS. But I think the problem you met with is, the request to WebAPI was http://web-api/api/Phrase/shaun, but your WebAPI controller try to feed the parameter in format http://web-api/api/Phrase?Keyword1=shaun.

The solution might be, change your AngularJS code so that it send request in query string mode, or change your WebAPU code to parse the parameter from the URL. In my case I applied the first solution.

Upvotes: 0

Related Questions