ASP.NET Web Forms三级级联下拉列表无刷新加载异常求助

我有三个层级级联的下拉列表：选择地点后加载对应建筑，选择建筑后加载对应单元，需要实现父选项选择后子选项无刷新动态加载的效果。试过两种方案都无法正常使用：

• UpdatePanel方案：能正常加载数据，但会导致页面部分组件样式丢失，比如多选样式、intl-tel-input的国家图标消失。
• AJAX方案：填充列表正常，页面样式也能保持完整，但表单提交时服务器端无法获取建筑和单元下拉列表的选中值（客户端已正确填充并选中）。

相关代码 #

ASP.NET控件代码 #

<asp:DropDownList ID="ddlLocationDetail" class="form-control form-control-select2" runat="server" AutoPostBack="false" ClientIDMode="Static"></asp:DropDownList>

<asp:DropDownList ID="ddlBuildingDetail" class="form-control form-control-select2" runat="server" AutoPostBack="false" ClientIDMode="Static"></asp:DropDownList>

<asp:DropDownList ID="ddlUnitDetail" class="form-control form-control-select2" runat="server" AutoPostBack="false" ClientIDMode="Static"></asp:DropDownList>

JavaScript代码 #

function FillBuildingsByLocation(userDataBase, ddlLocation, ddlBuildings, ddlUnits) {
    ddlLocation.change(function () {
        var locationId = $(this).val();
        $.ajax({
            url: '/MasterData/GetBuildingsByLocationId',
            type: 'GET',
            data: { locationId: locationId, userDataBase: userDataBase },
            success: function (data) {
                ddlBuildings.empty();
                ddlUnits.empty();
                addFirstSelect(ddlBuildings)
                $(data).each(function () {
                    $(document.createElement('option')).val(this.id).text(this.name).appendTo(ddlBuildings);
                });
            },
            error: function () {
                alert("Error loading buildings!");
            }
        });
    });
}

function FillUnitsByBuilding(userDataBase, ddlBuildings, ddlUnits) {
    ddlBuildings.change(function () {
        var buildingId = $(this).val();
        $.ajax({
            url: '/MasterData/GetUnitsByBuildingId',
            type: 'GET',
            data: { buildingId: buildingId, userDataBase: userDataBase },
            success: function (data) {
                ddlUnits.empty();
                addFirstSelect(ddlUnits)
                $(data).each(function () {
                    $(document.createElement('option')).val(this.id).text(this.name).appendTo(ddlUnits);
                });
            },
            error: function () {
                alert("Error loading units!");
            }
        });
    });
}

解决方案 #

解决AJAX方案的服务器端取值问题 #

ASP.NET服务器控件依赖视图状态验证，动态添加的选项不在初始视图状态中，导致提交时服务器无法识别。推荐用以下两种方法解决：

1. 使用隐藏域存储选中值

   • 在页面中添加两个服务器端隐藏域：

     <asp:HiddenField ID="hfBuildingId" runat="server" ClientIDMode="Static" />
     <asp:HiddenField ID="hfUnitId" runat="server" ClientIDMode="Static" />
     

   • 在下拉列表选项变化时，同步选中值到隐藏域：

     // 建筑下拉列表值变化时同步
     ddlBuildings.change(function(){
         $('#hfBuildingId').val($(this).val());
     });
     // 单元下拉列表值变化时同步
     ddlUnits.change(function(){
         $('#hfUnitId').val($(this).val());
     });
     

   • 服务器端直接读取hfBuildingId.Value和hfUnitId.Value即可获取选中值。

2. 禁用视图状态验证（不推荐）

   • 在下拉列表控件中添加EnableViewState="false"，让服务器不验证视图状态直接接收提交值。但这种方式存在安全风险，可能导致非法数据提交，仅作为备选方案。

解决UpdatePanel方案的样式丢失问题 #

UpdatePanel刷新后，依赖DOM初始化的插件（如select2、intl-tel-input）会失效，需要在刷新完成后重新初始化：

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
    // 重新初始化select2
    $('.form-control-select2').select2();
    // 重新初始化intl-tel-input
    $('[data-toggle="intl-tel-input"]').intlTelInput();
});

添加这段代码后，UpdatePanel刷新完成时会自动重新初始化插件，恢复样式和功能。

内容的提问来源于stack exchange，提问作者Hazem Al-Takleh