ASP.net MVC Razor-将复选框绑定到bool值 [英] ASP.net MVC Razor - binding checkboxs to bool values

问题描述

我无法弄清楚如何使选中的复选框变为"true"，而使未选中的复选框变为"false" bool值.这是我正在处理的代码示例.

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.

注意:我的put函数得到200响应，但是复选框并没有更新bool.

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

型号

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; }
        }

查看

`$('.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>

推荐答案

我通常使用EditorFor，并且可以正常工作:

I typically use an EditorFor and it just works:

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

但是，我通常也只使用bool而不是bool?作为我的复选框属性.

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

关于checked属性的注意事项-您通常只使用属性名称，如:

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 />

或者您使用checked="checked"，例如:

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

任何其他方式，例如放置checked="true"或checked="false"都不会产生您期望的结果，或者至少在所有浏览器中都不一致.这些用例通常会产生一个复选框，无论您是否想要.这是一个快速的模拟演示:

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

以及Chrome 57上的输出的屏幕截图:

And a screenshot of the output under Chrome 57:

本质上，您想使用逻辑来确定是否完全插入checked属性，而不是插入并将逻辑设置为true或false.

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.

这篇关于ASP.net MVC Razor-将复选框绑定到bool值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！