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

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

I suppose that you are using ASP.NET WebAPI and it bind all simple types (int, bool, string, etc) from URL and all complex types from body. When you marked name with FromBody attribute then it bind it from request body instead of url mapping.

You can read more about ASP.NET WebAPI routing and parameter binding here:

  • On www.asp.net
  • On www.west-wind.com
  • and on MSDN

There's a piece you're missing is the data contract attributes If you make a your class like:

[DataContract]
public class RecipeInformation
{
    [DataMember]
    public string name { get; set; }
}

These attributes are found in System.Runtime.Serialization, and the Json parser (Json.NET) uses them to (help) deserialize the model.


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