ASP.net MVC Razor - 绑定复选框到bool值

时间:2017-04-21 18:07:54

标签: asp.net asp.net-mvc asp.net-mvc-4 razor boolean

我无法弄清楚如何让选中的复选框变为“true”而未选中的复选框变为“false”bool值。以下是我正在处理的代码示例。

注意:我的put函数获得200响应,但复选框只是没有更新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>

1 个答案:

答案 0 :(得分:0)

我通常使用EditorFor,它只是起作用:

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

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

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

<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"放在一起都不会产生您期望的结果,或者至少在所有浏览器中都不一致。无论您是否想要这些用例,通常会产生这些用例。这是一个快速模拟以证明:

&#13;
&#13;
<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
&#13;
&#13;
&#13;

Chrome 57下输出的屏幕截图:

Screenshot

基本上,您希望使用逻辑来确定是否完全插入checked属性,而不是插入它并将逻辑设置为true或false。