ASP.NET中JS动态添加ListBox选项后提交无法获取新增项的问题求助

ASP.NET Web Form 的服务端ListBox控件，项集合的渲染、回发重建完全依赖*视图状态（ViewState）*机制：

• 页面第一次加载时，会把写在aspx里的固定ListItem序列化存到页面的隐藏__VIEWSTATE字段里
• 点击提交回发时，后台直接从__VIEWSTATE字段反序列化，重建ListBox2的完整Items集合，完全不会解析浏览器端DOM里你用JS动态新增的<option>节点，所以你后台遍历ListBox2.Items时，永远只能拿到初始写入的4个固定项，看不到JS加的内容。

• 方法1：通过隐藏域同步动态选项（最稳妥，不受ViewState机制影响）
  1. 在页面里新增一个服务端隐藏域，专门存JS动态新增的选项数据：

     <asp:HiddenField ID="hfAddedItems" runat="server" />
     

  2. 修改原有add()函数，每新增一个ListBox选项，就把选项的value、text序列化追加到隐藏域里，让数据随表单一起提交：

     function add() {
         var count = document.getElementById("count");
         if (count.value == "") count.value = 1;
         count.value = parseInt(count.value) + 1;
         var num = count.value;
         
         var listBox2 = document.getElementById("ListBox2");
         var optn = document.createElement("OPTION");
         optn.value = num;
         optn.text = num + "_add";
         listBox2.options.add(optn);
     
         // 新增：同步动态选项到隐藏域
         var hf = document.getElementById('<%= hfAddedItems.ClientID %>');
         var itemStr = `${optn.value}:${optn.text}`;
         hf.value = hf.value ? `${hf.value}|${itemStr}` : itemStr;
     }
     

  3. 后台按钮点击事件里，读取隐藏域存的动态项数据，和ListBox的固定项合并即可：

     protected void btnSubmit_Click(object sender, EventArgs e)
     {
         string sel = "";
         // 先读ListBox本身的固定项
         foreach (ListItem item in ListBox2.Items)
         {
             sel += item.Text + ",";
         }
         // 再读隐藏域存的动态新增项
         if (!string.IsNullOrEmpty(hfAddedItems.Value))
         {
             foreach (var item in hfAddedItems.Value.Split('|'))
             {
                 var parts = item.Split(':');
                 sel += $"{parts[1]},";
             }
         }
         Label1.Text = sel;
     }
     

• 方法2：直接读取原始请求的表单值
  原生select控件提交时，会把所有选中状态的选项值随表单发到后台，不需要依赖ListBox服务端控件的Items集合。如果只需要拿到动态选项的选中值，直接读请求就行：

  protected void btnSubmit_Click(object sender, EventArgs e)
  {
      // 直接获取select提交的选中项值，动态加的选项只要被选中，这里都能读到
      string selectedValues = Request.Form[ListBox2.UniqueID];
      Label1.Text = selectedValues;
  }
  

• 方法3：关闭ListBox的ViewState追踪
  给ListBox加EnableViewState="false"属性，回发时后台不会用ViewState重建控件Items，会直接绑定前端提交的select的实际内容。注意这种方式需要在Page_Load的!IsPostBack判断里手动绑定ListBox的固定项，否则回发后固定项会丢失。

• 不要尝试在前端JS直接修改页面的__VIEWSTATE字段来塞动态选项，Web Form的ViewState带MAC校验，前端篡改内容会直接触发运行时校验错误。
• 原生select控件提交时只会带选中状态的选项值，未选中的动态选项文本、值不会自动传到后台，要拿全量动态选项必须靠隐藏域中转。

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