CODEWITHSUNDEEP
c#jsonangularjsasp.net-web-api
Dave
Dave

Reputation: 7359

AngularJs/webAPI: recieving null in the parameter of webAPI

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?

Upvotes: 2

Views: 3316

Answers (2)

Tobey
Tobey

Reputation: 11

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.

Upvotes: 1

Matías Fidemraizer
Matías Fidemraizer

Reputation: 64943

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.

Upvotes: 3

Related Questions