How to read JSON object to WebAPI

Question

I've checked a few similar questions, but none of the answers seem to fit (or dumb it down enough for me). So, I have a really simple WebAPI to check if user with an email exists in DB.

AJAX:

var param = { "email": "[email protected]" };
$.ajax({
 url: "/api/User/",
 type: "GET",
 data: JSON.stringify(param),
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (data) {
 if (data == true) {
 // notify user that email exists
 }
 else {
 // not taken
 } 
 } 
});

WebAPI:

public bool Get(UserResponse id)
{
 string email = id.email;
 UserStore<ApplicationUser> userStore = new UserStore<ApplicationUser>();
 ApplicationUserManager<ApplicationUser> manager = new ApplicationUserManager<ApplicationUser>(userStore);
 ApplicationUser user = manager.FindByEmail(email);
 if (user != null)
 {
 return true;
 }
 else
 {
 return false;
 }
}
//helper class:
public class UserResponse
{
 public string email { get; set; }
}

Now clearly, this doesn't work. The ajax call works fine, but how do I parse the json object to the WebAPI to be able to call it like id.email?
EDIT
I can't pass the email address as a string, because the comma(s) mess up the routing.
The ajax call works fine, the object is sent to the WebAPI. The problem is I can't parse the object in code behind.

• Stephen Brickner: In your ajax change GET to POST
• Sami: Why does it have to be post? I saw it was in examples, but I thought I was making a GET request..?
• Stephen Brickner: In this case you don't need it to be a post but you need to change some things. I'm about to post an answer below.

Answer 1

Problem: Your current implementation are sending the email as an entity on a GET request. This is a problem because GET requests does not carry an entity HTTP/1.1 Methods Solution: Change the request to a POST

Now because you are POST'ing the email from your client to your api, you have to change the API implementation to POST:

public bool Post(UserResponse id)

---

To make sure your posted entity is bound correctly, you can use [FromBody] like:

public bool Post([FromBody] UserResponse id)

If you do this (and you have not yet overridden the default model binder), you have to annotate your model like:

[DataContract]
public class UserResponse
{
 [DataMember]
 public string email { get; set; }
}

I think that is all - hope it works :)

• Sami: Thanks. That's just what I needed. Wrote my own answer while you answered this. I'm removing my own, since this points out everything relevant and also answers my follow-up question =)

Answer 2

Either change it to a POST to send the object you are trying to send through the request body or change you method signature to accept the email address.

var param = { "email": "[email protected]" };
$.ajax({
 url: "/api/users/" + param.email,
 type: "GET",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (data) {
 if (data == true) {
 // notify user that email exists
 }
 else {
 // not taken
 } 
 } 
});
[HttpGet, Route("api/users/{emailaddress}")]
public bool Get(string emailaddress)
{
 string email = emailaddress;
 UserStore<ApplicationUser> userStore = new UserStore<ApplicationUser>();
 ApplicationUserManager<ApplicationUser> manager = new ApplicationUserManager<ApplicationUser>(userStore);
 ApplicationUser user = manager.FindByEmail(email);
 if (user != null)
 {
 return true;
 }
 else
 {
 return false;
 }
}
//helper class:
public class UserResponse
{
 public string email { get; set; }
}

Answer 3

var dto = { 
 Email: "[email protected]"
};
$.ajax({
 url: "/api/User/",
 type: "GET",
 data: dto,
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (data) {
 if (data == true) {
 // notify user that email exists
 }
 else {
 // not taken
 } 
 } 
});

Answer 4

You can create an object in your JavaScript:

var myData= {
 Email: "[email protected]"
};

This creates an object, matching the object expected by the controller.

You then set the Ajax call to pass this as the data property:

$.ajax({
 url: "/api/User/",
 type: "GET",
 data: myData,
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (data) {
 if (data == true) {
 // notify user that email exists
 }
 else {
 // not taken
 } 
 } 
});

I like this approach, as you can then add more properties as required. However, if you are only passing the email address, you might want to just pass a string.

• Sami: This is just what I have done. Doesn't work. The problem is how to parse the object in code behind. I can't pass it as a string, because it contains one or more commas, which mess up the routing.