Kendo UI - 在读取数据源时指定参数名称

Question

使用 Kendo UI，我正在使用自动完成框来尝试从我的服务器检索数据。它正在使用具有以下签名的 ASP.NET MVC 控制器。

public ActionResult aspect(string term){
   // ...
}

这意味着请求的url中需要有正确的参数。现在我遇到的问题是我无法在 dataSource 机制中找到一种方法来指定它。我已经阅读了几十次关于parameterMap 的文档，这对我来说绝对没有任何意义。

由于所讨论的页面实际上在任何时候都有 10-15 个自动完成文本框，每个文本框都使用动态标识动态创建。

我目前使用的代码如下；

$(".autocomplete").kendoAutoComplete({
    dataTextField: "Name",
    dataSource: {
        type: "json",
        transport: {
            read: {
                url: "/search/aspect"
            }
        }
    }
});

那么我能做些什么来告诉它如何命名它传递的参数吗？

为了更清楚我想要做什么，如果我在 jQuery 中这样做，我会使用 ...

$.ajax({ url: '/search/aspects', data: { term: (insert the data here) } });

但是由于所有这些工作的方式，没有设置“选择器”来获取自动完成输入，所以我无法从输入表单元素中检索它的值。

Answer 1

首先，通过设置此选项启用服务器端过滤：

dataSource: {
    serverFiltering: true,

然后将该值作为参数之一传递给transport.parameterMap 函数。

如果您要像这样记录传入参数映射函数的对象：

$(".autocomplete").kendoAutoComplete({
    dataTextField: "Name",
    dataSource: {
        serverFiltering: true,
        type: "json",
        transport: {
            read: {
                url: "/search/aspect"
            },
            parameterMap: function (data, action) {
                console.log(data);
            }
        }
    }
});

然后你会得到一个看起来像这样的对象：

{
    "filter":{
        "logic":"and",
        "filters":[
            {
                "value":"something",
                "operator":"contains",
                "field":"Name",
                "ignoreCase":true
            }
        ]
    }
}

因此，您可以使用它来获取输入到“自动完成”框中的值：

$(".autocomplete").kendoAutoComplete({
    dataTextField: "Name",
    dataSource: {
        serverFiltering: true,
        type: "json",
        transport: {
            read: {
                url: "/search/aspect"
            },
            parameterMap: function (data, action) {
                if(action === "read") {
                    return {
                        term: data.filter.filters[0].value
                    };
                } else {
                    return data;
                }
            }
        }
    }
});

Answer 2

我认为对DataSource 和AutoComplete 之间的关系存在误解。 AutoComplete 具有 input 并使用 DataSource 检索数据：input 不属于 AutoComplete，因此您无法从来自DataSource 的方法（如transport.read.data 或transport.parameterMap）。

您需要唯一标识哪个元素具有输入及其包含的值。

我的建议是使用document.activeElement.value 获取价值。由于您正在输入它，因此具有焦点的元素应该是您正在使用的元素。

代码是：

$(".autocomplete").kendoAutoComplete({
    dataTextField: "Name",
    dataSource: {
        type: "json",
        transport: {
            read: {
                url: "/search/aspect",
            },
            parameterMap : function (data, type) {
                if (type === "read") {
                    return { term : document.activeElement.value }
                }
            }
        }
    }
})

或者，您可以启用serverFiltering，然后Kendo UI 将input 字段与过滤条件相关联。代码是：

$(".autocomplete").kendoAutoComplete({
    dataTextField: "Name",
    dataSource   : {
        serverFiltering: true,
        type           : "json",
        transport      : {
            read        : {
                url : "/search/aspect"
            },
            parameterMap: function (data, type) {
                if (type === "read") {
                    return { term : data.filter.filters[0].value }
                }
            }
        }
    }
});

Answer 3

我对你想要做什么有点困惑。如果您只是想将字符串术语传递给控制器​​，您可以指定数据：

$(".autocomplete").kendoAutoComplete({
    dataTextField: "Name",
    dataSource: {
        type: "json",
        transport: {
            read: {
                url: "/search/aspect",
                data: { term: "value" }
            }
        }
    }
})

Answer 4

感谢您的澄清和帮助 OnaBai。这是我经过数小时的挫折后得到的代码！

$("#contractsSearchField").kendoComboBox({
    dataTextField: "name",
    dataValueField: "id",
    autoBind: false,
    placeholder:'select...',
    filter: "contains",// a filter must be present for the datasources serverFiltering argument to work properly.
    minLength: 3,
    dataSource: new kendo.data.DataSource({ 
        serverFiltering: true,//We must turn on serverFiltering and sorting, otherwise, the combobox only works once and will not change it's values.
        serverSorting: true,
        group: { field: "searchtype" },
        transport: {
            read: {
                url: "contract.cfc?method=getContractForDropdown",
                // We are not passing the data here like we do in the autosuggest. The combobox is a different type of an animal.
                dataType: "json",  
                contentType: "application/json; charset=utf-8", // Note: when posting json via the request body to a coldfusion page, we must use this content type or we will get a 'IllegalArgumentException' on the ColdFusion processing page.                 
                type: "GET"
            },//read
            // Pass the search term that was typed in by the user. This works because when the user types into the input box, it becomes that active element in the form.
            parameterMap : function (data, type) {
                if (type === "read") {
                    return { searchTerm : document.activeElement.value }
                    //return { searchTerm: data.filter.filters[0].value }
                }
            }//parameterMap
        }//transport
    })//dataSource
}); //...kendoComboBox...