Posting multiple parameters to Web API using jQuery

Question

Like many before me, I'm trying to pass multiple parameters to a Web API project. I've tried several solutions offered on this site with no luck. My latest failing iteration looks as follows:

The Controller

public class UserDTO
{
   public int userID;
   public string username;
}

[HttpPost]
public string Post([FromBody]UserDTO userDTO)
{
   return userDTO.userID.ToString() + " " + userDTO.username;
}

The Web API route config

config.Routes.MapHttpRoute(
   name: "DefaultApi",
   routeTemplate: "api/{controller}/{id}",
   defaults: new { id = RouteParameter.Optional }
);

The jQuery

var apiUrl = "http://localhost:55051/api/User/Post";
var userDTO = {
   userID: 5,
   username: "testuser"
};

$.ajax({
   type: "POST",
   url: apiUrl,
   data: JSON.stringify(userDTO),
   datatype: "json",
   contenttype: "application/json; charset=utf-8"
)};

Fiddler Output

Fiddler shows correctly passed JSON variables and in the Raw view I can see:

{"userID":5,"username":"testuser"}

On Execution

userID = 0
username = null

Help!

I figure that the issue is with Web API and it's difficulty in working with JSON parameters given that my POST appears to be correctly formatted in Fiddler. Any ideas?

This might relate to the current problem but datatype: "json", is supposed to be dataType: "json", — Sushanth --
– Sushanth --, Commented Jun 17, 2013 at 21:20

score 2 · Accepted Answer · 2013-06-17 21:46:22Z

2

Doesn't your jQuery ajax call fail? Check for it?

var apiUrl = "http://localhost:55051/api/UserController/Post";

Seeing your code this should probably be:

var apiUrl = "http://localhost:55051/api/User";

The word controller is typically not part of your URL. You don't have to explicitly invoke POST, it should pick it by convention since your ajax call is a POST.

EDIT:

The above and your casing in your ajax call as commented.

I personally use Firebug (a Firefox extension) to debug cases like these. If find it more convenient than fiddler in this case.

edited Jun 17, 2013 at 21:46

answered Jun 17, 2013 at 21:24

user45886

Sign up to request clarification or add additional context in comments.

1 Comment

Jonny Over a year ago

Well spotted. I hand edited the code when creating the question to remove some naming and left that error. The original issue still stands, however, but was solved by your case sensitivity answer. Thanks a million! :)

Community · Accepted Answer · 2017-05-23 12:29:13Z

1

My guess is you have to pass: { userDTO : { userID ... } } as data in jquery. The request is wrapped. You have to stringify this of course.

Right now you pass parameters but none of them match userDTO so it gets default values.

See my previous answer here: Jquery post

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Jun 17, 2013 at 21:32

Guillaume Schuermans

9062 gold badges12 silver badges28 bronze badges

Collectives™ on Stack Overflow

Posting multiple parameters to Web API using jQuery

The Controller

The Web API route config

The jQuery

Fiddler Output

On Execution

Help!

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

The Controller

The Web API route config

The jQuery

Fiddler Output

On Execution

Help!

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related