ASP.NET如何基于模型下拉值动态编辑SQL查询实现级联下拉

修正步骤 #

1. 首先修正JS中的元素选择器，和你实际HTML的元素ID对应：你HTML里部门下拉的选择器应该是select[name="DepartmentId"]，子部门下拉是select[name="SubDepartmentId"]，不要使用不存在的ID。
2. 修正$.each遍历逻辑，正确读取返回JSON的字段。
3. 追加选项前先清空原有选项，避免多次选择后数据累加。

修正后的完整JS代码 #

$(function () {
    // 绑定部门下拉的change事件，选择器对应实际的部门下拉元素
    $("select[name='DepartmentId']").change(function () {
        var selectedid = $(this).val();
        var $subDeptSelect = $("select[name='SubDepartmentId']");
        // 先清空原有子部门选项
        $subDeptSelect.empty();
        if (selectedid > 0) {
            $.ajax({
                url: "/RecordEntries/PopulateddlSubDepartments",
                data: {
                    id: selectedid
                },
                type: "Post",
                dataType: "json",
                success: function (data) {
                    // 可选添加默认请选择选项
                    $subDeptSelect.append($('<option></option>').val(0).text('请选择子部门'));
                    // 遍历返回的数组，第二个参数才是当前的子部门对象
                    $.each(data, function (index, item) {
                        $subDeptSelect.append(
                            $('<option></option>').val(item.NumberValue).text(item.NameLabel)
                        );
                    });
                },
                error: function () {
                    alert("加载子部门数据失败");
                }
            });
        } else {
            // 未选择部门时子部门显示提示
            $subDeptSelect.append($('<option></option>').val(0).text('请先选择部门'));
        }
    });
});

控制器端注意事项 #

动态SQL必须使用参数化查询，不要直接拼接字符串，避免SQL注入风险，示例EF查询写法：

var subDepts = _dbContext.SubDepartments.Where(s=>s.DepartmentID == id).Select(s=>new {
    NumberValue = s.SubDepartmentID,
    NameLabel = s.SubDepartmentName
}).ToList();
return Json(subDepts);

如果使用原生ADO.NET，查询语句写为SELECT SubDepartmentID,SubDepartmentName FROM SubDepartments WHERE DepartmentID = @DeptId，给@DeptId传参即可。

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