如何开发可自动生成字段与Panel的ASP.NET C#问卷表单应用？

嘿，我刚好做过类似的表单生成功能，给你梳理下具体的实现方案，结合你现有的ASP.NET代码来调整：

首先，先完善你现有的前端代码，添加触发生成的按钮并补全下拉框选项：

<asp:Panel ID="container" runat="server"></asp:Panel>
<asp:Panel ID="question" runat="server" Height="391px">
    <br />
    <br />
    <asp:Label ID="Label1" runat="server" Text="Question: " Font-Size="Large"></asp:Label>
    <asp:TextBox ID="txtQuestion" runat="server" Font-Size="Large"></asp:TextBox>
    <asp:DropDownList ID="lstQuestionType" runat="server">
        <asp:ListItem Text="Short Answer" Value="ShortAnswer"></asp:ListItem>
        <asp:ListItem Text="Multiple Choice" Value="MultipleChoice"></asp:ListItem>
        <asp:ListItem Text="Checkbox" Value="Checkbox"></asp:ListItem>
    </asp:DropDownList>
    <asp:Button ID="btnAddQuestion" runat="server" Text="Add Question" OnClick="btnAddQuestion_Click" Style="margin-left:10px;" />
</asp:Panel>

接下来是后端C#的核心逻辑，在你的.aspx.cs文件中实现按钮点击事件，动态生成包含问题和对应输入控件的Panel：

// 定义模型类存储问题信息，用于回发时保留控件状态
public class QuestionModel
{
    public string QuestionText { get; set; }
    public string QuestionType { get; set; }
    public int Order { get; set; }
}

protected void Page_Load(object sender, EventArgs e)
{
    // 页面初始化或回发时恢复问题列表
    if (!IsPostBack)
    {
        Session["QuestionList"] = new List<QuestionModel>();
    }
    else
    {
        // 回发时重新生成之前添加的动态控件，避免丢失
        RebuildDynamicQuestions();
    }
}

protected void btnAddQuestion_Click(object sender, EventArgs e)
{
    // 获取用户输入的问题内容和类型
    string questionContent = txtQuestion.Text.Trim();
    string selectedType = lstQuestionType.SelectedValue;

    if (string.IsNullOrEmpty(questionContent))
    {
        // 这里可以添加提示，比如用Label显示"请输入问题内容"
        return;
    }

    // 从Session获取已有的问题列表
    var questionList = Session["QuestionList"] as List<QuestionModel>;
    int newOrder = questionList.Count + 1;

    // 添加新问题到列表
    questionList.Add(new QuestionModel
    {
        QuestionText = questionContent,
        QuestionType = selectedType,
        Order = newOrder
    });
    Session["QuestionList"] = questionList;

    // 清空输入框，方便继续添加
    txtQuestion.Text = string.Empty;

    // 重新生成所有动态控件，确保回发后内容不丢失
    container.Controls.Clear();
    RebuildDynamicQuestions();
}

private void RebuildDynamicQuestions()
{
    var questionList = Session["QuestionList"] as List<QuestionModel>;
    if (questionList == null || questionList.Count == 0) return;

    foreach (var question in questionList)
    {
        // 创建新Panel容纳当前问题和控件
        Panel questionPanel = new Panel();
        questionPanel.ID = $"QuestionPanel_{question.Order}";
        questionPanel.CssClass = "question-item"; // 可自定义CSS美化
        questionPanel.Style.Add("margin-bottom", "25px");
        questionPanel.Style.Add("padding", "15px");
        questionPanel.Style.Add("border", "1px solid #eee");

        // 添加问题标题
        Label questionLabel = new Label();
        questionLabel.Text = $"{question.Order}. {question.QuestionText}";
        questionLabel.Font.Size = FontUnit.Large;
        questionLabel.Style.Add("margin-bottom", "10px");
        questionPanel.Controls.Add(questionLabel);
        questionPanel.Controls.Add(new LiteralControl("<br /><br />"));

        // 根据问题类型生成对应输入控件
        switch (question.QuestionType)
        {
            case "ShortAnswer":
                TextBox shortAnswerBox = new TextBox();
                shortAnswerBox.ID = $"ShortAnswer_{question.Order}";
                shortAnswerBox.CssClass = "form-control";
                shortAnswerBox.Width = Unit.Percentage(80);
                questionPanel.Controls.Add(shortAnswerBox);
                break;

            case "MultipleChoice":
                // 示例选项，后续可改为让用户输入自定义选项
                string[] mcOptions = { "Option 1", "Option 2", "Option 3" };
                foreach (var option in mcOptions)
                {
                    RadioButton rb = new RadioButton();
                    rb.ID = $"MC_{question.Order}_{option.Replace(" ", "")}";
                    rb.GroupName = $"MCGroup_{question.Order}";
                    rb.Text = option;
                    rb.Style.Add("margin-right", "15px");
                    questionPanel.Controls.Add(rb);
                    questionPanel.Controls.Add(new LiteralControl("<br />"));
                }
                break;

            case "Checkbox":
                string[] cbOptions = { "Option A", "Option B", "Option C" };
                foreach (var option in cbOptions)
                {
                    CheckBox cb = new CheckBox();
                    cb.ID = $"CB_{question.Order}_{option.Replace(" ", "")}";
                    cb.Text = option;
                    cb.Style.Add("margin-right", "15px");
                    questionPanel.Controls.Add(cb);
                    questionPanel.Controls.Add(new LiteralControl("<br />"));
                }
                break;
        }

        // 将新Panel添加到容器中
        container.Controls.Add(questionPanel);
    }
}

关键注意点： #

• 动态控件生命周期：ASP.NET回发后会丢失动态创建的控件，所以用Session存储问题数据，在Page_Load时重新生成所有控件，确保页面回发后内容不会消失。
• 唯一ID规则：所有动态控件的ID必须唯一，这里用问题序号区分，避免ID冲突导致的控件异常。
• 可扩展性：如果需要支持更多问题类型（如下拉框、日期选择器），只需在switch分支中添加对应的控件生成逻辑即可。
• 样式优化：可以给动态生成的Panel和控件添加CSS类，让界面风格更贴近Google Forms。

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