Question

我有这样的表格。

<form id="myForm">
    <div>
        <ul>
            <li>
                @Html.DropDownListFor(m => m.SelectedVal, new SelectList(Model.ValLst, "Value", "Name"))
            </li>
            <li>
                @Html.TextBoxFor(m => m.Id)
            </li>
            <li>
                @Html.CheckBoxFor(m => m.IsPaid, new { @Id = "IsPaid"})
            </li>
        </ul>           
    </div>
</form>

我必须将此表单序列化如下＆amp;我正在使用序列化数组

values = $('#myForm').serializeArray();

0: Object
name: "SelectedVal"
value: "BMV"

1: Object
name: "Id"
value: "123"

2: Object
name: "IsPaid"
value: "true"

3: Object
name: "IsPaid"
value: "false"

我遇到了CheckBoxFor帮助器的问题。因为，它创建了一个隐藏的字段，其值为false＆amp;隐藏字段和隐藏字段复选框具有相同的ID。所以复选框的模型值总是为false，尽管它已被检查。即，在序列化数组上操作时，隐藏字段值会覆盖复选框值。

所以我想在序列化时忽略隐藏字段。喜欢：

values = $('#myForm').find("input[type != 'hidden']").serializeArray();

0: Object
name: "Id"
value: "123"

1: Object
name: "IsPaid"
value: "true"

但是，它不起作用，因为我没有得到下拉值。所以，想想，DropDownListFor也使用隐藏字段。任何建议，如何向控制器发送正确的复选框值。有些东西，比如忽略复选框或任何其他html助手之后的立即隐藏字段或强制隐藏字段在复选框之前渲染。

Answer 1

您需要使用$('#myForm').serialize();，而不是$('#myForm').serializeArray();。

.serializeArray()正在回发IsPaid=[true, false]，即无法绑定到boolean属性的值数组（它与覆盖复选框的隐藏输入无关），其中由于.serialize()将发布IsPaid=true&IsPaid=false，它将正确绑定到您的模型（DefaulModelBinder读取第一个值（true）并忽略任何后续的名称/值对名。

附注：@Html.DropDownListFor()不会生成隐藏的输入。 @Html.CheckBoxFor()生成的隐藏输入没有id属性，new { @Id = "IsPaid"}没有意义。帮助者已生成id

Answer 2

我错过了选择元素。它应该是

values = $('#myForm').find('input, select').not(':hidden').serializeArray();

Answer 3

Checkbox始终保持值true＆amp;隐藏的字段始终保持虚假。但是，对于选中的复选框，它的父级包含一个类＆＃34;已检查＆＃34;。因此，在序列化之前，我们可以在隐藏字段中保留所需的值。现在，让它覆盖。如果父级跨栏已经检查过＆＃39;，那么请保持“真实”状态。在相应的隐藏字段中，否则为false。

        // traverse through all the checkboxes, check class of it's parent span

        $("input[type='checkbox']").each(function () {
            // id of hidden field is same as that of the check box
            var hdnFldId = "input[type='hidden']#" + $(this).attr('id');
            if ($(this).parent().hasClass('checked'))
            {
                $(hdnFldId).val(true);
            }
            else {
                $(hdnFldId).val(false);
            }
        });
        values = $('#myForm').serializeArray();

CheckBoxFor Html helper与serializeArray的隐藏字段问题

3 个答案: