Question

For submitting the form data to the server from the AJAX call to bind Telerik MVC grid, we can set e.data in OnDataBinding event to a anonymous JavaScript object

<script type="text/javascript">
function Grid_onDataBinding(e) {
     var categoryValue = "Beverages";
     var priceValue = 3.14;

     // pass additional values by setting the "data" field of the event argument
     e.data = { 
        // the key ("category") specifies the variable name of the action method which will contain the specified value
        category: categoryValue,
        price: priceValue
     };
}
</script>

To facilitate the model binding for Boolean, ASP.NET MVC generates checkboxes along with a hidden text field with the same name

<input name="myCheckBox" class="check-box" id="myCheckBox" type="checkbox" CHECKED="checked" value="true"/>
<input name="myCheckBox" type="hidden" value="false"/>

and when these are submitted the data submitted is

myCheckBox=true&MyCheckBox=false – when the checkbox is checked

myCheckBox=false – when the checkbox is not checked

For pages where there is no checkbox, the post data can be easily obtained by

e.data = form.serializeObject()

where serializeObject creates that object by looping thru all the form fields. How to construct that object in case of forms when there are checkboxes as described above? Basically how can a name-value pair list be represented in the object form when the names are allowed to be duplicate?

e.data = { 
    textBox1: "some value1",
    myCheckBox: true //,
    //myCheckBox: false // ???
};

The implementation of serializeObject creates an array for such form elements and those are submitted as myCheckBox[]=true&myCheckBox[]=false which breaks the model binding on the server side.

Answer 1

You can select specific form subelements to serialize, rather than just serializing the entire form. This allows you to filter out the ones you don’t want:

$('form input:not([type=hidden])').serializeObject();

Edit: Per @amit_g’s comment, you want the checkbox when it’s checked or the hidden element when it’s not. This requires a more complex filter than the :not selector:

$('form input')
    .filter(function() {
        if ($(this).attr('type') == 'hidden') {
            // filter out those with checked checkboxes
            var name = $(this).attr('name');
            return !$('form input[type=checkbox][name=' + name +']')
                .prop('checked');
        } else {
            // include all other input
            return true;
        }
    })
    .serializeObject();

See the working jsFiddle here: http://jsfiddle.net/nrabinowitz/nzmg7/4/