KendoUI for MVC中如何用jQuery遍历组件容器并获取值？

嘿，这个问题我太懂了！用Kendo UI for MVC开发的时候，每个组件确实都得用它专属的API来获取值或者文本，直接用jQuery的val()有时候根本拿不到正确的内容。我给你整理了一套完整的解决方案，一步步来搞定：

核心思路 #

我们要做的就是：点击按钮后，遍历#overview下的所有列表项，识别每个项里的Kendo组件类型，然后调用对应的API来获取数据，最后把这些数据统一收集起来。

具体实现代码 #

首先给你的按钮绑定点击事件，然后逐个处理不同类型的组件：

// 假设你的按钮ID是collectDataBtn
$("#collectDataBtn").on("click", function() {
  // 用来存储所有组件数据的对象
  var collectedData = {};

  // 遍历#overview下的每个列表项
  $("#overview li").each(function() {
    var currentLi = $(this);

    // 1. 处理下拉列表（Kendo DropDownList）
    var dropdown = currentLi.find("[data-role='dropdownlist']").data("kendoDropDownList");
    if (dropdown) {
      var componentId = dropdown.element.attr("id");
      collectedData[componentId] = {
        value: dropdown.value(),
        text: dropdown.text()
      };
      return; // 如果一个li里只有一个组件，找到就跳过后续检查
    }

    // 2. 处理文本框（Kendo TextBox）
    var textbox = currentLi.find("[data-role='textbox']").data("kendoTextBox");
    if (textbox) {
      var componentId = textbox.element.attr("id");
      collectedData[componentId] = {
        value: textbox.value()
      };
      return;
    }

    // 3. 处理多选框（Kendo CheckBox）
    var checkbox = currentLi.find("[data-role='checkbox']").data("kendoCheckBox");
    if (checkbox) {
      var componentId = checkbox.element.attr("id");
      collectedData[componentId] = {
        isChecked: checkbox.checked()
      };
      return;
    }

    // 4. 处理范围滑块（Kendo RangeSlider）
    var rangeSlider = currentLi.find("[data-role='rangeslider']").data("kendoRangeSlider");
    if (rangeSlider) {
      var componentId = rangeSlider.element.attr("id");
      collectedData[componentId] = {
        rangeValues: rangeSlider.values() // 返回数组，比如[最小值, 最大值]
      };
      return;
    }
  });

  // 这里可以对收集到的数据做后续处理，比如打印到控制台或者提交到后端
  console.log("收集到的所有组件数据：", collectedData);
});

关键细节说明 #

• 用data-role属性识别组件：Kendo初始化组件后，会自动给元素加上对应的data-role属性（比如下拉列表是data-role="dropdownlist"），用这个来判断组件类型比直接找类名更可靠。
• 每个组件的专属API：
  • DropDownList：value()获取选中值，text()获取选中项的显示文本
  • TextBox：value()获取输入的文本内容
  • CheckBox：checked()获取选中状态（返回true/false）
  • RangeSlider：values()获取滑块的范围值（返回一个包含最小和最大值的数组）
• 组件标识：我这里用组件的ID作为存储数据的键，如果你是用MVC助手生成的组件（比如@Html.Kendo().DropDownList().Name("UserType")），生成的元素ID就是你设置的Name值，完全适配。

额外提示 #

• 确保代码放在$(document).ready()里，或者等所有Kendo组件初始化完成后再执行，不然会拿不到data("kendoXXX")对象。
• 如果一个列表项里有多个组件，把代码里的return去掉就行，这样会继续检查当前li里的其他组件。

内容的提问来源于stack exchange，提问作者Yanayaya