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

Posted 2023-05-07

【中文标题】Kendo UI - 在读取数据源时指定参数名称

【英文标题】：Kendo UI - Specify parameter name on dataSource read

【发布时间】：2013-09-26 08:58:01

【问题描述】：

使用 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)  );

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

【问题讨论】：

您是否尝试检查this 示例？在代码部分不要忘记点击 ASP.NET MVC，然后点击不同的源文件。

我没有使用具有 MVC Razor 工具的 Kendo 版本。这个例子是我开始的地方，但不幸的是它对我没有用。

【参考方案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;
                
            
        
    
);

【讨论】：

听起来你明白我在做什么，但是你发布的代码返回了这个错误。Uncaught TypeError: Cannot read property 'filters' of undefined。我现在正在尝试进行一些调试以找出原因。

尝试按照您所说的去做并记录通过数据函数传递的对象只会产生“”

我编辑了我的答案。我忘了还提到您需要在 DataSource 上启用serverFiltering，以便它将输入的文本传递给data() 函数。对此感到抱歉。

取得了一些进展，但它仍然表现得很奇怪。它尝试使用 url .. localhost:60600/search/……ld%5D=Name&filter%5Bfilters%5D%5B0%5D%5BignoreCase%5D=true&_=1379719337398

我认为还值得注意的是，您第一次发帖时是正确的。是我自己的不称职没有奏效。您的代码完美无缺，但我将操作方法​​标记为[HttpPost] 而不是[HttpGet]，因此它一直返回错误。您没有犯任何错误，您只是向我展示了完成我所要求的不是一种，而是五种方法。如果有什么事，你应该因为忍受我而获得一枚奖章。

【参考方案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 
                
            
        
    
);

【讨论】：

这也满足了我的需求。但是，我希望您能理解，CodingWithSpike 最先得到了它，因此我授予他荣誉。我没有足够的声誉来支持你的，但我会记住它并在我这样做的时候回来。非常感谢，非常感谢。

另外，这个“document.activeElement.value”的东西太棒了！谢谢！

使用 document.activeElement 似乎是如何获取输入字段本身以获取更多信息的选项，非常感谢！

【参考方案3】：

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

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

【讨论】：

很抱歉，这也不起作用。如果我知道如何检索数据以代替“价值”，我会解决它。但我不知道如何解决这个问题。

据我所知，自动完成小部件（或数据源控件）没有提供获取当前尝试传递的值的方法。我发现的唯一方法是通过特定的选择器来完成，这在我的特定情况下是不可能的。

我在问题中添加了更多内容以尝试使其更清晰。很抱歉造成混乱。

【参考方案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...