.Net MVC中DevExpress DataGrid无法加载数据的问题求助

数据老陈

2026-8-11

问题解决步骤

1. 修正控制器返回格式

你的控制器代码中，new JsonResult(Ok(result))会将OkObjectResult作为Json数据返回，导致前端拿到嵌套的结构。直接返回数据列表即可：

[HttpGet]
public JsonResult GetAllPeople()
{
    var result = context.Persons.ToList(); // 调用ToList()确保数据从数据库加载完成
    return Json(result);
}

2. 解决异步加载顺序问题

$(() => { ... })会在DOM加载完成后立即执行，此时AJAX请求还未完成，peopleList仍是未定义状态，导致DataGrid初始化时没有数据。可以通过两种方式修复：

方案一：在AJAX回调中初始化DataGrid

@section Scripts {
    <script>
        $.ajax({
            type: "GET",
            url: "/Persons/GetAllPeople",
            dataType: "json",
            success: function (peopleList) {
                $('#gridContainer').dxDataGrid({
                    dataSource: peopleList,
                    columns: ['lastName', 'firstName', 'address', 'dateOfBirth'],
                    showBorders: true,
                });
            },
            error: function (error) {
                console.log(error);
            }
        });
    </script>
}

方案二：使用DevExpress内置数据源配置（更推荐）

DevExpress DataGrid支持直接配置远程数据源，无需手动编写AJAX逻辑：

@section Scripts {
    <script>
        $(() => {
            $('#gridContainer').dxDataGrid({
                dataSource: {
                    load: function() {
                        return $.getJSON("/Persons/GetAllPeople");
                    }
                },
                columns: ['lastName', 'firstName', 'address', 'dateOfBirth'],
                showBorders: true,
            });
        });
    </script>
}