send multiple objects to webapi with angularjs

Question

I have the following controller in my ASP.NET WebApi Application:

[Route("api/PutItem/")]
    [HttpPut]
    public IHttpActionResult PutItem(Guid id, Item item)
    {
        if (!ModelState.IsValid)
    }

And I have the following in my "Items" AngularJs service

var doEditItem = function(item){
            var deferred = $q.defer();

            console.log('item', item);
            var config = {
                headers: { 'Authorization': "Bearer " + $rootScope.token }
                //,params: {id:item.ItemId}
            }
            $http.put(sitesettings.url() + "api/PutItem/", item, config)
                    .success(function(data){

                        deferred.resolve(data);
                    })....

I end up receiving this message:

No HTTP resource was found that matches the request URI 'http://localhost:63289/api/PutItem/'.", MessageDetail: "No action was found on the controller 'Items' that matches the request."}

I have made changes to the parameters to add the item like this:

jItem = {id:item.ItemId, item:item}

and then I've tried passing jItem into to the put method like this:

    $http.put(sitesettings.url() + "api/PutItem/", jItem, config)

My application picks up the Guid, but not the new Item. If I remove the Guid, and send the item, my Application picks up the new Item.

I would like to know how I need to change my application so that I can send a Guid and the application picks up the new Item too.

I have used Angular.toJson(item, false); but this doesn't seem to change how my ASP.NET application is receiving the information.

Many thanks

Answer 1

You can not send a complex type along with a primitive type like that to an WebAPI action, you can either send multiple primitive types (Guid's, int's, strings etc.) or a single complex type (Item). If you want to send both, a work around is to use JObject:

[HttpPut]
public void PutItem(JObject data)
{
    Item item =  data["item"].ToObject<Item>();
    Guid id = data["id"].ToObject<Guid>();
}

Sent like this from angular:

 $http({
        url: "/api/PutItem",
        method: "PUT",
        data: {id: SOMEGUID, item: { ......} }
 });