AngularJS ngResource POST object is Null in C# Web API

Question

My problem is that when I send a complete Javascript object to my Web API Controller I always get null values. Even though I have a complete object I need to specify each attribute and value as you can see below. How can I make Web API accept a ready made Javascript object and bind it correctly?

C# Web Api Controller:

[Route("addcredentials/{salesId}")]
[HttpPost]
public IHttpActionResult AddCredentials([FromUri] int salesId, [FromBody] ScriveCredentials credentials)
{
    return Ok(credentials);
}

C# Credentials object:

public class Credentials
{
    public string ClientIdentifier { get; set; }

    public string ClientSecret { get; set; }

    public string TokenIdentifier { get; set; }

    public string TokenSecret { get; set; }
}

Javascript object passed to resource, saved as "result" further down:

{ClientIdentifier: "a", ClientSecret: "b", TokenIdentifier: "c", TokenSecret: "d"}

Resource method:

addCredentials: {
    method: 'POST',
    url: 'api/addcredentials/:userSalesId'
}

Usage that results in null values:

userResource.addCredentials({ userSalesId: user.SalesId }, { credentials: result}).$promise.then(function (data) {
    console.log(data);
});

Payload for this request:

{"credentials":{"ClientIdentifier":"a","ClientSecret":"b","TokenIdentifier":"c","TokenSecret":"d"}}

Usage that works but seems overly complicated:

userResource.addCredentials({ userSalesId: user.SalesId }, { ClientIdentifier: result.ClientIdentifier, ClientSecret: result.ClientSecret, TokenIdentifier: result.TokenIdentifier, TokenSecret: result.TokenSecret }).$promise.then(function (data) {
    console.log(data);
});

Request payload:

{"ClientIdentifier":"a","ClientSecret":"b","TokenIdentifier":"c","TokenSecret":"d"}

Update

Tried the following and it did not work either, null on all values:

addScriveCredentials: {
    method: 'POST',
    url: 'api/addcredentials/'

result.SalesId = user.SalesId;
userResource.addCredentials({}, { credentials: result }).$promise.then(function (data) {
    console.log(data);
});

C#:

[Route("addcredentials")]
[HttpPost]
public IHttpActionResult Addcredentials(Credentials credentials)
{
    return Ok(credentials);
}

Answer 1

I had done a sample earlier, hope the follwing code will help you to understand.

The Model.

using System.ComponentModel.DataAnnotations;

public class ProductModel
{
    public ProductModel(int id, string name, string category, decimal price)
    {
        Id = id;
        Name = name;
        Category = category;
        Price = price;
    }

    public int Id { get; set; }

    [Required]
    public string Name { get; set; }

    [Required]
    public string Category { get; set; }

    [Required]
    public decimal Price { get; set; }
}

The ApiController.

using Models;
using Newtonsoft.Json;
using Newtonsoft.Json.Serialization;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web.Hosting;
using System.Web.Http;

public class ProductsController : ApiController
{
    // other code omitted for brevity.

    [HttpPost]
    public IHttpActionResult PostProduct(ProductModel product)
    {
        try
        {
            if (product == null)
            {
                throw new ArgumentNullException("Product parameter cannot be null");
            }

            if (ModelState.IsValid)
            {
                // code omitted for brevity.

                return this.Ok();
            }
            else
            {
                throw new Exception("Product is invalid");
            }
        }
        catch (Exception ex)
        {
            return InternalServerError(ex);
        }
    }

    [HttpPut]
    public IHttpActionResult PutProduct(ProductModel product)
    {
        try
        {
            if (product == null)
            {
                throw new ArgumentNullException("Product parameter cannot be null");
            }

            if (ModelState.IsValid && product.Id > 0)
            {
                // code omitted for brevity.

                return this.Ok();
            }
            else
            {
                throw new Exception("Product is invalid");
            }
        }
        catch (Exception ex)
        {
            return InternalServerError(ex);
        }
    }

    // other code omitted for brevity.

}

The Angular service.

// products.js

(function () {
    "use strict";

    angular
        .module("exampleApp")
        .constant("baseUrl", "http://localhost:53631/api/products/")
        .factory("productsResource", productsResource);

    productsResource.$inject = ["$resource", "baseUrl"];

    function productsResource($resource, baseUrl) {
        return $resource(baseUrl + ":id",
            {
                id: "@id"
            },
            {
                create: {
                    method: "POST"
                },
                save: {
                    method: "PUT"
                }
            });
    }
})();

The Angular controller. Focus on createProduct and updateProduct functions below

// edit.controller.js

(function () {
    "use strict";

    angular
        .module("exampleApp")
        .controller("EditController", EditController);

    EditController.$inject = ["$routeParams", "$location", "productsResource"];

    function EditController($routeParams, $location, productsResource) {
        var vm = this;
        vm.currentProduct = null;
        vm.createProduct = createProduct;
        vm.updateProduct = updateProduct;
        vm.saveEdit = saveEdit;
        vm.cancelEdit = cancelEdit;

        if ($location.path().indexOf("/edit/") === 0) {
            var id = $routeParams.id;
            productsResource.get({ id: id }, function (data) {
                vm.currentProduct = data;
            });
        }

        function cancelEdit() {
            $location.path("/list");
        }

        function updateProduct(product) {
            product.$save().then(function () {
                $location.path("/list");
            });
        }

        function saveEdit(product) {
            if (angular.isDefined(product.id)) {
                vm.updateProduct(product);
            } else {
                vm.createProduct(product);
            }

            vm.currentProduct = {};
        }

        function createProduct(product) {
            new productsResource(product).$create().then(function (newProduct) {
                $location.path("/list");
            });
        }
    }
})();

Answer 2

You could pass one object as the body of the post message instead.

Add a class like this

public class addCredentialObj
{
    public int salesId { get; set; }
    public Credentials credentials { get; set; }
}

Modify your controller like this (The use of FromBody can be read here)

[Route("addcredentials")]
[HttpPost]
public IHttpActionResult AddCredentials([FromBody]addCredentialObj obj)
{
    return Ok(credentials);
}

In the client you need to create a matching json object to the addCredentialObj class

var yourCredentials = {"ClientIdentifier":"a","ClientSecret":"b","TokenIdentifier":"c","TokenSecret":"d"};
var jsonData = {
    salesId: yourId,
    credentials: yourCredentials
};

And then in the $http request to the controller, stringify the json object

$http({
    method: 'POST',
    url: 'api/addcredentials',
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json'
    },
    data: JSON.stringify(jsonData),
});