在 Javascript 中以自然方式添加后，我无法在 asp.net 中获取 Listbox 的值答案

【问题标题】：I can't get values of Listbox in asp.net after it was daynamically added in Javascript在 Javascript 中以自然方式添加后，我无法在 asp.net 中获取 Listbox 的值
【发布时间】：2021-05-05 16:01:48
【问题描述】：

我每天在javascript中创建选择选项，然后单击一个asp：按钮以提交添加的选项。但我无法从 ListBox 中得到它。请帮帮我！！

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Hello.aspx.cs" Inherits="BeyondInfo.Hello" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Welcome to My First ASP.NET</title>
    <script type="text/javascript">
        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);

        }

    </script>
</head>
<link href="Common.css" rel="stylesheet" />
<body>
    <form id="form1" runat="server">
        <div style="height: 277px">
            <asp:ListBox ID="ListBox2" runat="server">
                <asp:ListItem>b1222222222222222222222222222</asp:ListItem>
                <asp:ListItem>b2</asp:ListItem>
                <asp:ListItem>b3</asp:ListItem>
                <asp:ListItem>b4</asp:ListItem>
            </asp:ListBox>
            <input id="count" type="hidden" />
            <input id="btnAdd" type="button" value="ADD" onclick="add()"/>
            <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
            <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
    </form>
</body>
</html>
</p>

Hello.aspx.cs

public partial class Hello : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        string sel = "";
        foreach (ListItem item in ListBox2.Items) {
            sel +=item.Text + ",";
        }
        Label1.Text = sel;
    }
}

【问题讨论】：

你不能使用 JS 和 webforms 来做到这一点，你必须使用 AJAX control toolkit 的 AJAX 控制面板
感谢您的回答，我会尝试使用您的方式，但首先，您能告诉我该代码有什么问题吗？
那么 ListBox Id 不会是 ListBox，它会是一些自动生成的值。 document.createElement("OPTION") 将不起作用，因为您还需要将选项添加到 ViewModel 并且您无法执行该客户端。这就是您需要使用 Ajax 控制工具包的原因。 TBH，你为什么要学习网络表单？如今，Webforms 几乎是不复存在的技术。 MVC 是较新的等价物。
这是similar question
感谢您的帮助，从您的回答中，我可能需要了解更多有关 Aps.net 的信息。

标签： javascript c# webforms

【解决方案1】：

尝试查看 NC01 的此帖子答案。你也许可以通过做类似的事情来实现你想要的。

基本上，它们将添加的字段存储在隐藏字段中，以便服务器端可以访问它们。

我相信您的问题是，当您将项目添加到 DropDownList 客户端（使用 JavaScript）时，当 PostBack 发生时，该项目将消失。解决这个问题的唯一方法是向页面添加一个隐藏的服务器控件，并在客户端添加项目时，也将其添加到隐藏的服务器控件，这样当 PostBack 发生时，您也可以将它添加到服务器端。

这是一个例子。

https://forums.asp.net/t/1287204.aspx?How+to+add+the+values+to+listbox+control+using+javascript

aspx file:

<form id="Form1" method="post" runat="server">
 <asp:DropDownList id="DropDownList1" runat="server">
  <asp:listitem value="1">Item 1</asp:listitem>
  <asp:listitem value="2">Item 2</asp:listitem>
  <asp:listitem value="3">Item 3</asp:listitem>
  <asp:listitem value="4">Item 4</asp:listitem>
  <asp:listitem value="5">Item 5</asp:listitem>
  <asp:listitem value="6">Item 6</asp:listitem>
 </asp:DropDownList>
 <input id="DropDownList1NewItems" type="hidden" name="DropDownList1NewItems" runat="server">
 <input type="button" onclick="addItem();" value="Add Item">
</form>

<script type="text/javascript">
<!--
function addItem()
{
 // Add the item here...
 var ddlRef = document.getElementById('<%= DropDownList1.ClientID %>');
 var newOption = window.document.createElement('OPTION');
 newOption.text = 'SomeNewItem';
 newOption.value = 'SomeNewItem';

 ddlRef.options.add(newOption);

 var hiddenElementRef = document.getElementById('<%= DropDownList1NewItems.ClientID %>');

 if ( hiddenElementRef.value.length > 0 )
  hiddenElementRef.value += ';';

 hiddenElementRef.value += 'SomeNewItem';
}
// -->
</script>

aspx.cs file:

private void Page_Load(object sender, System.EventArgs e)
{
 if ( this.IsPostBack )
 {
  if ( DropDownList1NewItems.Value.Length > 0 )
  {
   string [] newItemsArray = DropDownList1NewItems.Value.Split(';');
   for (int i=0; i<newItemsArray.Length; i++)
   {
    string newItem = newItemsArray[i];

    DropDownList1.Items.Add(new ListItem(newItem, newItem));
   }

   DropDownList1NewItems.Value = string.Empty;
  }
 }
}

【讨论】：