ASP.NET C#开发：如何获取表格不同行中下拉列表的ID？

嘿，我来帮你搞定这个没法获取下拉列表ID、没法添加新字段的问题！结合你做类似Google Forms的场景，我分两种常见情况给你解决方案：

情况1：服务器端动态生成DropDownList控件 #

如果你的下拉列表是在后台C#代码里动态创建的，核心要注意ASP.NET的控件生命周期——动态控件必须在每次回发时重建，才能保留ID和状态。

后台代码示例 #

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 初始化第一个下拉列表
        AddNewDropDownList();
        // 用ViewState记录已生成的控件数量
        ViewState["QuestionCount"] = 1;
    }
    else
    {
        // 回发时重建所有动态生成的控件
        int count = (int)ViewState["QuestionCount"];
        for (int i = 1; i <= count; i++)
        {
            CreateDropDownList($"ddl_QuestionType_{i}");
        }
    }
}

// 创建单个下拉列表的通用方法
private void CreateDropDownList(string controlId)
{
    DropDownList ddl = new DropDownList();
    ddl.ID = controlId;
    // 设置客户端ID和服务器端ID一致（可选，方便前端操作）
    ddl.ClientIDMode = ClientIDMode.Static;
    // 添加问卷类型选项
    ddl.Items.Add(new ListItem("单行文本", "Text"));
    ddl.Items.Add(new ListItem("下拉选择", "Dropdown"));
    ddl.Items.Add(new ListItem("多选框", "Checkbox"));
    
    // 把控件添加到页面容器（比如Placeholder或Panel）
    Placeholder_Questions.Controls.Add(ddl);
    Placeholder_Questions.Controls.Add(new LiteralControl("<br /><br />"));
}

// 点击"添加新字段"按钮的事件
protected void btn_AddNewField_Click(object sender, EventArgs e)
{
    int count = (int)ViewState["QuestionCount"];
    count++;
    ViewState["QuestionCount"] = count;
    // 创建新的下拉列表
    CreateDropDownList($"ddl_QuestionType_{count}");
    
    // 此时可以直接通过ID获取新生成的控件
    DropDownList newDdl = Placeholder_Questions.FindControl($"ddl_QuestionType_{count}") as DropDownList;
    if (newDdl != null)
    {
        // 这里可以做你需要的初始化操作，比如设置默认选中项
        newDdl.SelectedValue = "Text";
    }
}

前端容器代码 #

<div class="form-group" style="margin:auto; width:80%;">
    <form name="add_question" id="add_question" runat="server">
        <asp:Label ID="Label1" runat="server" Text="Survey Title: " Font-Size="Large"></asp:Label>
        <input type="text" name="survey_title" id="survey_title" class="form-control" /><br /><br />
        
        <!-- 用来承载动态控件的容器 -->
        <asp:Placeholder ID="Placeholder_Questions" runat="server"></asp:Placeholder>
        
        <asp:Button ID="btn_AddNewField" runat="server" Text="添加新字段" OnClick="btn_AddNewField_Click" CssClass="btn btn-primary" />
    </form>
</div>

情况2：客户端JS动态生成下拉列表 #

如果是用JavaScript在前端动态生成下拉列表，关键是给每个控件设置唯一的ID，比如用计数器来命名，这样后续就能轻松获取。

前端代码示例 #

<div class="form-group" style="margin:auto; width:80%;">
    <form name="add_question" id="add_question">
        <label for="survey_title" style="font-size:large;">Survey Title: </label>
        <input type="text" name="survey_title" id="survey_title" class="form-control" /><br /><br />
        
        <!-- 动态控件的容器 -->
        <div id="question_container"></div>
        
        <button type="button" onclick="addNewQuestionField()" class="btn btn-primary">添加新字段</button>
    </form>
</div>

<script>
// 初始化计数器
let questionCounter = 0;

// 页面加载时先创建第一个字段
window.onload = function() {
    addNewQuestionField();
}

function addNewQuestionField() {
    questionCounter++;
    const container = document.getElementById('question_container');
    
    // 创建下拉列表
    const ddl = document.createElement('select');
    ddl.id = `ddl_QuestionType_${questionCounter}`;
    ddl.name = `ddl_QuestionType_${questionCounter}`;
    
    // 添加选项
    const options = [
        { value: "Text", text: "单行文本" },
        { value: "Dropdown", text: "下拉选择" },
        { value: "Checkbox", text: "多选框" }
    ];
    options.forEach(opt => {
        const option = document.createElement('option');
        option.value = opt.value;
        option.textContent = opt.text;
        ddl.appendChild(option);
    });
    
    // 添加到容器
    container.appendChild(ddl);
    container.appendChild(document.createElement('br'));
    container.appendChild(document.createElement('br'));
    
    // 现在可以直接通过ID获取这个新生成的下拉列表
    const newDdl = document.getElementById(`ddl_QuestionType_${questionCounter}`);
    if (newDdl) {
        // 比如绑定事件或者做其他操作
        console.log("新生成的下拉列表ID:", newDdl.id);
    }
}
</script>

关键注意点 #

• 如果是服务器端控件，别忘了设置ClientIDMode="Static"，这样前端JS获取ID时不需要处理ASP.NET自动生成的长ID。
• 不管是服务器端还是客户端生成，确保每个控件的ID唯一，避免冲突。
• 如果需要在回发时获取所有下拉列表的值，服务器端可以遍历容器里的控件，客户端可以遍历question_container里的所有select元素。

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