Kendo MVC DropDownList如何筛选并展示不重复的数据子集？

看你的描述，是要在MVC项目里用三个Kendo下拉框展示12个安全问题，每个下拉框固定4个完全不重复的选项对吧？而且你用的是2015.3.1111这个比较早的版本，之前的尝试没成功，我给你两个亲测可行的方案：

方案一：后端分组返回不同子集（推荐，逻辑更清晰） #

这个思路是从根源避免重复——给每个下拉框传一个分组标识，后端根据标识返回对应的4个问题区间，三个下拉分别拿不同的组。

前端代码修改 #

给每个下拉框的Read方法传递不同的group参数，比如第三个下拉框改成这样：

@(Html.Kendo().DropDownList()
    .Name("QuestionID3")
    .DataTextField("Question")
    .DataValueField("QuestionID")
    .HtmlAttributes(new { style = "width:500px", required = "required", validationMessage = "Question is required" })
    .OptionLabel("--Select--")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetQuestions", "Home")
                .Data("function() { return { group: 3 }; }"); // 第三个下拉传group=3
        })
        .ServerFiltering(false);
    }))

第一个下拉框传group:1，第二个传group:2就行。

后端Action修改 #

修改你的GetQuestions方法，接收group参数并返回对应区间的问题：

public ActionResult GetQuestions(int group)
{
    // 从数据库获取所有12个安全问题，建议先排序保证顺序稳定
    var allQuestions = db.SecurityQuestions.OrderBy(q => q.QuestionID).ToList();
    // 根据group计算起始索引，每个组取4个
    int startIndex = (group - 1) * 4;
    var questionSubset = allQuestions.Skip(startIndex).Take(4).ToList();
    return Json(questionSubset, JsonRequestBehavior.AllowGet);
}

这样三个下拉框拿到的就是完全不重叠的4个问题了。

方案二：前端绑定后截取数据（无需修改后端） #

如果后端不好改动，也可以让后端返回全部12个问题，然后每个下拉框在数据绑定完成后，截取对应的4个选项替换原数据。

前端代码修改 #

给每个下拉框添加DataBound事件，比如第三个下拉框：

@(Html.Kendo().DropDownList()
    .Name("QuestionID3")
    .DataTextField("Question")
    .DataValueField("QuestionID")
    .HtmlAttributes(new { style = "width:500px", required = "required", validationMessage = "Question is required" })
    .OptionLabel("--Select--")
    .Events(e => e.DataBound("filterThirdDropdown")) // 添加数据绑定完成事件
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetQuestions", "Home");
        })
        .ServerFiltering(false);
    }))

页面添加JS过滤函数 #

在页面的<script>标签里添加三个过滤函数，分别对应三个下拉框：

// 第一个下拉框取前4个问题
function filterFirstDropdown() {
    var dropdown = this;
    var allData = dropdown.dataSource.data();
    var filteredData = allData.slice(0, 4);
    dropdown.dataSource.data(filteredData);
}

// 第二个下拉框取第5-8个问题（数组索引4到7）
function filterSecondDropdown() {
    var dropdown = this;
    var allData = dropdown.dataSource.data();
    var filteredData = allData.slice(4, 8);
    dropdown.dataSource.data(filteredData);
}

// 第三个下拉框取第9-12个问题（数组索引8到11）
function filterThirdDropdown() {
    var dropdown = this;
    var allData = dropdown.dataSource.data();
    var filteredData = allData.slice(8, 12);
    dropdown.dataSource.data(filteredData);
}

记得给第一个和第二个下拉框分别绑定对应的过滤函数。

关于你之前的尝试失败原因 #

你之前传take:4但没生效，大概率是因为后端的GetQuestions方法没有接收并处理这个take参数，所以返回的还是全部12个问题，前端自然不会过滤。上面两个方案都能解决你的问题，选哪个看你后端是否方便修改~

备注：内容来源于stack exchange，提问作者ElijahGun