How to send multiple parameters in AngularJS $http.post to Web API controller action method

Question

How to send multiple parameters in an angularjs $http.post to web api controller action method.

Below is my code.

AngularJS code

var complexObj = { prop1: "value", prop2: "value" };

var id = 100;

var data = { id: id, complexObj: complexObj };

$http({
       method: 'POST',
       url: 'http://localhost/api/WebApiController/MethodName',
       data: data
       }).success(function (data, status) {
                //do something...
            });


$http.post('http://localhost/api/WebApiController/MethodName', data)
     .success(function (data, status) {
                     //do something...
                 });

Web API controller

[RoutePrefix("api/WebApiController")]
public class WebApiController: ApiController
{
    [Route("MethodName")]
    public ReturnValue WebApiAction(string id,ComplexObj complexObj)
    {
        // process request and return data...
    }
}

I am getting below response message in fiddler.

{ "message": "No HTTP resource was found that matches the request URI 'http://localhost/api/WebApiController/MethodName'.",
"messageDetail": "No action was found on the controller 'WebApiController' that matches the request." }

When I send the complexObj alone, its hitting the web api,but all properties are null or set to default values.

What am I doing wrong? How can I send two or more parameters(both complex objects and string/int) in $http.post? Any help is much appreciated.

Answer 1

Web API doesn't support multiple post parameters in this way.

Your best bet is to roll up Id into ComplexObj and post it as a single parameter.

complexObj.id = id;
var data = complexObj;

Update your signature to take just a single object.

[Route("MethodName")]
public ReturnValue WebApiAction(ComplexObj complexObj)
{
    // process request and return data...
}

If you absolutely want to be able to post data like this, consider Rick Strahl's post on creating a custom parameter binder.