ASP.net MVC Razor - binding checkboxs to bool values

Question

I can't figure out how to get selected checkboxes to become "true" and unselected checkboxes to become "false" bool values. Here is a sample of the code I am working on.

Note: My put function is getting a 200 response but the checkboxes just are not updating the bool.

Model

public class AccountFeatures
        { public bool? FormCopy { get; set; }
            public bool? FormRename { get; set; }
            public bool? FormTransfer { get; set; }
            public bool? FormDelete { get; set; }
            public bool? FormEdit { get; set; }
            public bool? FormComplete { get; set; }
        }

View

`$('.ui.form.accountfeatures').form({
            on: 'blur',
            inline: true,
            onSuccess: function () {
                $('#features').dimmer('show');
                $.ajax({
                    method: 'PUT',
                    data: { FormRename: $("#FormRename").val() ? true : false,
                        FormTransfer: $("#FormTransfer").val() ? true : false,
                        FormDelete: $("#FormDelete").val() ? true : false,
                        FormEdit: $("#FormEdit").val() ? true : false,
                        FormComplete: $("#FormComplete").val() ? true : false}

HTML

<tr>
                    <td>Form Copy</td>
                    <td class="center aligned">
                        <input type="checkbox" name="FormCopy" id="FormCopy" value="False" checked="@Model.Account.Features.FormCopy">
                    </td>
                </tr>
                <tr>
                    <td>Form Rename</td>
                    <td class="center aligned">
                        <input type="checkbox" name="FormRename" id="FormRename" value="FormRename" checked="@Model.Account.Features.FormRename">
                    </td>
                </tr>
                <tr>
                    <td>Form Transfer</td>
                    <td class="center aligned">
                        <input type="checkbox" name="FormTransfer" id="FormTransfer" value="FormTransfer" checked="@Model.Account.Features.FormTransfer">
                    </td>
                </tr>
                <tr>
                    <td>Form Delete</td>
                    <td class="center aligned">
                        <input type="checkbox" name="FormDelete" id="FormDelete" value="FormDelete" checked="@Model.Account.Features.FormDelete">
                    </td>
                </tr>
                <tr>
                    <td>Form Edit</td>
                    <td class="center aligned">
                        <input type="checkbox" name="FormEdit" id="FormEdit" value="FormEdit" checked="@Model.Account.Features.FormEdit">
                    </td>
                </tr>
                <tr>
                    <td>Form Complete</td>
                    <td class="center aligned">
                        <input type="checkbox" name="FormComplete" id="FormComplete" value="FormComplete" checked="@Model.Account.Features.FormComplete">
                    </td>
                </tr>

You manual html is setting the checked property for every checkbox (the presence of a checked attribute means its checked) an your value attributes have not relationship to a bool (a bool can only be bound to true or false, not a string) - use the strongly typed HtmlHelper methods to generate you html — user3559349
– user3559349, Commented Apr 21, 2017 at 22:02

sleeyuen · Accepted Answer · 2017-04-21 20:59:00Z

I typically use an EditorFor and it just works:

@Html.EditorFor(m => m.CheckBoxProperty)

However, I also typically only use bool, not bool? for my checkbox properties.

Something to note regarding the checked attribute - you usually either use just the attribute name, as in:

<input type="checkbox" name="FormComplete" id="FormComplete" value="FormComplete" checked />

Or you use checked="checked", as in:

<input type="checkbox" name="FormComplete" id="FormComplete" value="FormComplete" checked="checked" />

Any other way, like putting checked="true" or checked="false" doesn't produce the outcome that you would expect, or at the very least, is not consistent amongst all browsers. What these use cases usually result in are checked boxes, regardless of whether you wanted that, or not. Here's a quick mock up to demonstrate:

<input type="checkbox" value="test" name="test1" /> Test 1<br />
<input type="checkbox" value="test" name="test2" checked /> Test 2<br />
<input type="checkbox" value="test" name="test3" checked="checked" /> Test 3<br />
<input type="checkbox" value="test" name="test4" checked="true" /> Test 4<br />
<input type="checkbox" value="test" name="test5" checked="false" /> Test 5

And a screenshot of the output under Chrome 57:

Essentially, you want to use logic to determine whether to insert the checked attribute altogether, rather than inserting it and having the logic set it to true or false.

Collectives™ on Stack Overflow

ASP.net MVC Razor - binding checkboxs to bool values

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related