ASP.NET MVC sending JSON data to a Controller Action

Question

I am trying to send some JSON data to my ASP.NET MVC3 controller action method, but it won't work no matter what I do.

Here is my ajax call (it uses the JSON.stringify method from the json2.js):

$.ajax({
        url: '/Home/GetData',
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8;",
        data: JSON.stringify(filters_data),
        success: function (data) {
            alert(data);
        }
    });

The Fiddler shows the request like this:

POST http://localhost:51492/Home/GetData HTTP/1.1
Host: localhost:51492
Connection: keep-alive
Content-Length: 171
Origin: http://localhost:51492
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.7 (KHTML, like Gecko)     Chrome/16.0.912.75 Safari/535.7
Content-Type: application/json; charset=UTF-8;
Accept: application/json, text/javascript, */*; q=0.01
Referer: http://localhost:51492/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

{"Filters":[{"Field":3,"Operator":0,"Values":["30.01.2012.","30.01.2012."]},{"Field":2,"Operator":0,"Values":["-1"]},{"Field":0,"Operator":0,"Values":["some-string"]}]}

My c# code:

[HttpPost]
public string GetData(QueryFilters filters)
{
     return "Ho ho ho and a bottle of rum.";
}

[Serializable]
public enum Fields
{
        A,
        B,
        C,
        D
}

[Serializable]
public enum FilterOperator
{
    Is,
    Between,
    GreaterOrEqual,
}

[Serializable]
public class QueryFilter
{
    public Fields Field { get; set; }
    public FilterOperator Operator { get; set; }
    public List<string> Values { get; set; }
}

[Serializable]
public class QueryFilters
{
    public List<QueryFilter> Filters { get; set; }
}

I have added the following line to the Application_Start() method of global.asax.cs:

ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());

The breakpoint in the action method 'GetData' is hit, but the value of the Filters property is null. Any ideas?

Another note: I have tried passing a much simpler object: Person - properties string Name and int Age, with the same result - it appears as if the automated model binding isn't working for me but I don't know how to check it.

Answer 1

The problem is that your action argument is called filters and that inside your QueryFilters model you have a property called Filters which confuses the default model binder.

So simply rename your action argument:

[HttpPost]
public ActionResult GetData(QueryFilters model)
{
    return Json("Ho ho ho and a bottle of rum.");
}

Oh and notice that actions should return ActionResults not strings.

Also remove the following line from your global.asax:

ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());

ASP.NET MVC 3 already has this built-in.

Or if you absolutely for some reason need to have your action argument called filters then you could also modify the JSON request you are sending to this:

data: JSON.stringify({
    filters: { 
        Filters: [
            { "Field": 3, "Operator": 0, "Values": ["30.01.2012.", "30.01.2012."] },
            { "Field": 2, "Operator": 0, "Values": ["-1"] },
            { "Field": 0, "Operator": 0, "Values": ["some-string"] }
        ]
    }
}),

Now there's no more ambiguity.