如何在ASP.NET WebForms单页中实现单题逐页切换显示

实现思路 #

把每道题封装到独立的Panel控件中，通过维护当前试题索引，控制对应Panel的显示/隐藏，配合上下题按钮完成切换，所有逻辑在同一个.aspx文件内实现。

修改后的.aspx代码 #

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Quiz.aspx.cs" Inherits="Quiz" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Quiz</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <!-- 试题容器 -->
            <asp:Panel ID="pnlQuestion1" runat="server" Visible="true">
                <p>Question 1</p>
                <p>Text here</p>
                <p>
                    <asp:Button ID="btnq1a" runat="server" OnClick="correct_click" Text="True" CssClass="btn btn-sm btn-default" /> <br>
                    <asp:Button ID="btnq1b" runat="server" Text="False" CssClass="btn btn-sm btn-default" />
                </p>
            </asp:Panel>

            <asp:Panel ID="pnlQuestion2" runat="server" Visible="false">
                <p>Question 2</p>
                <p>Text here</p>
                <p>
                    <asp:Button ID="btnq2a" runat="server" Text="answer 1" CssClass="btn btn-sm btn-default" /> <br>
                    <asp:Button ID="btnq2b" runat="server" Text="answer 2" CssClass="btn btn-sm btn-default" /> <br>
                    <asp:Button ID="btnq2c" runat="server" Text="answer 3" CssClass="btn btn-sm btn-default" /> <br>
                    <asp:Button ID="btnq2d" runat="server" OnClick="correct_click" Text="All of the above" CssClass="btn btn-sm btn-default" />
                </p>
            </asp:Panel>

            <asp:Panel ID="pnlQuestion3" runat="server" Visible="false">
                <p>Question 3</p>
                <p>Text here</p>
                <p>
                    <asp:Button ID="btnq3a" runat="server" OnClick="correct_click" Text="True" CssClass="btn btn-sm btn-default" /><br>
                    <asp:Button ID="btnq3b" runat="server" Text="False" CssClass="btn btn-sm btn-default" />
                </p>
            </asp:Panel>

            <!-- 切换按钮 -->
            <div class="mt-3">
                <asp:Button ID="btnPrevious" runat="server" Text="上一题" CssClass="btn btn-primary" OnClick="btnPrevious_Click" Enabled="false" />
                <asp:Button ID="btnNext" runat="server" Text="下一题" CssClass="btn btn-primary" OnClick="btnNext_Click" />
            </div>
        </div>
    </form>
</body>
</html>

后台.cs代码（Quiz.aspx.cs） #

using System;
using System.Web.UI.WebControls;

public partial class Quiz : System.Web.UI.Page
{
    // 用ViewState保存当前试题索引，避免回发丢失状态
    private int CurrentQuestionIndex
    {
        get { return ViewState["CurrentQuestionIndex"] != null ? (int)ViewState["CurrentQuestionIndex"] : 0; }
        set { ViewState["CurrentQuestionIndex"] = value; }
    }

    // 试题总数
    private int TotalQuestions = 3;

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

    protected void btnPrevious_Click(object sender, EventArgs e)
    {
        if (CurrentQuestionIndex > 0)
        {
            // 隐藏当前试题
            HideCurrentQuestion();
            // 索引减1
            CurrentQuestionIndex--;
            // 显示新的试题
            ShowCurrentQuestion();
            // 更新按钮状态
            UpdateButtonStates();
        }
    }

    protected void btnNext_Click(object sender, EventArgs e)
    {
        if (CurrentQuestionIndex < TotalQuestions - 1)
        {
            // 隐藏当前试题
            HideCurrentQuestion();
            // 索引加1
            CurrentQuestionIndex++;
            // 显示新的试题
            ShowCurrentQuestion();
            // 更新按钮状态
            UpdateButtonStates();
        }
    }

    // 隐藏当前显示的试题
    private void HideCurrentQuestion()
    {
        Panel currentPanel = (Panel)FindControl($"pnlQuestion{CurrentQuestionIndex + 1}");
        if (currentPanel != null)
        {
            currentPanel.Visible = false;
        }
    }

    // 显示当前索引对应的试题
    private void ShowCurrentQuestion()
    {
        Panel currentPanel = (Panel)FindControl($"pnlQuestion{CurrentQuestionIndex + 1}");
        if (currentPanel != null)
        {
            currentPanel.Visible = true;
        }
    }

    // 更新上下题按钮的启用状态
    private void UpdateButtonStates()
    {
        btnPrevious.Enabled = CurrentQuestionIndex > 0;
        btnNext.Enabled = CurrentQuestionIndex < TotalQuestions - 1;
    }

    // 你的原有答题逻辑
    protected void correct_click(object sender, EventArgs e)
    {
        // 这里保留你原来的正确答题处理逻辑
    }
}

关键说明 #

• Panel控件封装：每道题放在独立Panel中，通过Visible属性控制显示/隐藏，这是WebForms中最直接的局部内容切换方式。
• ViewState保存状态：因为WebForms是回发模型，用ViewState存储当前试题索引，确保页面回发后不会丢失当前位置。
• 按钮状态控制：通过判断当前索引是否在边界，禁用对应的上下题按钮，提升用户体验。
• 扩展性：如果后续增加试题，只需新增Panel，修改TotalQuestions的值即可，无需大幅改动逻辑。

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