ASP.NET WebForm中JS动态填充DropdownList后SelectedValue为空问题

问题根源 #

ASP.NET WebForms依赖ViewState维护控件状态，你通过JavaScript动态添加的<option>不会被记录到服务器端的ViewState中。回发时服务器会校验DropdownList的选项是否与初始渲染（或服务器端绑定）的一致，不一致就会忽略前端选中的值，导致SelectedValue为空。

方案一：用HiddenField存储选中值（最直接） #

通过隐藏字段同步前端选中值，后台直接读取隐藏字段内容：

1. 添加对应HiddenField控件：

<asp:HiddenField ID="hfFirst" runat="server" />
<asp:HiddenField ID="hfSecond" runat="server" />
<asp:HiddenField ID="hfThird" runat="server" />

<asp:DropDownList ID="first" class="form-control first" runat="server" />
<asp:DropDownList ID="second" class="form-control second" runat="server" />
<asp:DropDownList ID="third" class="form-control third" runat="server" />

2. 修改JavaScript逻辑，同步选中值到HiddenField：

$(document).ready(function () {
    populateFirst();

    $('.first').change(function () {
        $('#<%= hfFirst.ClientID %>').val($(this).val());
        populateSecond();
    });
    $('.second').change(function () {
        $('#<%= hfSecond.ClientID %>').val($(this).val());
        populateThird();
    });
    $('.third').change(function () {
        $('#<%= hfThird.ClientID %>').val($(this).val());
    });

    // 编辑态预填充时，同时设置下拉框和HiddenField的值
    <% if (!IsPostBack && !string.IsNullOrEmpty(EditFirstValue)) { %>
        $('.first').val('<%= EditFirstValue %>');
        $('#<%= hfFirst.ClientID %>').val('<%= EditFirstValue %>');
        populateSecond();
        // 按需补充二级、三级下拉的预填充逻辑
    <% } %>
});

3. 后台提交时读取HiddenField的值：

Dim firstVal = hfFirst.Value
Dim secondVal = hfSecond.Value

方案二：服务器端重建DropdownList选项（符合ViewState机制） #

回发时在Page_Load中重新绑定下拉选项，确保服务器端与前端选项一致：

1. 后台编写绑定下拉的方法：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        ' 首次加载交给前端JS处理，无需绑定
    Else
        ' 回发时重建一级下拉选项
        PopulateFirstDropdown()
        
        ' 根据一级选中值重建二级下拉
        Dim selectedFirst = Request.Form(first.UniqueID)
        If Not String.IsNullOrEmpty(selectedFirst) Then
            PopulateSecondDropdown(selectedFirst)
            
            ' 同理重建三级下拉
            Dim selectedSecond = Request.Form(second.UniqueID)
            If Not String.IsNullOrEmpty(selectedSecond) Then
                PopulateThirdDropdown(selectedSecond)
            End If
        End If
    End If
End Sub

Private Sub PopulateFirstDropdown()
    ' 调用API获取一级下拉数据并绑定
    Dim items = YourApiService.GetFirstLevelItems()
    first.DataSource = items
    first.DataTextField = "Text"
    first.DataValueField = "Value"
    first.DataBind()
End Sub

' 实现PopulateSecondDropdown、PopulateThirdDropdown方法，逻辑类似

2. 编辑态预填充时，在首次加载时绑定初始选项并设置选中值即可，回发后服务器会自动维护状态。

方案三：禁用DropdownList的ViewState（仅限简单场景） #

将DropdownList的EnableViewState设为False，让服务器直接读取表单提交的原始值：

<asp:DropDownList ID="first" class="form-control first" runat="server" EnableViewState="False" />

后台取值方式改为：

Dim firstVal = Request.Form(first.UniqueID)

注意：此方法下页面每次加载都需要重新设置选中值（包括编辑态），因为ViewState被禁用后控件状态不会保留。

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