将自定义 data-* 属性添加到 Kendo UI AutoComplete 或 ComboBox答案

【问题标题】：Add custom data-* attributes to Kendo UI AutoComplete or ComboBox将自定义 data-* 属性添加到 Kendo UI AutoComplete 或 ComboBox
【发布时间】：2014-09-03 17:04:39
【问题描述】：

目前正在使用 Kendo UI AutoCompleteFor() 和 ComboBoxFor() 助手。

注意到他们生成/渲染了一堆<li>s。

如何向<li>s 添加额外的自定义data-* attributes？

这是当前的场景：

用户开始在 AutoCompleteFor 中输入内容
触发 ajax 调用以获取一些与用户已输入。
获得的结果转换为 IEnumerable<SelectListItem>。
然后将结果发送到 Json。 Json(result, JsonRequestBehavior.AllowGet)

我的目标是在每个<li> 生成行中添加一个或多个额外的data-* attribute，以便我可以在onChange() 事件中获取这些数据-*。

如何做到这一点？

此外，我知道我可以创建自己的 .Template() 并可能完成我的任务，但我很好奇是否有人知道执行此操作的不同方法，然后必须创建我自己的模板。

真诚的

【问题讨论】：

标签： kendo-ui kendo-asp.net-mvc kendo-combobox kendo-autocomplete

【解决方案1】：

好的，我找到了解决方案；如果有人感兴趣，我会在这里分享。

我没有将获得的结果转换为IEnumerable<SelectListItem>，而是将其转换为IEnumerable<CustomDTO>。

CustomDTO 类如下所示：

public class CustomDTO
{
     public int Value { get; set; }
     public string Text { get; set; }
     public int Age { get; set; }
     //Add whatever more properties you think you’ll need.
}

然后在我的控制器中执行以下操作：

var result = _myService.GetData().ToList();
return Json(result, JsonRequestBehavior.AllowGet);

其中GetData() 返回IEnumerable<CustomDTO>。

在我的视图中，我有一个 AutoCompleteFor() 控件，我将客户端绑定到该控件 .Events(x => x.Select("onSelect") 事件处理程序。

处理程序的定义如下：

function onSelect(e)
{
    if (e.item == null) return;
    var dataItem = this.dataItem(e.item.index());
    var valueAttribute = dataItem.Value;
    var textAttribute = dataItem.Text;
    var ageAttribute = dataItem.Age;    //This is how I get my additional value
    //...code...
}

就是这样。

【讨论】：