jQuery posts null instead of JSON to ASP.NET Web API

Question

I can't seem to get this to work... I have some jQuery like this on the client:

$.ajax({
    type: "POST",
    url: "api/report/reportexists/",
    data: JSON.stringify({ "report":reportpath }),
    success: function(exists) {
        if (exists) {
            fileExists = true;
        } else {
            fileExists = false;
        }
    }
});

And in my Web.API controller I have a method like this:

[HttpPost]
public bool ReportExists( [FromBody]string report )
{
    bool exists = File.Exists(report);
    return exists;
}

I'm just checking to see if a file lives on the server, and to return a bool as to whether it does or not. The report string I am sending is a UNC path, so reportpath looks like '\\some\path\'.

I can fire the script okay, and hit a breakpoint in my ReportExists method, but the report variable is always null.

What am I doing wrong?

I also see a way to post with .post and postJSON. Maybe I should be using one of those? If so, what would my format be?

Update: An additional clue maybe- if I remove [FromBody] then my breakpoint doesnt get hit at all- 'No http resource was found that matches the request'. Examples I am looking at show that [FromBody] isn't needed...?

Answer 1

So I found the problem, and the solution. So, first thing first. The contentType cannot be 'application/json', it has to be blank (default to application/x-www-form-urlencoded I believe). Although it seems you have to SEND json, but without a name in the name value pair. Using JSON.stringify also messes this up. So the full working jQuery code is like this:

$.ajax({
    type: "POST",
    url: "api/slideid/reportexists",
    data: { "": reportpath },
    success: function(exists) {
        if (exists) {
            fileExists = true;
        } else {
            fileExists = false;
        }
    }
});

On the Web.API side, you MUST have the [FromBody] attibute on the parameter, but other than this it's pretty standard. The real problem (for me) was the post.

In Fiddler, the request body looked like this "=%5C%5Croot%5Cdata%5Creport.html"

This post really had the answer, and linked to this article which was also very helpful.

Answer 2

jQuery.ajax() by default sets the contentType to be application/x-www-form-urlencoded. You could send the request in application/json instead. Also, you should send your data as a string and it will get model bind to the report parameter for your post method:

$.ajax({
    type: "POST",
    url: "api/report/reportexists/",
    contentType:  "application/json",
    data: JSON.stringify(reportpath),
    success: function(exists) {
        if (exists) {
            fileExists = true;
        } else {
            fileExists = false;
        }
    }
});