Issue with assigning checkbox int array values to variable

Question

I am trying to implement a filter for my search results.

It is a checkbox which allow user to select one of more options. The issue I am having is that the model does not work properly when more than one option is selected.

My hunch is that the issue is what is being passed via the viewModel If one value is selected fiddler shows me that beds=1 is passed whereas when multiple values of checkbox are selected then beds[]=1&beds[]=2 is passed. Is it because of the brackets [] that the controller is not able to bind it.

More details below

The view is as follows:

   <div>
    <input type="checkbox" name="beds" id="beds_1" value="1"  /><label for="beds_1">1</label>
    <input type="checkbox" name="beds" id="beds_2" value="2"  /><label for="beds_2">2</label>
    <input type="checkbox" name="beds" id="beds_3" value="3"  /><label for="beds_3">3</label>
    <input type="checkbox" name="beds" id="beds_4" value="4"  /><label for="beds_4">4</label>
    <input type="checkbox" name="beds" id="beds_5" value="5"  /><label for="beds_5">5+</label>
    </div>

This is part of a viewModel which is as follows:

public class SearchFormViewModel 
{
   ...
   public int[] beds { get; set; }
}

When the user hits submit - it goes to the search controller via ajax

  private IEnumerable<Property> ProcessPropertySearch(SearchFormViewModel viewModelInp, int? page = null, int? ps = null) 
{
    var searchQuery = new SearchParameters {
        ...
        BedroomsCounts = viewModelInp.beds ?? new int[0],
        ...             
};

Now, I have tried to debug this.

If I don't choose any filter for bed then viewModelInp.beds = null & BedroomCounts is set to int[0]. If I choose one value then viewModelInp.beds = choosen-value & BedroomCounts is set to int[choosen-value] If I choose multiple value then for some reason viewModelInp.beds is flowing in the controller as null.

I have checked using fiddler as well. For the case, when I choosse multiple values the fiddler webform view shows the following:

...
beds[]=1
beds[]=2
...

I am not sure why viewModelInp.beds = null when multiple values are choosen.

I have used jquery bbq to help bookmark my url.

if I directly write the url for a multiple selection case, i.e. www.domain.com/search#beds[]=1&beds[]=2 (or,www.domain.com/search#beds=1&beds=2) - then the right checkboxes are shown as 'checked'. However, the search still ignores it.

Any help would be grateful! Thanks

--- UPDATE AS ASKED

I am using Jquery BBQ. and the ajax is

$.post('/search/getproperties', $.param(model), function (response) {
 // show properties returned
}

The $.param(model) in the above case is equal to beds[]=1&beds[]=2

Answer 1

As expected, the issue was due to [] being used in the post values due to the way $.param in Jquery BBQ plugin works.

I am not sure if there is a better way to do it but I basically removed the [] from the $.param(model) before posting the values and it worked

so,

var postValues = $.param(model).replace(/\%5B\%5D/g,'')
$.post('/search/getproperties', postValues, function (response) {
 // show properties returned
}

Please let me know if you guys feel there is a better way. Thank you!

--- UPDATE AS PER ED's Comments

$.post('/search/getproperties', $.param(model, true), function (response) {
     // show properties returned
    }

Answer 2

I don't think the model binder likes the format it's receiving the data in.

You said: The $.param(model) in the above case is equal to beds[]=1&beds[]=2

The request body should actually be: beds=1&beds=2 less the []