asp.net中使用vb.net实现无autopostback的dropdownlist值联动

核心思路是将联动所需的全量数据提前从服务端输出到前端，用JavaScript监听第一个下拉框的选中变更事件，过滤匹配数据后直接渲染第二个下拉框的选项，全程不触发服务端回发。

具体实现步骤 #

• 服务端在页面首次加载时，同时构造两个下拉框的关联数据源，序列化为JSON后注入到前端JS变量中
• 页面上的两个DropDownList无需开启AutoPostBack属性，设置ClientIDMode="Static"方便前端获取DOM
• 编写前端JS逻辑监听父下拉框的change事件，根据选中值过滤子下拉框的选项并重新渲染

代码示例 #

服务端VB.NET代码（Page_Load事件） #

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        ' 绑定父下拉框示例数据，可替换为实际业务数据
        ddlParent.Items.Add(New ListItem("请选择省份", "0"))
        ddlParent.Items.Add(New ListItem("广东省", "1"))
        ddlParent.Items.Add(New ListItem("浙江省", "2"))
        
        ' 构造父子下拉框关联映射关系，key为父下拉框的value，value为对应子项列表
        Dim childData As New Dictionary(Of String, List(Of ListItem)) From {
            {"1", New List(Of ListItem) From {
                New ListItem("广州", "101"),
                New ListItem("深圳", "102"),
                New ListItem("东莞", "103")
            }},
            {"2", New List(Of ListItem) From {
                New ListItem("杭州", "201"),
                New ListItem("宁波", "202"),
                New ListItem("温州", "203")
            }}
        }
        
        ' 序列化关联数据为JSON，注入到前端JS变量
        Dim json As String = Newtonsoft.Json.JsonConvert.SerializeObject(childData)
        ClientScript.RegisterStartupScript(Me.GetType(), "childData", $"var childData = {json};", True)
    End If
End Sub

前端页面代码 #

<!-- 两个下拉框，无需设置AutoPostBack属性 -->
<asp:DropDownList ID="ddlParent" runat="server" ClientIDMode="Static">
</asp:DropDownList>
<asp:DropDownList ID="ddlChild" runat="server" ClientIDMode="Static">
    <asp:ListItem Text="请先选择省份" Value="0"></asp:ListItem>
</asp:DropDownList>

<!-- 前端联动逻辑，原生JS实现无需依赖第三方库 -->
<script type="text/javascript">
const parentDdl = document.getElementById('ddlParent');
const childDdl = document.getElementById('ddlChild');

parentDdl.addEventListener('change', function() {
    const selectedParentVal = this.value;
    // 清空原有子项
    childDdl.innerHTML = '';
    
    // 未选择父项的默认处理
    if(selectedParentVal === '0') {
        childDdl.add(new Option('请先选择省份', '0'));
        return;
    }
    
    // 匹配对应子项列表
    const childList = childData[selectedParentVal] || [];
    // 添加默认空选项
    childDdl.add(new Option('请选择城市', '0'));
    // 遍历渲染子选项
    childList.forEach(item => {
        childDdl.add(new Option(item.Text, item.Value));
    });
});
</script>

注意事项 #

• 若项目未引入Newtonsoft.Json，可使用.NET内置的System.Text.Json.JsonSerializer.Serialize方法完成序列化
• 若不设置ClientIDMode="Static"，前端获取控件DOM时需用document.getElementById('<%= ddlParent.ClientID %>')写法获取动态生成的ID
• 联动逻辑完全在前端执行，不会触发页面回发，也不会导致页面刷新

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