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": "ex.ample@email.com" };
$.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.

Why does it have to be post? I saw it was in examples, but I thought I was making a GET request..? — Sami, Nov 24 '15 at 14:01
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. — Stephen Brickner, Nov 24 '15 at 14:02

score 2 · Accepted Answer · answered Nov 24 '15 at 15:40

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 :)

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 =) — Sami, Nov 24 '15 at 15:49

Karl Gjertsen · Answer 2 · 2015-11-24T14:20:31.230

You can create an object in your JavaScript:

var myData= {
     Email: "me@email.com"
};

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.

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. — Sami, Nov 24 '15 at 15:21

score 0 · Answer 3 · answered Nov 24 '15 at 14:04

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": "ex.ample@email.com" };
$.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; }
}

score 0 · Answer 4 · answered Nov 24 '15 at 14:12

var dto = {        
    Email: "ex.ample@email.com"
};

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

How to read JSON object to WebAPI

4 Answers4

Linked