ASP.NET MVC中基于Entity Framework实现编辑页级联下拉框的方法

核心原因 #

你新增页的级联逻辑仅在下拉框值变更时触发，编辑页首次加载时没有自动触发级联加载流程，导致二级、三级下拉没有选项，无法显示已保存的关联值。

具体修改步骤 #

你不需要改动已有的控制器逻辑和视图结构，只需要在原有JS逻辑基础上增加页面加载后的自动触发逻辑即可：

1. 保留原有新增页的所有视图代码、级联change事件逻辑
2. 修改页面加载时的JS代码，新增自动触发级联、自动选中已保存值的逻辑，修改后完整JS代码如下：

$(document).ready(function () {
    // 获取当前编辑数据已保存的二级分组、三级子分组ID
    const savedGroupId = '@Model.IndGrID';
    const savedSubGroupId = '@Model.SubGroupID';

    // 原有一级指标下拉变更事件
    $("#ddlIndicators").change(function () {
        const indicatorID = $(this).val();
        $.getJSON("../Indicator_SubGroup/LoadSubGroupByIndicatorID", { indicatorID: indicatorID }, function (classesData) {
            const groupSelect = $("#ddlGroup");
            groupSelect.empty();
            groupSelect.append($('<option/>', {
                value: 0,
                text: "请选择分组"
            }));
            $.each(classesData, function (index, itemData) {
                groupSelect.append($('<option/>', {
                    value: itemData.Value,
                    text: itemData.Text
                }));
            });
            // 二级分组加载完成后，若存在已保存的分组ID则自动选中，并触发变更事件加载三级子分组
            if(savedGroupId){
                $("#ddlGroup").val(savedGroupId).trigger('change');
                // 赋值后置空，避免后续手动修改一级指标时重复赋值
                window.savedGroupId = null;
            }
        });
    });

    // 原有二级分组下拉变更事件
    $("#ddlGroup").change(function () {
        const subGroupId = $(this).val();
        $.getJSON("../Indicator_SubGroup/LoadSubGroupByGroupID", { subGroupId: subGroupId }, function (marksData) {
            const subGroupSelect = $("#ddlSubGroup");
            subGroupSelect.empty();
            subGroupSelect.append($('<option/>', {
                value: 0,
                text: "请选择子分组"
            }));
            $.each(marksData, function (index, itemData) {
                subGroupSelect.append($('<option/>', {
                    value: itemData.Value,
                    text: itemData.Text
                }));
            });
            // 三级子分组加载完成后，若存在已保存的子分组ID则自动选中
            if(savedSubGroupId){
                $("#ddlSubGroup").val(savedSubGroupId);
                window.savedSubGroupId = null;
            }
        });
    });

    // 页面加载完成后，自动触发一级指标变更事件，启动级联加载流程
    const selectedIndicator = $("#ddlIndicators").val();
    if(selectedIndicator && selectedIndicator != 0){
        $("#ddlIndicators").trigger('change');
    }
});

注意事项 #

• 确保你的编辑页是绑定了对应模型的强类型视图，才能正常读取@Model.IndGrID和@Model.SubGroupID的取值
• 你现有编辑控制器的Edit方法已经正确传递了三个下拉的选中值，不需要做修改

内容的提问来源于stack exchange，提问作者jacop k.