Kendo Core AutoComplete下拉框仅显示undefined问题求助

在ASP.NET Core 6 MVC项目中使用Kendo Core AutoComplete组件，按官方文档配置后，控制器返回数据但下拉框显示undefined，核心原因是JSON字段命名不匹配，以下是具体解决方法：

原因分析 #

ASP.NET Core默认使用System.Text.Json序列化器，会自动将C#类的PascalCase属性（如Name）转换为JSON的camelCase格式（如name）。而你的AutoComplete配置中DataTextField("Name")指定的是PascalCase字段名，与返回的JSON字段不匹配，导致组件无法读取正确值，显示undefined。

解决方案1：修改DataTextField匹配驼峰字段名 #

直接将AutoComplete的DataTextField改为序列化后的驼峰字段名：

<div class="col-sm-4">
    @(Html.Kendo().AutoComplete()
        .Name("market")
        .DataTextField("name") <!-- 修改为小写name -->
        .Filter("contains")
        .DataSource(source =>
            source.Read(read =>
                read.Action("GetItems", "Home")
            )
            .ServerFiltering(true)
        )
    )
</div>

解决方案2：配置Json序列化保持PascalCase #

如果希望保留C#属性的PascalCase命名风格，可在Program.cs中修改Json序列化配置，让返回的JSON字段保持与C#属性一致：

builder.Services.AddControllersWithViews()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.PropertyNamingPolicy = null; // 关闭自动驼峰转换
    });

修改后控制器返回的JSON字段会是Name，与AutoComplete的DataTextField("Name")匹配，即可正常显示内容。

额外排查点 #

如果以上方法无效，可检查：

• 通过浏览器开发者工具的Network面板，确认GetItems接口返回的JSON数据格式是否正确。
• 确保Kendo UI的脚本、样式文件已正确引入，无加载失败情况。

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