共用方式為


Wizard Web 伺服器控制項概觀

更新:2007 年 11 月

使用 Wizard 控制項,簡化與建置一連串表單以收集使用者輸入時的許多關聯工作。

這個主題包含:

  • 案例

  • 背景

  • 程式碼範例

  • 類別參考

案例

在 Web 開發中,使用表單來收集使用者輸入是一項很常見的工作。通常我們將一組用來完成工作的表單稱為「精靈」(Wizard)。

ASP.NET Wizard 控制項簡化許多與建置 (Build) 多個表單和收集使用者輸入相關聯的工作。Wizard 控制項提供簡單的機制,讓您能輕鬆地建置 (Build) 步驟、加入新的步驟,或是重新排序步驟。您可以建置 (Build) 線性和非線性巡覽,並自訂控制項的使用者巡覽,而不需撰寫程式碼。

回到頁首

背景

建立一系列互連表單來分解資料收集作業是一種常見的作法。這項工作可以藉由管理表單之間的巡覽、資料永續性 (Data Persistence),以及每一個步驟中的狀態管理來達成。利用 Wizard 控制項,您不需使用連續的步驟即能收集資料,這讓使用者可以自行巡覽想要的步驟,並建立較簡單的使用者經驗。身為開發人員,您不必擔心如何才能在切換頁面時仍舊保存 (Persist) 資料,因為控制項會在使用者完成各種步驟時維護狀態。

精靈步驟

Wizard 控制項會使用幾個步驟,描述使用者資料輸入中的不同區段。控制項內的每一個步驟都已指定 StepType,以指出這是開始步驟、中間步驟或完成步驟。精靈可視需要具有任何數目的中間步驟。您可以加入不同的控制項 (如 TextBoxListBox 控制項) 來收集使用者輸入。當達到 Complete 步驟時,便可以存取所有資料。下列程式碼範例會說明含有兩個步驟的 Wizard 控制項。

<asp:Wizard ID="Wizard1" Runat="server">
    <WizardSteps>
        <asp:WizardStep Runat="server" Title="Step 1">
        </asp:WizardStep>
        <asp:WizardStep Runat="server" Title="Step 2">
        </asp:WizardStep>
    </WizardSteps>
</asp:Wizard>

在每一個步驟中,您都可以加入控制項和標籤 (Label),以及接受使用者資料。Wizard 控制項將可協助您管理所要顯示的步驟,並協助您維護所收集的資料。

精靈巡覽

Wizard 控制項功能可同時提供線性和非線性巡覽功能。控制項的狀態管理讓使用者得以在步驟之間前後移動,而且只要畫面上有顯示提要欄位 (Sidebar),使用者就可以在任何一處選取個別步驟。您可以使用 StepNextButtonTextStepPreviousButtonTextFinishCompleteButtonText 屬性 (Property),在控制項的根 asp:Wizard 項目中自訂要巡覽的文字。

<asp:Wizard ID="Wizard1" Runat="server"
  StepNextButtonText=" Next >> "
  StepPreviousButtonText=" << Previous "
  FinishCompleteButtonText=" Done! ">

自訂其他精靈控制項設定

Wizard 控制項會自動顯示標題,以及控制項目前的步驟。標題是利用 HeaderText 屬性來自訂。您可以使用 HeaderTemplate 屬性來調整標題範本。

您可以藉由將 DisplayCancelButton 屬性設定為 true,選擇性地顯示取消按鈕。

Wizard 控制項的 NavigationButtonStyle 屬性提供簡單方式,將所有按鈕設定為通用樣式,同時又提供個別自訂每一個按鈕的彈性。NavigationButtonStyle 屬性會套用至所有呈現的按鈕。不過,您可以設定個別按鈕的樣式屬性來覆寫這個樣式。

巡覽範本

Wizard 控制項支援範本,讓您能利用 StartNavigationTemplateFinishNavigationTemplateStepNavigationTemplateSideBarTemplate 屬性,進一步自訂控制項介面。

精靈控制項事件

您可以使用自訂程式碼和事件,自訂 Wizard 控制項的行為。

例如,您可以在使用者按 [下一步] 按鈕時攔截所引發的 NextButtonClick 事件,然後擷取目前步驟的資料。傳遞給這個事件的 WizardNavigationEventArgs 參數包括 CurrentStepIndexNextStepIndex 屬性,讓您可根據目前步驟和下一個步驟自訂控制項的行為,或在按 [下一步] 按鈕時取消巡覽動作。

同樣地,您可以使用 PreviousButtonClickFinishButtonClick 事件,自訂 [上一頁] 和 [完成] 按鈕的行為。或者,您可以在按一下 [取消] 按鈕時,使用 CancelButtonClick 事件來執行清除作業。

回到頁首

程式碼範例

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

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

回到頁首

類別參考

下表列出與 Wizard 控制項相關的重要類別。

成員

描述

Wizard

控制項的主要類別。

WizardNavigationEventArgs

提供 Wizard 控制項中各種巡覽事件所需的資料。

WizardNavigationEventHandler

表示將處理 Wizard 控制項中巡覽事件的方法。

WizardStep

表示顯示在 Wizard 控制項中的基本步驟。

WizardStepCollection

表示 WizardStep 物件的集合,這些物件包含每個步驟的使用者介面,由網頁開發人員定義。

WizardStepType

指定 Wizard 控制項的步驟可顯示的巡覽 UI 類型。

回到頁首

請參閱

參考

CreateUserWizard