ASP.Net Core MVC中JQuery读取JSON生成表格行无返回问题排查

问题描述 #

当下拉框选中值时，无法生成表格行；将代码中的data.notices改为data后，返回结果显示“undefined”。

原代码 #

视图代码：

<script>
$(document).ready(function () {
    $('select').formSelect();
});

function onManagerChange() {
    var id = $("#Managers").val();
    var rows = "";

    $.ajax({
        type: "GET",
        url: "@Url.Action("GetFilteredReports", "FinalReports")",
        dataType: "application/json",
        data: { "id": id },
        success: function (data) {
            $("#Reports").html("");
            $.each(data.notices, function (id, report) {
                rows += `
                <tr> +
                <td> + ${report.ReportName} + </td> +
                <td> + ${report.ReportState} + </td> +
                <td> + <a class="btn-small waves-effect waves-light" asp-action="Download" asp-route-id="report.ID">Download</a> + </td> +
                </tr>`
            });
            $("#Reports").html(rows);
        }
    });
}
</script>

控制器代码：

public IActionResult GetFilteredReports(int id)
{
    var reportsList = _context.Reports.Include(x => x.ReportManager).Where(x => x.ReportManager.ID == id).ToList();

    return Json(reportsList);
}

错误分析与修复步骤 #

1. 模板字符串语法错误
   原代码中模板字符串错误添加了+号，导致生成的HTML结构无效，变量也无法正确解析。模板字符串无需用+拼接，直接嵌入变量即可。

2. 循环对象错误
   控制器直接返回了reportsList数组的JSON，而非包含notices属性的对象，因此应直接遍历data，而非data.notices。

3. ASP.NET Tag Helper无法动态解析
   动态生成的HTML中的asp-action和asp-route-id属于服务器端Tag Helper，不会在客户端动态解析，需手动生成下载URL。可以提前用@Url.Action获取基础URL，再拼接ID参数。

修正后的视图代码 #

<script>
$(document).ready(function () {
    $('select').formSelect();
});

function onManagerChange() {
    var id = $("#Managers").val();
    var rows = "";
    // 提前获取下载动作的基础URL
    var downloadUrlBase = "@Url.Action("Download", "FinalReports")";

    $.ajax({
        type: "GET",
        url: "@Url.Action("GetFilteredReports", "FinalReports")",
        dataType: "application/json",
        data: { "id": id },
        success: function (data) {
            $("#Reports").html("");
            // 直接遍历返回的数组data
            $.each(data, function (index, report) {
                // 拼接完整的下载URL
                var downloadUrl = `${downloadUrlBase}?id=${report.ID}`;
                rows += `
                <tr>
                    <td>${report.ReportName}</td>
                    <td>${report.ReportState}</td>
                    <td><a class="btn-small waves-effect waves-light" href="${downloadUrl}">Download</a></td>
                </tr>`;
            });
            $("#Reports").html(rows);
        },
        // 增加错误回调，方便排查问题
        error: function(xhr, status, error) {
            console.error("请求出错:", error);
        }
    });
}
</script>

额外检查建议 #

• 确认下拉框的id确实是Managers，且选中时能正确获取到id值。
• 打开浏览器开发者工具的网络面板，查看GetFilteredReports请求是否成功，返回的JSON数据是否符合预期。
• 确认实体类Report的属性名（如ReportName、ReportState、ID）与前端代码中的变量名一致，避免大小写或拼写错误。

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