Wizard 控制項

  • 發行項

在網頁開發中，使用表單收集使用者輸入是一項很常見的工作。通常我們將一組用以完成工作的表單稱為精靈。ASP.NET Wizard 控制項可簡化許多與建置多重表單和收集使用者輸入相關聯的工作。Wizard 控制項可提供簡單的機制，讓您能夠輕鬆地建置步驟、新增新的步驟，或是重新排列步驟順序。您可以建置線性和非線性瀏覽，並自訂控制項的使用者瀏覽，而不需撰寫程式碼。

新增 Wizard 控制項至網頁

  1. 將 [Wizard] 控制項從 [工具箱] 工作窗格拖曳至網頁。

  2. 拖曳 [Wizard] 控制項外框側邊與底部的調整大小方塊，直到 [Wizard] 的大小符合您的需要為止。

[Wizard] 控制項由三個獨立的區域所組成：提要欄位區域、瀏覽區域與步驟區域。在 [標籤屬性] 工作窗格中，可為這些區域設定其各自的屬性，也可以設定 Wizard 的整體屬性。

如需所有 [Wizard] 控制項屬性的完整說明，請參閱 MSDN Library 的 Wizard 屬性。

Wizard 步驟

Wizard 控制項使用數個步驟，描述使用者資料輸入的不同區段。在每一個步驟中，您都可以新增控制項和標籤，以及接受使用者資料。Wizard 控制項將可協助您管理所要顯示的步驟，並協助您維護所收集的資料。

於設計步驟進行變更

  • 在 [設計] 檢視中，以滑鼠右鍵按一下 [Wizard] 控制項，再按 [顯示通用控制項工作]。
Cc295425.alert_tip(zh-tw,Expression.10).gif秘訣：

您也可以在 [設計] 檢視中按一下 [Wizard] 控制項，再按右上角的箭號 Cc295425.56557a2a-a4ef-4c47-906b-f64b8d530387(zh-tw,Expression.10).png 以顯示 [Wizard 工作] 功能表。再按一次該箭號，即可隱藏功能表。
  1. 在 [Wizard 工作] 功能表上，從 [步驟] 功能表中選取所要設計的步驟。

新增或移除步驟

  1. 在 [設計] 檢視中，以滑鼠右鍵按一下 [Wizard] 控制項，再按 [顯示通用控制項工作]。

  2. 在 [Wizard 工作] 功能表中，按一下 [新增/移除 WizardSteps]。

  3. 在 [WizardStep 集合編輯器] 對話方塊中，按一下 [新增] 按鈕。

  4. 在 [步驟屬性] 區域中，設定新步驟的 [Title] 屬性 (及其他屬性)。步驟的 [Title] 在 Wizard 的提要欄位區域中，會以連結文字顯示。

控制項內的每一個步驟皆會指定 [StepType]，以指出其為開始步驟 (StartNavigation)、中間步驟 (StepNavigation) 或完成步驟 (FinishNavigation)。您可以自訂步驟，但根據預設，StartNavigation 步驟會有 [下一步] 按鈕。StepNavigation 網頁含有 [上一步] 與 [下一步] 按鈕。FinishNavigation 步驟含有 [上一步] 與 [完成] 按鈕。精靈可視需要具有任意數目的中間步驟。您可以新增不同的控制項 (如 TextBox 控制項或 ListBox 控制項) 以收集使用者輸入。

指定步驟的 StepType

  1. 在 [設計] 檢視中，以滑鼠右鍵按一下 [Wizard] 控制項，再按 [顯示通用控制項工作]。

  2. 在 [Wizard 工作] 功能表上，從 [步驟] 功能表中選取要指定類型的步驟。

  3. 在 [Wizard 工作] 功能表中，按下列一項連結。

    • 轉換為 [StartNavigation] 範本

    • 轉換為 [StepNavigation] 範本

    • 轉換為 [FinishNavigation] 範本

Wizard 瀏覽

[Wizard] 控制項功能可同時提供線性和非線性瀏覽功能。使用者只要按一下瀏覽區域中的按鈕，即可向前與向後移動步驟，而且只要顯示了提要欄位，使用者即可使用此控制項在任何一點選取個別步驟。您可以在 [標籤屬性] 工作窗格中設定 [StepNextButtonText]、[StepPreviousButtonText] 與 [FinishCompleteButtonText] 等屬性，以自訂瀏覽的文字。

自訂 Wizard 範本

您可以更新與區域相關聯的樣式集合，以自訂 Wizard 的每個區域。例如，在 [標籤屬性] 工作窗格中的 [樣式] 群組中，可以為 Wizard 的區域自訂 [StepStyle]、[NavigationStyle] 與其他樣式集合。[Wizard] 控制項會自動顯示標題，以及控制項目前的步驟。標題是透過 [HeaderText] 屬性進行自訂。您可以使用 [HeaderTemplate] 屬性調整標題的範本，或以互動方式設計範本。

以互動方式設計範本

  1. 在 [設計] 檢視中，以滑鼠右鍵按一下 [Wizard] 控制項，再按 [顯示通用控制項工作]。

  2. 在 [Wizard 工作] 功能表上，按一下 [編輯範本]。如此會將精靈切換為 [範本編輯模式]。

  3. 在 [顯示] 下拉式清單中，選取您要編輯的範本：[Header] 範本、[SideBar] 範本、[StartNavigation] 範本、[StepNavigation] 範本或 [FinishNavigation] 範本。

  4. 新增文字或控制項或變更範本。

  5. 完成範本的設計時，請在 [Wizard 工作] 功能表中，按一下 [結束範本編輯]，以返回標準的 Wizard 設計模式。

如需有關使用 Wizard 控制項的詳細資訊，請參閱 MSDN Library 的 Wizard 網頁伺服器控制項概觀 (英文)。