unable to pass class from angularjs to web api

Question

I'm trying to update Item details as below on a click of an update button in WEB API update method.

$scope.Update = function () {
    var ItemData = {
        ITEM_ID: $scope.inpItemId,
        ITEM_NAME: inpItemName,
        NET_WEIGHT: inpNetWeight,
    };
    //if (ItemData.ITEM_ID != null) {
    //    $http.put(
    //        'http://localhost:55762/api/ItemMaintenance/UpdateItemDetails',
    //        // JSON.parse(JSON.stringify(ItemData)),
    //        JSON.stringify(ItemData),
    //        {
    //            headers: { 'Content-Type': 'application/json' }
    //            // body: JSON.stringify(ItemData);
    //        }
    //    ).success(function (response) {
    //        alert("Updated successfully....");
    //    }, function errorCallback(response) {
    //        alert("NOT  ...  Updated ....");
    //    });

    if (ItemData.ITEM_ID != null || ItemData.ITEM_ID === "") {
        $http({
            method: 'put', url: 'http://localhost:55762/api/ItemMaintenance/UpdateItemDetails',
            data: JSON.stringify(ItemData),
            contentType: "application/json"
        }).then(function successCallback(response) {
            alert("Updated successfully....");
        }, function errorCallback(response) {
            alert("NOT  ...  Updated ....");
        });
    }
}

WEB API: able to get debug point UpdateItemDetails method.

[HttpPut]
public HttpResponseMessage UpdateItemDetails([FromBody]MA_Item ItemDetails) //----ItemDetails are always null here
{
    if (ItemDetails != null)
    {
        bool result = itemRepository.UpdateItemDetails(ItemDetails);
        if (result)
            return Request.CreateResponse(HttpStatusCode.OK, "Updated Successfully");
    }
    return Request.CreateErrorResponse(HttpStatusCode.BadRequest, "Something wrong !");
}

ItemDetails are always null when reaching WEB API.

Ma_Item.cs file:

public class MA_Item
{
    public string ITEM_ID { get; set; }
    public string ITEM_NAME { get; set; }
    public decimal NET_WEIGHT { get; set; }
    ......
}

Answer 1

If you send ItemData in data attribute, then there's no need to use [FromBody] in your web api action. From this answer -

By default web api (and asp.net mvc) in a POST request deserializes (reference) object arguments from http message body (data)

Also as you didn't post how your ItemDetails class looks like - you need to make sure attribute names are alike so that they can be mapped correctly while deserializing. This may also be a reason of getting ItemDetails as NULL. One good convention is - In JS end use camelCase-

var ItemDetails = {                    
                    itemId: $scope.inpItemId,                   
                    itemName: inpItemName,
                    netWeight : inpNetWeight,
                    ...
                    ...                 
                   };

In the C# end use PascalCase-

Class ItemDetails
{
public int ItemId {get; set;}
public string ItemName {get; set;}
public double NetWeight {get; set;}
}