Question

为了从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的形式提交，这打破了服务器端的模型绑定。

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

Answer 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"));
}

名称 - 值对列表，具有JavaScript对象的重复名称

2 个答案: