asp.net-mvc - Kendo UI - 在读取的数据源上指定参数名称

Question

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

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 函数中。

如果您要记录传入到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;
                }
            }
        }
    }
});