Question

I work on a ASP.NET MVC project that needs to be able to filter data in an extensible way. I’ve decided to use a class to represent a single filter criterion (I am aware that it could be a Dictionary at this point, but I might need to add other properties later):

public class FilterCriterion
{
    public string FilterName { get; set; }

    public string FilterValue { get; set; }
}

And this is the controller method signature I had in mind that will return filtered data:

public JsonResult GetMultipleShowDetailsByFilter(IEnumerable<FilterCriterion> filters, int pageNumber, int itemsPerPage)

This method will be called from the web page (using JavaScript) and will return a JSON containing a set of entities that will be then displayed on the page.

I assume I will need some kind of converter that will accept the arguments in a raw state and create and enumerable object implementing IEnumerable<FilterCriterion>. Maybe I could use a ModelBinder, but I am not really sure how.

Can you nudge me in the right direction? Thanks.

EDIT:
I not pass an array as suggested. When I step into the controller, there is a correct number of items inside filters, but their properties (both FilterName and FilterValue) are null. Below I post the complete code as well as the contents of filter object on the client side. What am I doing wrong?
Javscript code:

function filterChanged() {
    var activeFilters = $(':checked');
    var filters = new Array();
    $.each(activeFilters, function (i, val) {
        var newItem = new Object();
        newItem.FilterName = $(val).attr('data-filter-type');
        newItem.FilterValue = $(val).attr('data-filter-value');
        filters[i] = newItem;
    });

    $.getJSON('../DatabaseApi/GetMultipleShowDetailsByFilter',
        {
            'filters': filters,
            'pageNumber': 1,
            'itemsPerPage': 10
        },
        function(data) {
            fill(data);
        });
}

How do the created object look (proof that there is data, taken from VS Immediate Window):

?filters
[[object Object],[object Object]]
    [0]: {...}
    [1]: {...}
    [prototype]: []
?filters[0]
{...}
    [prototype]: {...}
    FilterName: "Genre"
    FilterValue: "Animation"

Answer 1

1. Change your controller signature to

   public JsonResult GetMultipleShowDetailsByFilter(FilterCriterion[] filters, int pageNumber, int itemsPerPage)
   

2. use following POST structure:

   filters[0].FilterName = 'aaa'
   filters[0].FilterValue = 'bbbb'
   filters[1].FilterName = 'ccc'
   filters[1].FilterValue = 'ddd'
   ...
   filters[n].FilterName = 'xxx'
   filters[n].FilterValue = 'yyy'
   

   (you can easily do that with jQuery)

One caveat: your index numbering should be contiguous, i.e. have no gaps.

Update to topic starter’s update: you have to be very careful with POST structure. Nested JavaScript objects won’t do. Try using this one:

function filterChanged() {
    var activeFilters = $(':checked');
    var data = {
        'pageNumber': 1,
        'itemsPerPage': 10
    }
    $.each(activeFilters, function (i, val) {
        data['filters[' + i + '].FilterName'] = $(val).attr('data-filter-type');
        data['filters[' + i + '].FilterValue'] = $(val).attr('data-filter-value');
    });

    $.getJSON('../DatabaseApi/GetMultipleShowDetailsByFilter',
        data,
        function(data) {
            fill(data);
        });
}