具有与 JavaScript 对象重复名称的名称-值对列表答案

【问题标题】：Name-value pair list with duplicate names to JavaScript object具有与 JavaScript 对象重复名称的名称-值对列表
【发布时间】：2011-09-23 20:35:12
【问题描述】：

为了通过 AJAX 调用向服务器提交表单数据以绑定 Telerik MVC 网格，我们可以将 OnDataBinding 事件中的 e.data 设置为匿名 JavaScript 对象

<script type="text/javascript">
function Grid_onDataBinding(e) {
     var categoryValue = "Beverages";
     var priceValue = 3.14;

     // pass additional values by setting the "data" field of the event argument
     e.data = { 
        // the key ("category") specifies the variable name of the action method which will contain the specified value
        category: categoryValue,
        price: priceValue
     };
}
</script>

为了方便布尔值的模型绑定，ASP.NET MVC 会生成复选框以及同名的隐藏文本字段

<input name="myCheckBox" class="check-box" id="myCheckBox" type="checkbox" CHECKED="checked" value="true"/>
<input name="myCheckBox" type="hidden" value="false"/>

当这些被提交时，提交的数据是

myCheckBox=true&MyCheckBox=false - 当复选框被选中时

myCheckBox=false - 当复选框未被选中时

对于没有复选框的页面，可以通过以下方式轻松获取帖子数据

e.data = form.serializeObject()

serializeObject 通过循环遍历所有表单字段来创建该对象。当存在上述复选框时，如何在表单的情况下构造该对象？基本上在允许名称重复的情况下，如何以对象形式表示名称-值对列表？

e.data = { 
    textBox1: "some value1",
    myCheckBox: true //,
    //myCheckBox: false // ???
};

serializeObject 的实现为此类表单元素创建了一个数组，并将这些元素作为 myCheckBox[]=true&myCheckBox[]=false 提交，这会破坏服务器端的模型绑定。

【问题讨论】：

标签： javascript asp.net-mvc-3 telerik telerik-grid

【解决方案1】：

您可以选择特定的表单子元素进行序列化，而不仅仅是序列化整个表单。这允许您过滤掉您不想要的：

$('form input:not([type=hidden])').serializeObject();

编辑：根据@amit_g 的评论，您希望复选框被选中或隐藏元素未被选中。这需要比:not 选择器更复杂的过滤器：

$('form input')
    .filter(function() {
        if ($(this).attr('type') == 'hidden') {
            // filter out those with checked checkboxes
            var name = $(this).attr('name');
            return !$('form input[type=checkbox][name=' + name +']')
                .prop('checked');
        } else {
            // include all other input
            return true;
        }
    })
    .serializeObject();

在此处查看工作的 jsFiddle：http://jsfiddle.net/nrabinowitz/nzmg7/4/

【讨论】：

当然，但这打破了原因，MVC 框架将这些字段放在开头。浏览器不会提交那些未被选中的复选框，即当这些隐藏字段被框架用于模型绑定时。

【解决方案2】：

serializeObject 在内部使用serializeArray，而serializeArray 仅序列化那些将实际提交的元素。因此，使用以下代码，我禁用了与复选框对应的隐藏字段，并添加了一个更改事件来切换每个隐藏输入的禁用状态。由于输入被禁用，它们不会被序列化。

.serializeArray() 方法使用标准 W3C 规则成功的控制以确定它应该包括哪些元素；在特别是该元素不能被禁用，并且必须包含一个名称属性。由于表单没有被序列化，因此没有提交按钮值被序列化使用按钮提交。来自文件选择元素的数据不是序列化。

$('form.form-class :checkbox').change(function () {
    enableDisableCorrespondingHiddenField($(this));
});

$('form.form-class :checkbox').each(function () {
    enableDisableCorrespondingHiddenField($(this));
});

enableDisableCorrespondingHiddenField(checkbox) {
    $(":hidden[name='" + checkbox.attr("name") + "']", checkbox.parent()).attr("disabled", checkbox.attr("checked"));
}

【讨论】：