JQuery 序列化表单 - Kendo UI 复制输入

Question

我正在发布一个表单，并注意到 Kendo UI 在序列化时会与表单字段发生冲突，并在序列化对象中创建重复的字段。我想知道是否有人遇到过这个问题以及是否有解决方案。

假设我想对表单进行 JQuery AJAX 发布。

$.ajax({
    type: "POST",
    url: "/api/MyController",
    data: formData
});

我可以有一个像这样的简单表格。

<form id="myForm">
    <input type="text" name="firstName">
</form>

如果我想序列化我的表单数据(在 formData 变量中使用)，我会这样做。

var formData = $('#myForm').serializeArray();

控制台中的输出如下所示。

[Object { name="firstName",  value="John"}]

现在问题来了。 如果我使用 Kendo UI 并且从该输入中创建下拉列表或组合框，并且尝试序列化表单，则会识别另一个输入(带下划线的输入)。

[Object { name="firstName_input",  value="John"}, Object { name="firstName",  value="John"}]

如果您不熟悉，Kendo UI 使用简单的输入来创建组合框或下拉列表，并远程调用 api 获取数据。以下是组合框的创建方式。

var firstNameComboBox= $('#firstName').kendoComboBox({
    placeholder: "Select a Name",
    dataTextField: "Name",
    dataValueField: "ID",
    change: myChangeFunction,      //On change event
    dataSource: {
        type: "json",
        transport: {
            read: {
                dataType: "json",
                url: "/api/MyController/MyAction",
                data: { }
            },
        }
    }
}).data("kendoComboBox");

Answer 1

免责声明:我为 Telerik/Kendo UI 团队工作

所描述的行为是预期的。基本上，ComboBox 呈现保存所选文本的第二个输入元素。该小部件使用以下“{name}_input”格式向该输入元素添加name属性。您可能知道，当输入元素具有 name 属性时，它会变为 successful表单将发布它。

这样做有利于服务器平台在出现错误时返回相同的发布页面。这有助于服务器开发人员获取该值并将其作为 ComboBox 返回 text配置选项。

我认为这对于使用发布值的开发人员来说不会是问题，因为它应该将 POST 有效负载与模型字段/名称相匹配。