AJAX & Web Api Post Method - How does it work?

Question

I am trying to write to my database using AJAX / Jquery and c#. Whenever I pass the parameter in to the C# code it shows as null. I am using the default template that visual studio generates when creating a controller class. Any help would be appreciated!

NOte: This is a rest service that I am trying to call. (A regular ASP website... not MVC. Also, the GET Rest api works perfectly.)

Jquery/AJAX:

var dataJSON = { "name": "test" }  $('#testPostMethod').bind("click", GeneralPost); function GeneralPost() {     $.ajax({         type: 'POST',         url: '../api/NewRecipe',         data:JSON.stringify(dataJSON),         contentType: 'application/json; charset=utf-8',         dataType: 'json'     }); } 

C#

    //If I remove the [FromBody] Tag then when I click the button this method is never called.     public void Post([FromBody]string name)      {      } 

EDIT:

I have adjusted my code slightly but am still encountering the same issue. To recap, It is loading the POST method, but it is passing in null.

C#

 public class RecipeInformation     {         public string name { get; set; }      }          public void Post(RecipeInformation information)          {          } 

AJAX:

    var dataJSON = { information: { name: "test" } };      $('#testPostMethod').bind("click", GeneralPost);     console.log(dataJSON);     function GeneralPost() {         $.ajax({             type: 'POST',             url: '../api/NewRecipe',             data: dataJSON,             contentType: 'application/json; charset=utf-8',         });     } 

Answer 1

For simple type, on server side:

public void Post([FromBody]string name) { } 

on the client side, you just define if you want to send in json format:

    var dataJSON = "test";      $('#testPostMethod').bind("click", GeneralPost);     function GeneralPost() {         $.ajax({             type: 'POST',             url: '/api/NewRecipe',             data: JSON.stringify(dataJSON),             contentType: 'application/json; charset=utf-8',             dataType: 'json'         });     } 

If you want to make it work in complex type, from server side you should define:

public class RecipeInformation {     public string name { get; set; } }  public class ValuesController : ApiController {     public void Post(RecipeInformation information)     {     } } 

And from client side:

    var dataJSON = { name: "test" };      $('#testPostMethod').bind("click", GeneralPost);     function GeneralPost() {         $.ajax({             type: 'POST',             url: '/api/NewRecipe',             data: JSON.stringify(dataJSON),             contentType: 'application/json; charset=utf-8',             dataType: 'json'         });     } 

Answer 2

You can try doing something like this and use the jquery param method

    var postData = {         name : 'name'     }      $('#testPostMethod').bind("click", GeneralPost);     function GeneralPost() {         $.ajax({             type: 'POST',             url: '../api/NewRecipe',             data: $.param(postData,true),             contentType: 'application/json; charset=utf-8',             dataType: 'json'         });     }