current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 2 down vote favorite

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.

share|improve this question
    
Have you tried serializing the object (JSON.stringify(...)) – Italo Ayres Feb 3 at 16:32
    
@ItaloAyres yes, its not working. – mkr Feb 3 at 16:34
    
What's the definition of ComplexObj? Also, what happens when you set var id = '100'; – Josh Feb 3 at 16:36
    
I know that in Spring, we can use @RequestBody to post a JSON object. If you are using another framework, you can try to use something similar. – Ealon Wang Feb 3 at 16:37
    
@Josh 'id' is just an another parameter, i need to pass to web api. – mkr Feb 3 at 17:06
up vote 3 down vote accepted

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.

share|improve this answer
1  
Rick Strahl's solution only supports simple types. To support complex objects, check out MultiPostParameterBinding – Keith Feb 3 at 17:33
    
@Keith I missed that. Great point and great link. – David L Feb 3 at 18:06

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.