ASP.NET Web应用表单提交时如何保留复选框选中状态

问题场景 #

我的ASP.NET Web应用中有带复选框的表单提交功能：当第一个单选框（rblSDG1Question1）选中值为2或3时，会显示包含7个CheckBoxList的子问卷，必须完成所有子问卷选项选择才能进入下一步。

当前代码可正常将选中选项保存至数据库，但存在问题：未选全所有子问卷复选框时，页面回发后已选中的复选框状态会被重置为空。

我实现了从数据库加载已保存答案的LoadQ1Answer方法，但该方法未放置在if (!Page.IsPostBack)代码块中（若放入则无法正常显示结果）。

现有代码 #

提交按钮后台处理代码 #

protected void btnNextSDGSection2_Click(object sender, EventArgs e)
{
    if (string.IsNullOrEmpty(rblSDG1Question1.SelectedValue))
    {
        lblMessageSection3.Text = "<br />⚠ Please select an option for Q1 before proceeding.";
        lblMessageSection3.ForeColor = System.Drawing.Color.Red;
        return;
    }

    int recordId = (int)Session["companyProfileID"];
    string selectedOption = rblSDG1Question1.SelectedValue;

    string query= @"
        SELECT COUNT(*) 
        FROM sdgAlignmentSurvey_Section2 
        WHERE sdgAlignmentSurvey_Section2ID = @id";

    using (SqlConnection conn = SqlConnectionClass.GetConnection())
    {
        conn.Open();

        using (SqlCommand cmd = new SqlCommand(query, conn))
        {
            cmd.Parameters.AddWithValue("@id", recordId);

            int exists = (int)cmd.ExecuteScalar();

            if (selectedOption == "0" || selectedOption == "1")
            {
                if (exists > 0)
                {
                    string queryUpdate = @"
                    UPDATE sdgAlignmentSurvey_Section2 
                    SET Q1 = @option 
                    WHERE sdgAlignmentSurvey_Section2ID = @id";

                    using (SqlCommand cmdUpdate = new SqlCommand(queryUpdate, conn))
                    {
                        cmdUpdate.Parameters.AddWithValue("@option", selectedOption);
                        cmdUpdate.Parameters.AddWithValue("@id", recordId);
                        cmdUpdate.ExecuteNonQuery();

                        lblMessageSection3.Text = $"<br />✅The option '{selectedOption}' is updated successfully.";
                        lblMessageSection3.ForeColor = System.Drawing.Color.Green;
                    }
                }
                else
                {
                    string queryInsert = @"
                    INSERT INTO sdgAlignmentSurvey_Section2 (sdgAlignmentSurvey_Section2ID, Q1)
                    VALUES (@id, @option)";

                    new SqlCommand("SET IDENTITY_INSERT sdgAlignmentSurvey_Section2 ON", conn).ExecuteNonQuery();

                    using (SqlCommand cmdInsert = new SqlCommand(queryInsert, conn))
                    {
                        cmdInsert.Parameters.AddWithValue("@id", recordId);
                        cmdInsert.Parameters.AddWithValue("@option", selectedOption);
                        cmdInsert.ExecuteNonQuery();

                        lblMessageSection3.Text = $"<br />✅The option '{selectedOption}' is inserted successfully.";
                        lblMessageSection3.ForeColor = System.Drawing.Color.Green;
                    }

                    new SqlCommand("SET IDENTITY_INSERT sdgAlignmentSurvey_Section2 OFF", conn).ExecuteNonQuery();
                }
            }
        }

        bool allValid = true;

        if (selectedOption == "2" || selectedOption == "3")
        {
            var checkboxes = new[] {
                CheckBoxList1, CheckBoxList2, CheckBoxList3,
                CheckBoxList4, CheckBoxList5, CheckBoxList6, CheckBoxList7
            };

            foreach (var list in checkboxes)
            {
                if (string.IsNullOrEmpty(list.SelectedValue))
                {
                    allValid = false;
                    break;
                }
            }

            if (allValid)
            {
                SaveRelatedOptions(recordId, selectedOption);
            }
            else
            {
                lblMessageSection3.Text = "<br />⚠ Please select an option in all sub-questions before proceeding.";
                lblMessageSection3.ForeColor = System.Drawing.Color.Red;
            }
        }
        else
        {
            string queryDelete = "DELETE FROM sdgAlignmentSurvey_Section2_q1_options WHERE FK_companyProfileID = @recordId";
            using (SqlCommand cmdDelete = new SqlCommand(queryDelete, conn))
            {
                cmdDelete.Parameters.AddWithValue("@recordId", recordId);
                cmdDelete.ExecuteNonQuery();
            }
        }            
    
        Session["SDG_Q1_Answer"] = selectedOption;

        if (allValid)
        {
            ((Pages.SDG_Alignment_Flow.SDG_Alignment_Genel)this.Page).NextStep();
        }
    }
}

加载已保存答案的方法 #

private void LoadQ1Answer()
{
    using (SqlConnection conn = SqlConnectionClass.GetConnection())
    {
        conn.Open();

        int recordId = (int)Session["companyProfileID"];

        string query = @"
            SELECT Q1 
            FROM sdgAlignmentSurvey_Section2 
            WHERE sdgAlignmentSurvey_Section2ID = @id";

        using (SqlCommand cmd = new SqlCommand(query, conn))
        {
            cmd.Parameters.AddWithValue("@id", recordId);

            object result = cmd.ExecuteScalar();

            if (result != null && result != DBNull.Value)
            {
                string savedOption = result.ToString();
                ListItem item = rblSDG1Question1.Items.FindByValue(savedOption);

                if (item != null)
                {
                    rblSDG1Question1.ClearSelection();
                    item.Selected = true;

                    if (savedOption == "2" || savedOption == "3")
                    {
                        pnlSDG1ExtraMessage.Visible = true;
                        LoadQ1Details(recordId, savedOption);
                    }
                    else
                    {
                        pnlSDG1ExtraMessage.Visible = false;
                    }

                    lblMessageSection2.Text = $"Selected: {item.Text}";
                }
            }
        }
    }
}

问题原因 #

1. LoadQ1Answer执行时机错误：该方法在每次回发时都会执行，从数据库加载旧的答案，覆盖了用户刚在页面上选择的未保存的子问卷选项。
2. 未利用ViewState维护临时状态：ASP.NET默认通过ViewState保存控件回发前的状态，但因为每次回发都调用LoadQ1Answer加载旧值，导致ViewState的状态被覆盖。

解决方案 #

步骤1：调整LoadQ1Answer的执行时机 #

将LoadQ1Answer仅在页面首次加载时调用，避免回发时覆盖用户输入：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        LoadQ1Answer();
    }
}

步骤2：给单选框添加SelectedIndexChanged事件处理 #

当用户切换主单选框选项时，动态加载对应子问卷的已保存答案，并控制子问卷面板的显示：

1. 先在ASPX页面中给rblSDG1Question1设置AutoPostBack="True"：

<asp:RadioButtonList ID="rblSDG1Question1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="rblSDG1Question1_SelectedIndexChanged">
    <!-- 选项内容 -->
</asp:RadioButtonList>

2. 添加后台事件处理代码：

protected void rblSDG1Question1_SelectedIndexChanged(object sender, EventArgs e)
{
    string selectedOption = rblSDG1Question1.SelectedValue;
    int recordId = (int)Session["companyProfileID"];
    
    if (selectedOption == "2" || selectedOption == "3")
    {
        pnlSDG1ExtraMessage.Visible = true;
        LoadQ1Details(recordId, selectedOption); // 加载已保存的子问卷答案
    }
    else
    {
        pnlSDG1ExtraMessage.Visible = false;
    }
}

步骤3：优化提交按钮逻辑 #

当子问卷验证失败时，不需要执行任何覆盖控件状态的操作，让ViewState自动保留用户当前的选择：
在btnNextSDGSection2_Click方法中，当allValid = false时，仅显示错误提示即可，不要调用任何加载数据库数据的方法。

验证效果 #

• 首次加载页面：LoadQ1Answer从数据库加载已保存的主选项和子问卷答案。
• 切换主单选框：触发SelectedIndexChanged事件，加载对应子问卷的已保存答案。
• 未选全子问卷提交：页面回发后，ViewState保留用户已选的子问卷选项，同时显示错误提示，不会重置为空。

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