MVC4 JSON Model Binding doesn't work

Question

Using the following Viewmodel :

public class GetUsersFromNextCircuitRequest
    {
        public int? dosarId { get; set; }
        public List<int> dosareIds { get; set; }
        public string query { get; set; }
        public int page { get; set; }
        public int page_limit { get; set; }
    }

and using it in the following action:

 public ActionResult GetUsersFromNextCircuit(GetUsersFromNextCircuitRequest requestNextUsers)
        {
         }

and send the request the following way:

ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
                    url: self.attr('getusersfromnextcircuiturl'),
                    dataType: "json",
                    contentType: 'application/json; charset=utf-8',
                    type: 'POST',
                    traditional: true,
                    data: function (term, page) {
                        if (self.attr('dosare') !== undefined && self.attr('dosare').length > 0) {
                            var dosareIds = [];
                            self.attr('dosare').forEach(function (element, index, list) {
                                dosareIds.push(element.attr('Id'));
                            });
                            return JSON.stringify({
                                    query: term, // search term
                                    page: page,
                                    dosareIds: dosareIds,
                                    page_limit: 30

                            });
                        }
                        else
                            return JSON.stringify({
                                    query: term, // search term
                                    page: page,
                                    dosarId: self.attr('dosarid'),
                                    page_limit: 30

                            });
                    },
                    results: function (data, page) {
                        var more = (page * 30) < data.total; // whether or not there are more results available
                        return { results: data.users, more: more };
                    }
                }

The http request looks like this:

{"query":"xa","page":1,"dosareIds":[4137,4163],"pagelimit":30}

The problem is that the request parameter is null. I have no idea why it doesn't work.

Answer 1

We had the same problem, then we decided to use CustomModelBinder. Am sharing what we have done,

In client side,

In ajaxRequest u need to send the entire ViewModel as below,

        var viewModel = new Object();
        viewModel.query= term;
        viewModel.page= page;
        viewModel.dosareIds= new Array();
        viewModel.dosarIds = dosareIds;
        viewModel.page_limit = 30;

then stringify the model and assign it to the data,

data: { viewModel: JSON.stringify(viewModel) };

In Server side,

U can use customModelBinder to retrive the value back

public class CustomJsonModelBinder : IModelBinder
{
    public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        try
        {
            var data = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);
            JavaScriptSerializer js = new JavaScriptSerializer();
            var temp = js.Deserialize(data.AttemptedValue, bindingContext.ModelType);
            return temp;
        }
        catch
        {
            return null;
        }
    }
}

And in ur viewModel u need to add the attribute,

[ModelBinder(typeof(CustomJsonModelBinder))]
public class GetUsersFromNextCircuitRequest
{
    public int? dosarId { get; set; }
    public List<int> dosareIds { get; set; }
    public string query { get; set; }
    public int page { get; set; }
    public int page_limit { get; set; }
}

Now, CustomJsonModelBinder will parse the value. I hope it will solve ur prob.