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

ajax, asp.net-web-api, c#, jquery

Solution

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'
        });
    }

Problem

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', }); } ```

Original source