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

Pulled from a working project

AngularJS:

var apiUrl = ngRoot + '/api/ControllerName'; //ControllerName should match APIControllerName
$http.put( apiUrl + '/RoutValue/' + id, model );

WebAPIController:

[HttpPut]
[Route("api/APIControllerName/RoutValue/{id}")]
public HttpResponseMessage Put(int id, Model model)

or for list of models

public HttpResponseMessage Put(int id, List<Model> model)

Answer 2

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: { ......} }
 });

Answer 3

in Your code:

[Route("api/PutItem/")]
    [HttpPost]
public IHttpActionResult PutItem(Guid id, Item item)

So You send Put or Post? I think that this is a problem

Answer 4

@Pakk, your methods work cause the first parameter "id" is being sent as part of the querystring, and only the second one as part of the request body. Thats the only way it works, sending multiple from the body won't work.