Web API 2 REST Get() not receiving parameters: Angular

Question

I am having a problem with my REST Get() method. I am calling it with parameters from my AngularJS controller but the id parameter is not being populated correctly.

Here is my Web API 2 controller:

public IEnumerable<string> Get(SearchParameters id)
{
    // not important at the moment
    return null;
}

public struct SearchParameters
{
    string selectedBroker;
    string brokerIsUnallocated;
    string brokerIncludeDeleted;
    string customerId;
    string businessType;
    string companyName;
    string town;
    string department;
    string contactName;
    string country;
    bool codeP;
    bool codeC;
    bool codeT;
    bool codeS;
    bool codeX;
    bool codeD;
}

Here is my Angular call:

$scope.search = function() {
    $http.get("/api/customer", {
        selectedBroker: $scope.selectedBroker,
        brokerIsUnallocated: $scope.brokerIsUnallocated,
        brokerIncludeDeleted: $scope.brokerIncludeDeleted,
        customerId: $scope.customerCustomerId,
        businessType: $scope.customerBusinessType,
        companyName: $scope.customerCompanyName,
        town: $scope.customerTown,
        department: $scope.selectedDepartment,
        contactName: $scope.customerContactName,
        country: $scope.selectedCountry,
        codeP: $scope.codeP,
        codeC: $scope.codeC,
        codeT: $scope.codeT,
        codeS: $scope.codeS,
        codeX: $scope.codeX,
        codeD: $scope.codeD
    });
}

Here is my routing config:

public static void Register(HttpConfiguration config)
{
    // Web API configuration and services
    // Web API routes
    config.MapHttpAttributeRoutes();

    config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/{controller}/{id}",
        defaults: new { id = RouteParameter.Optional }
    );
}

The problem is that the id parameter is not being populated - it has default empty strings and false booleans.

Any ideas? I did think of trying this but I think JSON calls to my Web API controller are ok.

Looking forward to your responses.

M

UPDATE

I have modified my call like this, but it still doesn't work:

$scope.search = function() {
    $http({
        url: '/api/customer',
        method: 'POST',
        params:
        {
            id: {
                selectedBroker: $scope.selectedBroker,
                brokerIsUnallocated: $scope.brokerIsUnallocated,
                brokerIncludeDeleted: $scope.brokerIncludeDeleted,
                customerId: $scope.customerCustomerId,
                businessType: $scope.customerBusinessType,
                companyName: $scope.customerCompanyName,
                town: $scope.customerTown,
                department: $scope.selectedDepartment,
                contactName: $scope.customerContactName,
                country: $scope.selectedCountry,
                codeP: $scope.codeP,
                codeC: $scope.codeC,
                codeT: $scope.codeT,
                codeS: $scope.codeS,
                codeX: $scope.codeX,
                codeD: $scope.codeD
            }
        }
    });
};

** EDIT Fiddler showing some interesting results **

I have modified my code like this:

$http({
    method: 'POST',
    url: '/api/customer',
    data: id,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});

but Fiddler reports that only the CodeX values are being passed. Why?

http://stackoverflow.com/questions/13760070/angularjs-passing-data-to-http-get-request - I had this issue aswell, so see the link — Ric, Apr 10 '15 at 10:52
If you want to get the data from api???? Why are u using $http.get("/api/customer", { selectedBroker: $scope.selectedBroker,....................... — Reena, Apr 10 '15 at 11:03
Thank you for the link Ric but it doesn't really help. The responses on that post don't work for me. — serlingpa, Apr 10 '15 at 11:06
you may have to do a bit more than the post, try something like createing the object first then send it via `params : { id : object }` etc — Ric, Apr 10 '15 at 11:07

John Cooling · Answer 1 · 2015-04-10T11:05:49.770

0

Actually taking another look, you need something like this

    $http({
                url: '/api/customer/',
                method: 'GET',
                params: {
                    selectedBroker: $scope.selectedBroker,
                    brokerIsUnallocated: $scope.brokerIsUnallocated,
                    brokerIncludeDeleted: $scope.brokerIncludeDeleted,
                    customerId: $scope.customerCustomerId,
                    businessType: $scope.customerBusinessType,
                    companyName: $scope.customerCompanyName,
                    town: $scope.customerTown,
                    department: $scope.selectedDepartment,
                    contactName: $scope.customerContactName,
                    country: $scope.selectedCountry,
                    codeP: $scope.codeP,
                    codeC: $scope.codeC,
                    codeT: $scope.codeT,
                    codeS: $scope.codeS,
                    codeX: $scope.codeX,
                    codeD: $scope.codeD
                },
});

edited Apr 10 '15 at 11:05

answered Apr 10 '15 at 10:56

John Cooling

405
4
23

That doesn't work unfortunately, but we're close: I can feel it in my water. – serlingpa Apr 10 '15 at 11:03
try changing `data:` to `params:` – John Cooling Apr 10 '15 at 11:05
I beat you to it. I saw that suggestion in another post, but it is still not working. – serlingpa Apr 10 '15 at 11:08
Is the API receiving anything from these parameters? – John Cooling Apr 10 '15 at 11:10
try constructing the object before sending it to the `params` ie `var obj = { selectedBroker: $scope.selectedBroker };` – Ric Apr 10 '15 at 11:11
No the id parameter in the API controller contains nulls for the strings and false for the booleans. I have tried creating the object before sending it but it still doesn't work. – serlingpa Apr 10 '15 at 11:15
Could you post some of your HTML where you are initialising these properties in your scope. Or return the scope to the console to see whether it contains values for these properties. (Do this before the http request.) `console.log($scope.selectedBroker)` etc... – John Cooling Apr 10 '15 at 11:21

score 0 · Answer 2 · answered Apr 10 '15 at 11:16

See the updated code:

public List<SearchParameters> Get(SearchParameters id)
{
// not important at the moment
 return null;
}

public struct SearchParameters
{
string selectedBroker;
string brokerIsUnallocated;
string brokerIncludeDeleted;
string customerId;
string businessType;
string companyName;
string town;
string department;
string contactName;
string country;
bool codeP;
bool codeC;
bool codeT;
bool codeS;
bool codeX;
bool codeD;
}

Angular Call:

app.service("angularService", function ($http) {    
   $scope.search = function(id) {
    var response = $http({
        method: "get",
        url: "api/customer",
        params: {
            id:id
        }
    });
    return response;
};

use this service in controller: Hope you know how to inject service

  app.controller("editController", function ($scope,$routeParams,   angularService) {
  angularService.search(id).then(function (response) {
               $scope.selectedBroker = response.data[0].selectedBroker, 
          $scope.brokerIsUnallocated= response.data[0].brokerIsUnallocated, 
          $scope.brokerIncludeDeleted =response.data[0].brokerIsUnallocated, 
         //similarly do for all property....
  });

Hope you can get help from this.

Thank you for your extensive reply @Reena but I think your service code is malformed. I was going to move the code into a service, but I want to get it working inline first. The id parameter is the search criteria, and at the moment I'm not interested in what the service returns; I am just worried about the .NET Web API call receiving parameters. — serlingpa, Apr 10 '15 at 11:25
Apply breakpoints and check whether it hits your method. And also Use in this way and check whether it hits the break-point over here public List Get(SearchParameters id) — Reena, Apr 10 '15 at 11:29

score 0 · Answer 3 · answered Apr 10 '15 at 11:40

I think I have discovered the problem.

In Fiddler, it shows that fields that have a value are passed, but the others are ignored. I must explicitly set the values of these fields before sending the request. I was relying on model binding to create the fields but I need to do smoe additional work.

M

Web API 2 REST Get() not receiving parameters: Angular

3 Answers3

Linked