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

Kendo UI - Specify parameter name on dataSource read

提问by Ciel

With Kendo UI, I am using an autocomplete box to try and retrieve data from my server. It is hitting an ASP.NET MVCcontroller with the following signature.

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

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

This means that the request needs to have the correct parameter in the url. Now the issue I am running into is that I cannot discover a way to specify this in the dataSourcemechanics. I have read the documentation on parameterMapdozens of times and it makes absolutely no sense to me in any way.

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

This is complicated further by the fact that the page in question actually has 10-15 autocompletetext boxes at any one time, each dynamically created with dynamic identity.

由于有问题的页面实际上在任何时候都有 10-15 个自动完成文本框，每个文本框都使用动态标识动态创建，这一事实使情况变得更加复杂。

The code I am using so far is as follows;

到目前为止，我使用的代码如下；

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

So is there anything I can do to tell it how to name the parameter it passes?

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

To make it more clear what I am trying to do, if I were doing this in jQuery, I would use ...

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

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

But because of the way all of this works, there is no set "selector" to get the autocomplete input, so I cannot retrieve its value from the input form element.

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

回答by CodingWithSpike

First, enable server-side filtering by setting this option:

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

dataSource: {
    serverFiltering: true,

Then the value is passed as one of the parameters into the transport.parameterMapfunction.

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

If you were to log the object passed in to the parameterMap function like this:

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

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

then you would get an object that looks like this:

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

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

So you can use this to get the value entered into the AutoComplete box by doing:

因此，您可以通过执行以下操作来使用它来获取输入到 AutoComplete 框中的值：

$(".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;
                }
            }
        }
    }
});

回答by OnaBai

I think that there is a misunderstanding about the relation between DataSourceand AutoComplete. AutoCompletehas the inputand uses a DataSourcefor retrieving the data: the inputdoes not belong to the AutoCompleteand as consequence you cannot get the inputthat is using a DataSourcefrom a method that is from the DataSource(as transport.read.dataor transport.parameterMap).

我认为有一个约之间的关系的误解DataSource和AutoComplete。AutoComplete具有input并使用 aDataSource来检索数据：input不属于 ，AutoComplete因此您无法从(as或)的方法中获取input使用 a 的。DataSourceDataSourcetransport.read.datatransport.parameterMap

You need to unique identify which element has the input and the value that it contains.

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

What I do propose is getting the value using document.activeElement.value. Since you are typing it, the element that has the focus should be the element that you are using.

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

The code would be:

代码将是：

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

Alternatively, you can enable serverFilteringand then Kendo UI links the inputfield with the filtering condition. The code would be:

或者，您可以启用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 }
                }
            }
        }
    }
});

回答by ramsey_tm

I'm a little confused as to what you're wanting to do. If you are just trying to pass the string term to the controller you can specify the data:

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

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

回答by Gregory Alexander

Thanks for the clarification and help OnaBai. Here is the code that I got working after hours of frustration!

感谢您的澄清和帮助 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...