Question

I have a web api method defined as follows:

[HttpPost]
public void Post(Input model)
{
    ...
}  

With Input model like this:

public class Input
{
    public string Id { get; set; }
    public object Extra { get; set; }
}

What I want to do is pass a valid JSON object as the extra parameter like the following example with jQuery:

$.post(
    'http://localhost/api/myController',
    { 
        id: 'someId',               
        extra: { 
            tags: ['a', 'b'],
            anotherValue: 'hello',
            oneMore: { 
                foo: 'bar'
            }
        }
    });

Id comes correctly into my model.Id property. However, the extra property comes as an {object} and since I don’t know whats in there I cannot deserialize it in any way.

I tried making it dynamic and/or casting it to dynamic/ExpandoObject/Dictionary without success. I know that I can probably make it work if I just receive a raw HttpRequestMessage and handle it myself. Hoever I would rather not do it and rely in all validations that .NET has in place.

Is it possible?

Thanks

EDIT 1: After testing some more alternatives I found that the extra property does not have any real value and it’s just initialized as a new object(). Looks like the default model binder implementation does not deal with dynamic JSON (at least not like this) and simply call the default constructor of the model property that it cannot deals with.

Answer 1

Defining your property as object should work or if you want to be explicit you give your Extra property the type JObject.

However the problem is with $.post request. In order to post complex data to a web.api method and allow the model binding you need to do two things:

• set the content type to ‘application/json’
• and send the data as JSON with calling JSON.stringify on it

But with $.post you cannot specify the content type so you need to use $.ajax:

So the following call should post the data to your action:

$.ajax({
    url: 'http://localhost/api/myController',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(
    { 
        id: 'someId',               
        extra: { 
            tags: ['a', 'b'],
            anotherValue: 'hello',
            oneMore: { 
                foo: 'bar'
            }
        }
    })
});