使用Razor Page时Kendo Grid无法绑定数据的问题求助

核心问题分析 #

你的代码存在两个关键问题导致Grid无法渲染数据：

1. 数据类型不匹配（编译错误） #

MyModel里的Age是decimal类型，但Controller初始化数据时给它赋了字符串值（比如Age= "32"），这会直接导致编译失败，接口根本无法正常返回数据（你说浏览器调试显示接口返回JSON，大概率是代码笔误，实际应该用数字赋值）。

2. Kendo Grid Ajax数据源的格式要求 #

Kendo Grid的Ajax数据源默认期望接收包装后的JSON结构（包含Data字段存放数据数组、Total字段存放总条数），而你直接返回了原始数据数组，Grid无法识别；或者可以显式关闭服务器端操作，让Grid直接处理数组。

修复步骤 #

步骤1：修复Controller中的数据类型错误 #

把Controller里Age的赋值改成数字类型：

[HttpGet]
public IActionResult GetData() {
    List<MyModel> data = new()
    {
        new() { Name= "testName1", Address= "Address 1", Age= 32}, // 去掉引号，用数字
        new() { Name= "testName2", Address= "Address 2", Age= 12 },
        new() { Name= "testName3", Address= "Address 3", Age= 34 },
    };
    // 方案1：返回Kendo要求的包装格式（推荐，支持后续分页/过滤扩展）
    return Json(new { Data = data, Total = data.Count });
    // 方案2：如果不需要分页/过滤，直接返回数组，但要在Grid配置中关闭ServerOperation
    // return Json(data);
}

步骤2：调整Grid的DataSource配置 #

如果用方案1（返回包装格式），保持现有DataSource配置即可；如果用方案2（直接返回数组），需要添加ServerOperation(false)：

.DataSource(dataSource => dataSource
    .Ajax()
    .ServerOperation(false) // 关闭服务器端操作，直接处理客户端数组
    .Read(read => read.Action("GetData", "MyData"))
)

步骤3：移除冗余配置（可选） #

Grid的DataSource中Model配置可以省略，因为已经指定了泛型MyModel，Kendo会自动映射属性：

// 删掉这段冗余代码
.Model(model =>
{
    model.Field(c => c.Name);
    model.Field(c => c.Address);
    model.Field(c => c.Age);
})

步骤4：验证路由与页面访问 #

确保你访问的是/MyData/Index，因为路由默认规则是{controller}/{action}，如果访问Home/Index，Grid的Read请求会指向/Home/GetData，而你的GetData接口在MyDataController中。

完整修复后的代码示例 #

修复后的Controller #

namespace Mynamespace.Controllers
{
    public class MyDataController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
        [HttpGet]
        public IActionResult GetData() {
            List<MyModel> data = new()
            {
                new() { Name= "testName1", Address= "Address 1", Age= 32},
                new() { Name= "testName2", Address= "Address 2", Age= 12 },
                new() { Name= "testName3", Address= "Address 3", Age= 34 },
            };
            return Json(new { Data = data, Total = data.Count });
        }
    }
}

修复后的Razor页面 #

@addTagHelper *, Kendo.Mvc

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>MyTitle</title>
    <link href="https://kendo.cdn.telerik.com/2023.1.301/styles/kendo.default-v2.min.css" rel="stylesheet" />
    <script src="https://kendo.cdn.telerik.com/2023.1.301/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.1.301/js/kendo.all.min.js"></script>
</head>
<body>
    <div>
        @(Html.Kendo().Grid<Mynamespace.Models.MyModel>()
            .Name("MyKendoGrid")
            .Columns(columns =>
            {
                columns.Bound(c => c.Name).Title("Full Name");
                columns.Bound(c => c.Address).Title("Address");
                columns.Bound(c => c.Age).Title("Age");
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("GetData", "MyData"))
            )
            .HtmlAttributes(new { style = "height: 550px;" })
        )
    </div>
</body>
</html>

额外检查点 #

• 打开浏览器控制台，查看是否有JavaScript错误（比如Kendo脚本加载失败、数据解析错误）
• 确认GetData接口返回的JSON格式正确，没有语法错误
• 验证Grid的Read请求URL是否正确（可以在Network面板中查看请求地址）

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