Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Asp.Net MVC checkboxes special case #35

Open
michael-lang opened this issue Feb 21, 2012 · 2 comments
Open

Asp.Net MVC checkboxes special case #35

michael-lang opened this issue Feb 21, 2012 · 2 comments

Comments

@michael-lang
Copy link

When an Asp.net MVC 3 view helper spits out a checkbox it puts a checkbox and a hidden text field in the html. This is to ensure that a value is passed back in a post even when the checkbox is not checked. The model binder on the server needs all the properties to have a value to ensure the proper model is bound, and thus the proper controller action method is invoked.

<input type="checkbox" value="true" name="IsFavorite" id="IsFavorite" />
<input type="hidden" value="false" name="IsFavorite"/>

So now the name/value pairs that are generated contain two values for the check box when it is checked, true and false. And false is the second value. So later in processNameValues the last value in wins.

A possible solution is to filter out duplicate values for check boxes. here is the relevant jQuery code I came up with. This generates my name/value list that I then pass into a modified version of your processNameValues function that takes in a json object to update instead of creating a new one. See issue #34.

function updateJson(form, json) {
    var arr = $(form).find(":input, :radio")
        .filter(function () {
            return this.name && !this.disabled &&
                (this.checked || /select|textarea/i.test(this.nodeName) ||
                    /text|hidden|password|search/i.test(this.type));
        })
        .map(function (i, elem) {
            var val = jQuery(this).val();
            return val == null ?
                null : { name: elem.name, value: val }
        }).get();
     $(form).find("input:checkbox")
        .filter(function () {
            return this.name;
        })
        .each(function(index, elem) {
            arr = $.grep(arr, function(item, index){
                return elem.name != item.name;
            });
            arr.push({ name: elem.name, value: (elem.checked ? "true" : "false") });
        });
    return processNameValues(json, arr, true, false);
}
@hahmed
Copy link

hahmed commented Feb 26, 2012

+1 @michael-lang - this is exactly the issue I am facing with .net, I am also looking at a way to igonore hidden fields

@michael-lang
Copy link
Author

ha25gmail,
to ignore hidden fields, take my code and just remove the 'hidden' portion in the test function call.

    .filter(function () {
        return this.name && !this.disabled &&
            (this.checked || /select|textarea/i.test(this.nodeName) ||
                /text|password|search/i.test(this.type));
    })

You can find my current experimental code here:
http://jsfiddle.net/mjlang/h33DV/8/

This jsFiddle does not 'run' because I haven't done the faking of the ajax calls using the jsFiddle convention yet, but the javascript code does work in my real project.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants