Kendo Grid中绑定集合属性实现多选编辑器的技术咨询

核心思路 #

视图模式通过CourseDescriptions显示逗号分隔的课程文本，编辑模式替换为Kendo Multiselect组件，绑定Courses集合的预选值并加载所有可选课程数据源。

具体实现步骤 #

1. 调整Grid列配置 #

修改Grid列定义，保留视图模式的客户端模板，同时为编辑模式指定自定义编辑器模板：

@(Html.Kendo().Grid<Student>()
    .Name("student-grid")
    .Columns(columns =>
    {
        columns.Bound(x => x.StudentId).Title("StudentId");
        columns.Bound(x => x.Courses)
            .ClientTemplate("#= CourseDescriptions #") // 视图模式显示逗号分隔文本
            .EditorTemplateName("CourseMultiselect"); // 指定编辑时使用的模板
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create().Text(R.Generic.AddNewRecord);
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(x => x.StudentId);
            // 为集合字段设置默认值，避免空引用
            model.Field(x => x.Courses).DefaultValue(new List<Course>());
        })
        .Read(read => read.Action("ReadStudents", "Student"))
        .Create(create => create.Action("CreateStudent", "Student"))
        .Update(update => update.Action("UpdateStudent", "Student"))
    )
)

2. 创建编辑器模板CourseMultiselect.cshtml #

在Views/Shared/EditorTemplates目录下新建该模板，渲染带预选值的Multiselect：

@model IEnumerable<Course>

@(Html.Kendo().MultiSelectFor(m => m)
    .DataValueField("CourseId") // 绑定值字段
    .DataTextField("Description") // 显示文本字段
    .Placeholder("请选择课程")
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("GetAllCourses", "Course")) // 加载所有可选课程
        .ServerFiltering(true)
    )
    .Value(Model?.Select(c => c.CourseId).ToList()) // 设置已选课程的预选值
)

3. 补充后端接口 #

需要实现两个关键接口：

• GetAllCourses：返回系统中所有可选课程的列表，供Multiselect下拉选择
• ReadStudents/CreateStudent/UpdateStudent：处理Grid的数据读写，确保后端能正确接收并绑定Student对象的Courses集合

4. 模型容错优化 #

为避免Courses为null时CourseDescriptions报错，调整属性实现：

public string CourseDescriptions {
    get {
        return Courses?.Select(x => x.Description)?.Join(", ") ?? string.Empty;
    }
}

关键注意事项 #

• 编辑器模板的模型类型必须与Grid列绑定的字段类型一致（IEnumerable<Course>）
• Multiselect的Value参数需传入已选课程的CourseId列表，才能实现编辑时的预选效果
• 后端需确保集合属性的模型绑定正常，可通过接收List<int>类型的CourseId集合，再重新构造Courses对象

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