如何在 ASP.NET webforms 上每頁只顯示一個問題

Question

我正在 Visual Studio 中使用 Webforms 開發一個項目，我正在其中構建一個測驗。 現在，我將所有問題都放在一個頁面上。 但是，我想將其轉換為一次在屏幕上顯示一個問題，並使用下一步和后退按鈕讓我在問題之間切換。

但是，我想嘗試將其保存在同一個.aspx文件中。 請讓我知道如何實現這一目標。 請看下面，看看我的代碼現在是什么樣子。 謝謝！

<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>
<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>
<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>

我不知道從哪里開始。 我嘗試研究頁面的各種框架或實例，但找不到任何實質內容，所以我轉向 Stack Overflow！

Answer 1

似乎你需要在這里使用 javascript，但也許你應該先用 div 分割文檔，比如

<div Id="Question1">
//all your question 1 stuff
</div>
<div Id="Question2">
//all your question 2 stuff
</div>
........

那么你需要通過 Id 來控制它們的顯示/隱藏Show/hide 'div' using JavaScript

如果您不知道如何在 .aspx 文件中使用 javasctipt，我發現了一個有相同問題的鏈接https://social.msdn.microsoft.com/Forums/en-US/e68d9d86-ef12-4807-9bec- a2554bf95e78/how-to-write-javascript-in-aspx-page-?forum=aspwebforms

Answer 2

這是在 webforms 中進行測驗的替代方法...您可以使用 Visual Studio 的 View\Toolbox 中的開箱即用的“向導”服務器控件。

將 Wizard 控件拖放到任何 aspx 頁面的設計表面並開始填充文本，以所見即所得的工作方式從工具箱中拖入復選框和按鈕。 使用自動套用格式快速獲得專業的外觀。 切換到源視圖以微調您的代碼。

使用向導控件是啟動和運行測驗的快速方法。

https://learn.microsoft.com/en-us/archive/msdn-magazine/2004/november/cutting-edge-the-asp-net-2-0-wizard-control

https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.wizard?view=netframework-4.8

Answer 3

如果你想使用面板，你可以這樣做：

<asp:Panel ID="Panel1" runat="server">
    <p>Question 1</p>
    <p>Text here</p>
    <p>
        <asp:Button ID="btnq1a" runat="server" OnClick="btnq1a_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="Panel2" runat="server">
    <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="btnq2d_Click" Text="All of the above" CssClass="btn btn-sm btn-default" />
    </p>
</asp:Panel>

<asp:Panel ID="Panel3" runat="server">
    <p>Question 3</p>
    <p>Text here</p>
    <p>
        <asp:Button ID="btnq3a" runat="server" OnClick="btnq3a_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>

代碼背后：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        Panel2.Visible = false;
        Panel3.Visible = false;
    }
}

protected void btnq1a_Click(object sender, EventArgs e)
{
    Panel1.Visible = false;
    Panel2.Visible = true;
}

protected void btnq2d_Click(object sender, EventArgs e)
{
    Panel2.Visible = false;
    Panel3.Visible = true;
}

protected void btnq3a_Click(object sender, EventArgs e)
{
    // finished
}