jQuery GET with parameters always null on server side

Question

I don't know what I'm missing.

Everything works when passing complex custom objects, but when I try to pass a simple int or string I get null

Here is the ajax call on client side:

var id = 1;
$.ajax({
   type: "GET",
   url: "/api/APICalls/MethodName",
   contentType: "application/json; charset=utf-8",
   data: JSON.stringify(id), // or JSON.stringify({id: id}) or just id
   dataType: "json",
   success: function (data) {
       console.log(data);
   },
   error: function (data) {
       alert(data.responseText);
   }
});

On server side the method is as follows:

[HttpGet]
public void MethodName([FromBody] string id)
{
    // Do something with id... Doesn't matter... It is `null`!
}

Answer 1

The reason why you are getting null value for id parameter is [FromBody]. Technically when you send GET request to the server with jQuery the data is presented in the query parameters and not in the request body.

What you need to do on backend side is just to remove [FromBody] as follows:

[HttpGet]
public void MethodName(string id)
{
    // Now you should be able to access the value of id
}

Sending data from client side as the following:

var id = 1;

$.ajax({
   url: '/api/APICalls/MethodName',
   type: 'GET',
   data: {id: id},
   success: function (data) {
      console.log(data);
   },
   error: function (err) {
      console.error(err);
   }
});

From the documentation for [FormBody] you can read the following:

To force Web API to read a simple type from the request body, add the [FromBody] attribute to the parameter.

Your data was presented in the query string, checking the network tab in Chrome:

I hope this helps!