ASP.NET Core中通过AJAX与Controller实现下拉选择动态填充Index页面及JSON解析至Entity Framework生成表格的技术问询

针对你的问题，核心就是通过前端AJAX获取后端返回的JSON数据，然后动态渲染表格内容——完全不需要页面刷新，这也是你想要的动态效果。下面给你一套具体的实现步骤，都是ASP.NET Core项目里常用的做法：

第一步：后端新增JSON接口 #

首先在你的ProblemController（或对应实体的控制器）里，新增一个专门返回查询结果的Action，用来处理前端的AJAX请求：

[HttpGet]
public IActionResult FilterProblems(int? departmentId, int? subDepartmentId, int? machineId, int? equipmentId)
{
    // 从上下文获取查询对象，按需加载关联数据
    var query = _context.Problems
        .Include(p => p.Equipment)
        .Include(p => p.Equipment.Machine)
        .Include(p => p.Equipment.Machine.SubDepartment)
        .Include(p => p.Equipment.Machine.SubDepartment.Department)
        .AsQueryable();

    // 根据下拉框参数逐层过滤数据
    if (departmentId.HasValue)
    {
        query = query.Where(p => p.Equipment.Machine.SubDepartment.DepartmentId == departmentId.Value);
    }
    if (subDepartmentId.HasValue)
    {
        query = query.Where(p => p.Equipment.Machine.SubDepartmentId == subDepartmentId.Value);
    }
    if (machineId.HasValue)
    {
        query = query.Where(p => p.Equipment.MachineId == machineId.Value);
    }
    if (equipmentId.HasValue)
    {
        query = query.Where(p => p.EquipmentId == equipmentId.Value);
    }

    // 选择需要展示的字段（尽量返回精简数据，避免冗余）
    var result = query.Select(p => new
    {
        p.Id,
        p.ProblemTitle,
        p.ProblemDescription,
        EquipmentName = p.Equipment.Name,
        MachineName = p.Equipment.Machine.Name,
        SubDepartmentName = p.Equipment.Machine.SubDepartment.Name,
        DepartmentName = p.Equipment.Machine.SubDepartment.Department.Name
    }).ToList();

    // 返回JSON格式数据
    return Json(result);
}

第二步：改造前端Index页面 #

保留EF生成的表格表头，把原来的静态tbody替换成空的、带ID的容器，方便后续动态插入内容：

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>问题标题</th>
            <th>问题描述</th>
            <th>所属装置</th>
            <th>所属设备</th>
            <th>所属子部门</th>
            <th>所属部门</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="problemTableBody">
        <!-- 动态内容会在这里插入 -->
    </tbody>
</table>

然后添加AJAX逻辑，监听查询按钮（或下拉框变化），发送请求并渲染表格：

// 假设你有一个查询按钮，ID是searchBtn
$("#searchBtn").click(function() {
    // 获取各个下拉框的选中值
    var departmentId = $("#DepartmentId").val() || null;
    var subDepartmentId = $("#SubDepartmentId").val() || null;
    var machineId = $("#MachineId").val() || null;
    var equipmentId = $("#EquipmentId").val() || null;

    // 发送AJAX请求
    $.ajax({
        url: '@Url.Action("FilterProblems", "Problem")', // 替换成你的控制器和Action名
        type: "GET",
        data: {
            departmentId: departmentId,
            subDepartmentId: subDepartmentId,
            machineId: machineId,
            equipmentId: equipmentId
        },
        success: function(data) {
            // 先清空表格内容
            $("#problemTableBody").empty();
            
            // 遍历JSON数据，生成表格行
            $.each(data, function(index, item) {
                // 拼接表格行的HTML
                var row = `<tr>
                    <td>${item.Id}</td>
                    <td>${item.ProblemTitle}</td>
                    <td>${item.ProblemDescription}</td>
                    <td>${item.EquipmentName}</td>
                    <td>${item.MachineName}</td>
                    <td>${item.SubDepartmentName}</td>
                    <td>${item.DepartmentName}</td>
                    <td>
                        <a href='@Url.Action("Edit", "Problem")/${item.Id}' class="btn btn-sm btn-primary">编辑</a>
                        <a href='@Url.Action("Details", "Problem")/${item.Id}' class="btn btn-sm btn-info">详情</a>
                        <a href='@Url.Action("Delete", "Problem")/${item.Id}' class="btn btn-sm btn-danger">删除</a>
                    </td>
                </tr>`;
                
                // 将行插入表格
                $("#problemTableBody").append(row);
            });
        },
        error: function(xhr) {
            console.error("查询失败：" + xhr.responseText);
            alert("查询出错，请检查参数后重试");
        }
    });
});

（可选）用模板引擎简化HTML拼接 #

如果觉得字符串拼接HTML不够优雅，容易出错，可以用Handlebars这类轻量模板引擎：

1. 先引入Handlebars（可通过CDN或NuGet），然后在页面里添加模板：

<script id="problemRowTemplate" type="text/x-handlebars-template">
    <tr>
        <td>{{Id}}</td>
        <td>{{ProblemTitle}}</td>
        <td>{{ProblemDescription}}</td>
        <td>{{EquipmentName}}</td>
        <td>{{MachineName}}</td>
        <td>{{SubDepartmentName}}</td>
        <td>{{DepartmentName}}</td>
        <td>
            <a href='@Url.Action("Edit", "Problem")/{{Id}}' class="btn btn-sm btn-primary">编辑</a>
            <a href='@Url.Action("Details", "Problem")/{{Id}}' class="btn btn-sm btn-info">详情</a>
            <a href='@Url.Action("Delete", "Problem")/{{Id}}' class="btn btn-sm btn-danger">删除</a>
        </td>
    </tr>
</script>

2. 修改AJAX的success回调：

success: function(data) {
    $("#problemTableBody").empty();
    // 编译模板
    var template = Handlebars.compile($("#problemRowTemplate").html());
    // 遍历数据生成HTML并插入
    $.each(data, function(index, item) {
        $("#problemTableBody").append(template(item));
    });
}

这样代码可读性和维护性会更高，而且Handlebars默认会帮你转义HTML字符，避免XSS风险。

注意事项 #

• 确保页面已引入jQuery（ASP.NET Core默认模板一般包含），如果没有可添加CDN引用。
• 后端Action里的Include要按需添加，避免不必要的关联查询，提升性能。
• 如果下拉框是联动的（比如选部门后加载子部门），可在下拉框的change事件里触发AJAX请求更新下一级选项，这部分和表格填充是独立逻辑。

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