逐步解說：建立基本 ASP.NET Wizard 控制項

更新：2007 年 11 月

建置用於收集使用者資料的一系列表單是開發網站的一般工作。ASP.NET Wizard 控制項會藉由提供可讓您輕鬆建置步驟、加入新步驟或重新排序步驟的機制，簡化與建置表單和收集使用者輸入相關的眾多工作。在這個逐步解說中，您將使用 ASP.NET Wizard 控制項將資料收集簡化為一系列獨立的步驟，而無需撰寫程式碼或在表單步驟間保存使用者資料。您將建立收集使用者名稱和電子郵件地址之後在完成步驟中向使用者顯示的簡單精靈。逐步解說將說明的工作包括：

將 Wizard 控制項加入網頁。
將控制項和文字加入精靈步驟。
在步驟間存取精靈的資料。

必要條件

若要完成這個逐步解說，您必須要有：

Visual Studio 或 Visual Web Developer。

建立網站

如果您已建立好網站 (例如，藉由遵循逐步解說：在 Visual Web Developer 中建立基本 Web 網頁中的步驟)，則可使用該網站，並跳至本逐步解說稍後的「加入精靈控制項」。否則，依照下列這些步驟建立新的網站和 Web 網頁。

若要建立檔案系統網站

開啟 Visual Web Developer (或 Visual Studio)。
在 [檔案] 功能表上，按一下 [新網站]。

[新網站] 對話方塊隨即出現。
請在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。
在 [位置] 方塊中，輸入您想要用來保存網站頁面的資料夾名稱。

例如，輸入資料夾名稱 C:\WebSites。
在 [語言] 清單中，請按一下您想要操作的程式語言。
按一下 [確定]。

Visual Web Developer 會建立資料夾和命名為 Default.aspx 的新頁面。

加入精靈控制項

若要加入精靈控制項

將 Default.aspx 切換至 [設計] 檢視。
在 [工具箱] 的 [標準] 索引標籤中，將 Wizard 控制項拖曳至頁面上。

控制項隨即出現，且已有兩個預設步驟就位。按一下步驟會可讓您編輯在該步驟期間顯示的文字和控制項。

編輯精靈步驟

將 Wizard 控制項拖曳至網頁時，它預設會顯示兩個預先定義的步驟。在此逐步解說中，您將編輯這兩個步驟，並加入顯示頭兩個步驟之結果的完成步驟：使用者名稱和電子郵件地址。

若要編輯第一個精靈步驟

拖曳 [精靈] 控制項邊緣處的其中一個控點，將控制項放大至其預設大小的兩倍。
按一下 [Wizard] 控制項中加上底線的文字 [步驟 1]。
按一下 [Wizard] 控制項的編輯區域。

您現在可以編輯步驟的顯示區域。
輸入名稱：。
將 TextBox 控制項拖曳至精靈的現用區域，就在您剛輸入的文字旁邊。

您現在可以編輯第二個步驟，以收集使用者的電子郵件地址。

若要編輯第二個精靈步驟

按一下 [Wizard] 控制項中的 [步驟 2]。
按一下 [Wizard] 控制項的編輯區域。
輸入電子郵件：。
將 TextBox 控制項拖曳至精靈的現用區域，就在電子郵件標籤 (Label) 旁邊。
儲存檔案。

加入完成步驟

您現在會建立充當精靈之結束點的完成步驟。Complete 步驟沒有巡覽選項。

若要加入完成步驟

以滑鼠右鍵按一下 [Wizard] 控制項。
選擇 [顯示智慧標籤]。
在 [精靈工作] 對話方塊中，選擇 [新增/移除精靈步驟]。

[WizardStep 集合編輯器] 便會出現。
從 [加入] 按鈕的 [加入] 下拉式清單中，選取 [精靈步驟]。

[屬性] 區域現在會顯示新步驟。
將 [Title] 屬性設為 Finished。
將 [StepType] 屬性設為 [Complete]。
按一下 [確定]。

現在您可以編輯新的完成步驟。在這個逐步解說中，請設定完成步驟，以顯示使用者在之前步驟中輸入的資料。

若要編輯完成步驟

以滑鼠右鍵按一下 [Wizard] 控制項，並選擇 [顯示智慧標籤]。
在 [精靈工作] 對話方塊中，使用 [步驟] 下拉式清單選擇 [Finished] 步驟。

注意事項：

下拉式清單中的名稱將成為您在建立步驟為步驟提供的名稱，本範例中是 Finished。
將 Label 控制項拖曳至精靈，同時保留 Label1 的預設名稱。
將另一個 Label 控制項拖曳至精靈，同時保留 Label2 的預設名稱。
儲存檔案。

注意事項：
下拉式清單中的名稱將成為您在建立步驟為步驟提供的名稱，本範例中是 Finished。

完成步驟將顯示使用者所輸入的資料。使用網頁的 Load 事件，將來自頭兩個步驟的值指派給您加入至完成步驟的標籤。

若要顯示使用者的資料

返回 Default.aspx，並在 [設計] 檢視中按兩下設計介面。

網頁現在會包含為您截取的 Page_Load 方法。

加入下列以粗體顯示的程式碼。

Private Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) _
        Handles Me.Load
    Label1.Text = TextBox1.Text    Label2.Text = TextBox2.Text
End Sub

void Page_Load(Object sender, System.EventArgs e)
{
    Label1.Text = TextBox1.Text;    Label2.Text = TextBox2.Text;
}

儲存檔案。

測試精靈控制項

現在您可以測試 Wizard 控制項。

若要測試精靈控制項

在 [設計] 檢視中檢視 Default.aspx。
顯示控制項上的 [精靈工作] 功能表，並從 [步驟] 下拉式清單中選取 [步驟 1]。
按一下 [Wizard] 控制項，然後按 CTRL+F5。
在 [步驟 1] 的名稱 [TextBox] 控制項中輸入名稱。
按一下 [下一步]。
在 [步驟 2] 的電子郵件 [TextBox] 控制項中輸入電子郵件地址。
按一下 [完成]。

您的資料隨即顯示。

後續步驟

Wizard 控制項可簡化收集使用者資料之表單的建立。除了此處所述內容，您可能還有其他與使用者資料收集和表單使用相關的問題。例如，您可能要：

了解使用 Forms 驗證使用者。如需詳細資訊，請參閱 HOW TO：實作簡單表格驗證。
使用主題增強精靈的外觀。如需詳細資訊，請參閱ASP.NET 佈景主題和面板概觀。
獲得 Wizard 控制項的概觀。如需詳細資訊，請參閱Wizard Web 伺服器控制項概觀。

請參閱

參考

Wizard Web 伺服器控制項概觀

Last updated on 2014-10-22

共用方式為