ASP.NET Core MVC中jQuery Ajax模态框无法加载数据弹出问题

问题根源 #

你的控制器返回的是Study对象的数组集合，但前端success回调里直接尝试访问res.Id和res.Name——这是错误的，因为res是数组而非单个Study对象。另外，Ajax请求未明确指定响应数据类型，可能导致返回的JSON未被正确解析为JavaScript对象。

分步解决方案 #

1. 调整模态框结构，添加表格容器 #

先确保模态框的body区域有用于展示数据的表格：

<div class="modal-body">
  <table id="studiesTable" class="table table-striped">
    <thead>
      <tr>
        <th>ID</th>
        <th>名称</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

2. 修正前端Ajax逻辑，遍历数组生成表格 #

修改test函数，处理数组数据并动态生成表格行：

test = (url, id) => { 
    $.ajax({
        type: 'GET',
        url: url,
        data: { 'id': id },
        dataType: 'json', // 明确指定响应为JSON格式，确保自动解析
        success: function (res) {
            console.log(res);
            const tableBody = $("#studiesTable tbody");
            tableBody.empty(); // 清空旧数据
            
            // 遍历数组，生成表格行
            res.forEach(study => {
                const row = `<tr>
                    <td>${study.Id}</td>
                    <td>${study.Name}</td>
                </tr>`;
                tableBody.append(row);
            });
            
            $("#formModal").find(".modal-title").html("研究列表");
            $("#formModal").modal('show');
        },
        error: function (response) {
            console.error(response);
            alert("加载数据失败");
        }
    });
};

3. 优化控制器查询（可选，提升性能） #

原控制器的子查询使用ToList()会先加载所有匹配ID到内存，改为Any()可让数据库直接执行过滤，性能更优：

[HttpGet]
public async Task<IActionResult> GetStudies(int id)
{
    var results = await _context.Studies
        .Where(t => !_context.StudyNodes
            .Any(sn => sn.NodeId == id && sn.StudyId == t.Id))
        .Select(t => new Study
        {
            Id = t.Id,
            Name = t.Name
        })
        .ToListAsync();

    return Ok(results);
}

4. 验证请求与响应 #

打开浏览器开发者工具（F12）：

• 切换到Network标签，触发请求后查看GetStudies的响应是否为合法JSON数组
• 若响应正常但前端未解析，dataType: 'json'会强制jQuery解析为对象；若有错误，Console标签会显示详细报错信息

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