逐步解說：ASP.NET Wizard 控制項的進階使用方式

發行項
10/22/2014

更新：2007 年 11 月

ASP.NET Wizard 控制項可簡化許多與建置表單和收集使用者輸入相關聯的工作。在此逐步解說中，您會使用 Wizard 控制項建立收集使用者地址資訊的表單，允許他們選擇進行或不進行電子郵件更新，然後在最後的確認步驟中將資料和選項重新展示給他們。逐步解說將說明的工作包括：

編輯精靈步驟的配置。
加入自訂精靈步驟。
以程式設計方式擷取精靈事件。
根據使用者選項分支精靈。
在完成步驟中顯示使用者資料。

必要條件

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

Microsoft Visual Web Developer。
.NET Framework。

建立網站

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

若要建立檔案系統網站

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

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

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

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

將精靈控制項加入至頁面

若要將精靈控制項加入至頁面

切換至 [設計] 檢視。
從 [工具箱] 的 [標準] 群組中，將 Wizard 控制項拖曳至頁面。

收集姓名和地址資訊

下一步，您要設定精靈的每一個步驟來收集使用者資料、對電子郵件地址進行提示，並在完成步驟中顯示所收集的資料。

首先，收集使用者的姓名、地址、城市、州/省和郵遞區號。

若要設定第一個步驟

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

您現在可以編輯步驟 1 的顯示區域。
輸入 Name。
從 [工具箱] 的 [標準] 群組中，將 [文字方塊] 控制項拖曳至文字的旁邊。
在 [屬性] 視窗中，將 [文字方塊] 控制項的 [ID] 從 TextBox1 變更為 Name。
重複此處理，加入標題和 [文字方塊] 控制項 (記得命名控制項，因為稍後您將需要參考它們) 以收集：
- Address
- City
- State
- PostalCode
儲存檔案。

加入電子郵件更新選項

在這部分的逐步解說中，您要允許使用者選擇他們是否想接收電子郵件更新。

若要加入電子郵件更新選項

按一下 [步驟 2]。
按一下 [步驟 2] 右側的可編輯區域，並輸入想要接收電子郵件更新嗎？。
在該問題下，輸入：是。
從 [工具箱] 的 [標準] 群組中，將 [選項按鈕] 控制項拖曳至文字 [是] 的旁邊。
輸入否。
將 [工具箱] 中的另一個 [選項按鈕] 拖曳至文字 [否] 旁邊的控制項。

加入收集電子郵件地址的自訂步驟

在本章節中，您要在精靈中加入收集使用者電子郵件地址的自訂步驟。稍後，您將加入程式碼以便在使用者決定不獲取電子郵件更新時略過此步驟。

加入自訂步驟以收集使用者的電子郵件

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

[WizardStep 集合編輯器] 便會出現。
在 [加入] 按鈕上的 [加入] 下拉式清單中，按一下 [精靈步驟]。
按一下 [確定]。

[精靈] 控制項隨即顯示新步驟。
按一下新步驟，將其切換至編輯模式。
在可編輯區域中，輸入 E-mail address。
從 [工具箱] 的 [標準] 群組中，將 [文字方塊] 控制項拖曳至文字 [E-mail Address] 旁邊的控制項。
在 [屬性] 中，將 [文字方塊] 控制項的 ID 變更為 EmailAddress，因為稍後您將需要在程式碼中參考它。

加入完成步驟

現在您可以加入完成步驟，該步驟會將使用者的資料重新展示給他們。

若要加入完成步驟

以滑鼠右鍵按一下 [精靈] 控制項，然後按一下 [顯示智慧標籤]。
在控制項上的 [精靈工作] 功能表中，選擇 [新增/移除精靈步驟]。

[WizardStep 集合編輯器] 便會出現。
在 [加入] 清單中，按一下 [精靈步驟]。

[屬性] (Property) 區域隨即顯示新步驟的屬性 (Attribute)。
在 [屬性] 視窗中，將 [StepType] 設定為 [完成]。
按一下 [確定]。

[精靈] 控制項隨即加入新步驟。
按一下控制項上的新步驟，然後再按新步驟右側的可編輯區域。
從 [工具箱] 的 [標準] 群組中，將 [標籤] 控制項拖曳至新步驟。
按 ENTER 建立新行。
重複五次步驟 7，將總共六個 [標籤] 控制項對應至：
- Name
- Address
- City
- Region 或 State
- Postal Code
- E-mail Address
儲存檔案。

執行精靈之前，您需要將前三個精靈步驟中使用者提供的值填入 (Populate) 完成步驟中的標籤。

加入完成步驟的程式碼

在此逐步解說中，完成步驟會顯示使用者的資料。若要確定資料會顯示，您可以程式設計方式填入步驟的標籤。若要顯示資料，請撰寫頁面之 Load 事件的程式碼。

若要加入程式碼

切換至 Default.aspx，然後在 [設計] 檢視中按兩下設計介面。

頁面的程式碼編輯器隨即開啟，並建立基本架構 Page_Load 方法。

加入下列以粗體顯示的程式碼以填入完成步驟。

Private Sub Page_Load(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Me.Load
    Label1.Text = Name.Text
    Label2.Text = Address.Text
    Label3.Text = City.Text
    Label4.Text = State.Text
    Label5.Text = PostalCode.Text
    Label6.Text = EmailAddress.Text
End Sub

void Page_Load(object sender, EventArgs e)
{
    Label1.Text = Name.Text;
    Label2.Text = Address.Text;
    Label3.Text = City.Text;
    Label4.Text = State.Text;
    Label5.Text = PostalCode.Text;
    Label6.Text = EmailAddress.Text;
}

儲存檔案。

測試精靈控制項

若要測試精靈控制項

在 [設計] 檢視中顯示 Default.aspx。
開啟控制項上的 [精靈工作] 功能表，並選取 [步驟] 下拉式清單中的 [步驟 1]。

按 CTRL+F5 執行頁面。

注意事項：
執行 [設計] 檢視中的頁面時，瀏覽器可以在目前作用中的精靈步驟上啟動，而不必在第一個步驟上啟動。啟動頁面之前，請確定精靈的 [ActiveStepIndex] 屬性在 [屬性] 視窗中設定為 0。

輸入姓名和地址資訊。
按一下 [下一步]。
選取一個電子郵件選項。

您將在稍後的逐步解說中撰寫處理電子郵件選項的程式碼。
輸入電子郵件地址。
按一下 [完成]。

輸入的資料會顯示在頁面上。

在下一章節中，您要加入所需的程式碼，以便在使用者選擇不提供電子郵件地址時略過收集電子郵件的第三個步驟。

加入略過電子郵件步驟的程式碼

現在精靈的資料收集和配置部分已完成，您將加入邏輯，以便在使用者不想接收電子郵件更新時允許使用者略過收集電子郵件地址的步驟。您可以藉由處理 Wizard 控制項的 NextButtonClick 事件來完成這項作業。處理該事件時，請先檢查精靈目前是否位於使用者進行選擇的步驟上。如果是，請檢查已選取了哪一個 RadioButton 控制項。如果使用者選取了 [否]，則進階 Wizard 控制項的 ActiveStepIndex 屬性，以略過要求使用者電子郵件地址的精靈步驟。

若要加入略過第三個步驟的程式碼

按一下 [精靈] 控制項。在 [屬性] 視窗中，輸入 [NextButtonClick] 屬性的 Wizard1_NextButtonClick，並按 ENTER。

程式碼編輯器視窗隨即開啟至程式碼後置 (Code-Behind) 頁面。

加入下列檢查正確步驟之反白顯示的程式碼，判斷選取哪一個 [選項按鈕] 控制項，以及是否略過精靈的步驟 3。

Private Sub Wizard1_NextButtonClick( ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) _     
   Handles Wizard1.NextButtonClick
   If Wizard1.ActiveStepIndex = 1 Then
       If RadioButton1.Checked Then
           ' Collect e-mail address.
           Wizard1.ActiveStepIndex = 2
       Else
           Wizard1.ActiveStepIndex = 3
       End If
   End If
End Sub

void Wizard1_NextButtonClick(object sender, 
    System.Web.UI.WebControls.WizardNavigationEventArgs e)
{
     if (Wizard1.ActiveStepIndex == 1)
     {
        if (RadioButton1.Checked)
            // Collect ee-mail address.
        {
           Wizard1.ActiveStepIndex = 2;
        } 
        else 
        {
           Wizard1.ActiveStepIndex = 3;
        }
     }
}

設定 ActiveStepIndex 屬性會使精靈直接移至指定的步驟。

儲存檔案。

測試略過步驟的功能

若要以程式設計方式測試略過精靈步驟

在 [設計] 檢視中顯示 Default.aspx。
開啟控制項上的 [精靈工作] 功能表，並選取 [步驟] 下拉式清單中的 [步驟 1]。
按 CTRL+F5 執行頁面。
輸入姓名和地址資訊。
按一下 [下一步]。
在步驟 2 中，選取 [否] 核取方塊。
按一下 [下一步]。

隨即到達完成步驟。
使用瀏覽器的上一頁按鈕回到第一步，或關閉瀏覽器並按 CTRL+F5 重新執行頁面。
在第一步中輸入姓名和地址資訊。
按一下 [下一步]。
在步驟 2 中，選取 [是] 核取方塊。
按一下 [下一步]。
隨即到達電子郵件地址收集步驟。
輸入電子郵件地址。
按一下 [下一步]。
隨即到達完成步驟。

後續步驟

Wizard 控制項可簡化收集使用者資料之表單的建立。除了此處已涵蓋的部分，您可能還有與表單相關，以及與將不同外觀及操作套用至 Wizard 控制項相關的其他問題。例如，您可能要：

覆寫 Wizard 控制項的預設文字標籤。如需詳細資訊，請參閱Wizard Web 伺服器控制項概觀。
驗證 Wizard 控制項中的使用者項目。如需詳細資訊，請參閱逐步解說：驗證 Web Form 網頁中的使用者輸入。
進一步了解有關 Wizard 控制項的基本作業。如需詳細資訊，請參閱逐步解說：建立基本 ASP.NET Wizard 控制項。

請參閱

參考

Wizard Web 伺服器控制項概觀

共用方式為