AngularJs/webAPI: recieving null in the parameter of webAPI

Question

I am using AngularJS and I am trying to send in a json from my service to the webAPI controller. When I send via I recieve null in the parameter in webApi function.

My function service is:

angular.module('productsApp')
    .service('ProductDetailService', ['$http', function ($http) {
        var urlBase = "/api/productdetail";

        this.Salvar = function (product) {
            var mydata = JSON.stringify(product);
            debugger;

            return $http({
                method: 'POST',
                url: urlBase + "/salvar/" + mydata,
                data: mydata,
                headers: { 'Content-Type': 'application/json' }
            });
        };
    }]);

my code in the webAPI is:

public class ProductDetailController : BaseController
{
    [Route("api/productdetail/salvar/{item}")]
    [HttpPost]
    public bool Salvar(string item)
    {
        return true;
    }
}

my app.js is:

var app = angular.module('productsApp', ['ngRoute']);

app.config(['$routeProvider', function ($routeProvider)
{
    $routeProvider.when('/', {
        controller: 'ProductController',
        templateUrl: '/Scripts/App/Html/ProductList.html'
    }).
    when('/testprice', {
        controller: 'ProductController',
        templateUrl: '/Scripts/App/Html/ProductDetail.html'
    }).
    when('/editar/1', {
        controller: 'ProductController',
        templateUrl: '/Scripts/App/Html/ProductDetail.html'
    }).
    when('/api/productdetail/salvar/*', {
        controller: 'ProductDetailController',
        templateUrl: '/Scripts/App/Html/ProductDetail.html'
    })
    .otherwise({ redirectTo: '/' });

}]);

The problem in the service is when I am adding to type data: something in I am recieving in the webService null and I have to add my data in the complet uri, something like:

http//.../api/productdetail/salvar/{mydata}

using it, it is working.

what is wrong?

What is the value of mydata when the $http invokes the service? — Karthik
– Karthik, Commented Aug 4, 2015 at 10:12
Nope. It won't work then, since your parameter is a string type in your controller. It would always be null. — Karthik
– Karthik, Commented Aug 4, 2015 at 10:16
@Turbulence Wrong, you can url-encode a json and send as part of the query string. It's a bad idea, but sometimes you need to do so to cover som edge cases... — Matías Fidemraizer
– Matías Fidemraizer, Commented Aug 4, 2015 at 10:18
@MatiasFidemraizer - Thanks for the info. Let me edit the comment. — Karthik
– Karthik, Commented Aug 4, 2015 at 10:19

Matías Fidemraizer · Accepted Answer · 2015-08-04 10:14:47Z

3

If you want to receive plain text from HTTP/POST body you need to apply [FromBody] attribute to controller action's input parameter:

[Route("api/productdetail/salvar")]
[HttpPost]
public bool Salvar([FromBody] string item)
{
    return true;
}

While you can go this way, WebAPI expects you to design a DTO and receive POST data using a DTO instance (WebAPI deserializes the JSON into the parameter based on its type):

[Route("api/productdetail/salvar")]
[HttpPost]
public bool Salvar(MyData item)
{
    return true;
}

MyDatamight look like this:

public class MyData
{
     public string Text { get; set; }
}

And your Angular app should send a JSON like this: { "Text": "hello world" }.

Finally, WebAPI enforces RESTful API development and your route is RPC-style. You should rename it to api/product/details and POST data to this resource URI. Otherwise, you're not designing a RESTful API!

Remember that REST loves using HTTP verbs to express actions:

POST is create.
PUT is update.
GET is get all, get by pages or get by id.
DELETE is delete by id, range, whatever.
...

In summary, don't put verbs in resource URIs but use HTTP verbs to express what to do against your exposed resources.

answered Aug 4, 2015 at 10:14

Matías Fidemraizer

65.1k19 gold badges132 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dave Over a year ago

It is working fine. Just a question. Is it possible to convert in javascript to Base4 and in the parameter of converted it to the dto mydata automatically decoded from base64?

Matías Fidemraizer Over a year ago

@David First part is done using btoa, the other part would be harder, because you would need to implement a custom parameter binding... Why you need to send base64-encoded...?

Dave Over a year ago

well maybe I am thinking in the old suystems which we needed security, I dont know if it is necessary now

Matías Fidemraizer Over a year ago

@David Base64 provides no security. It's used to avoid special characters when sending strings over the wire, but you need to pay attention to the fact that a Base64 increases the amount of data to send/receive. Use HTTPS to secure client-server data exchange!

Matías Fidemraizer Over a year ago

@David Look for custom http parameter binding on WebAPI docs. You'll need to provide a IHttpParameterBinding implementation and configure it in HttpConfiguration. BTW, ask a new question. Comments are here to resolve current answer's content issues :)

|

Tobey · Accepted Answer · 2016-02-03 16:07:13Z

1

Just Food For Thought that got me. If you have a property that is being set to an invalid type like a string being set to an object in json. The api will not translate anything and you will get a null.

answered Feb 3, 2016 at 16:07

Tobey

111 bronze badge

Collectives™ on Stack Overflow

AngularJs/webAPI: recieving null in the parameter of webAPI

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related