.NET 6 MVC Kendo Grid内联编辑模式下如何编写下拉列表自定义验证规则

一、前端自定义验证规则实现 #

Kendo UI的Validator组件支持扩展自定义验证规则，你可以针对Grid编辑模板中的下拉列表添加专属验证逻辑：

1. 注册自定义验证规则
   在页面的<script>标签中添加以下代码，定义验证规则和提示信息：

$(document).ready(function() {
    // 自定义下拉列表验证规则
    kendo.ui.validator.rules.validDropdown = function(input) {
        // 匹配目标下拉列表的name属性（替换成你的下拉列表name）
        if (input.is("[name='CategoryId']")) {
            // 验证逻辑：排除默认无效值（比如0或空字符串）
            return input.val() !== "0" && input.val() !== "";
        }
        // 非目标控件直接通过验证
        return true;
    };

    // 设置验证失败提示文本
    kendo.ui.validator.messages.validDropdown = "请选择有效的选项";
});

2. 在下拉列表编辑模板中启用验证
   在你的下拉列表EditorTemplate（比如Views/Shared/EditorTemplates/CategoryDropdown.cshtml）中，通过HtmlAttributes关联自定义验证规则：

@model int?

@(Html.Kendo().DropDownListFor(m => m)
    .Name("CategoryId")
    .DataValueField("Id")
    .DataTextField("Name")
    .OptionLabel("请选择...")
    .BindTo(ViewBag.CategoryList)
    // 启用自定义验证规则
    .HtmlAttributes(new { data_validDropdown = "true" })
)

二、Grid与后端验证配合 #

1. Grid配置中启用验证
   确保Grid的数据源模型配置中开启字段验证，同时编辑模式支持验证触发：

@(Html.Kendo().Grid<YourBusinessModel>()
    .Name("DataGrid")
    .Columns(cols => {
        cols.Bound(m => m.CategoryId).EditorTemplateName("CategoryDropdown").Title("分类");
        // 其他列配置...
    })
    .Editable(editable => editable.Mode(GridEditMode.Popup)) // 或InLine/InCell模式
    .DataSource(ds => ds
        .Ajax()
        .Model(model => {
            model.Id(m => m.Id);
            // 配置模型字段的基础验证（配合后端）
            model.Field(m => m.CategoryId).Validation(v => v.Required(true));
        })
        .Create(c => c.Action("Create", "YourController"))
        .Update(u => u.Action("Update", "YourController"))
    )
)

2. 后端模型验证
   在你的业务模型类中添加验证特性，确保后端接口也能拦截无效提交：

public class YourBusinessModel
{
    public int Id { get; set; }

    [Required(ErrorMessage = "分类为必填项")]
    [Range(1, int.MaxValue, ErrorMessage = "请选择有效的分类")]
    public int CategoryId { get; set; }

    // 其他属性...
}

参考资料 #

• Kendo UI for jQuery 官方文档：Grid 编辑验证、Validator 自定义规则扩展
• Kendo UI for ASP.NET MVC 官方文档：Grid 数据源验证配置、下拉列表编辑模板使用
• .NET 6 MVC 官方文档：模型验证基础

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