Wizard Web 伺服器控制項概觀
更新:2007 年 11 月
使用 Wizard 控制項,簡化與建置一連串表單以收集使用者輸入時的許多關聯工作。
這個主題包含:
案例
背景
程式碼範例
類別參考
案例
在 Web 開發中,使用表單來收集使用者輸入是一項很常見的工作。通常我們將一組用來完成工作的表單稱為「精靈」(Wizard)。
ASP.NET Wizard 控制項簡化許多與建置 (Build) 多個表單和收集使用者輸入相關聯的工作。Wizard 控制項提供簡單的機制,讓您能輕鬆地建置 (Build) 步驟、加入新的步驟,或是重新排序步驟。您可以建置 (Build) 線性和非線性巡覽,並自訂控制項的使用者巡覽,而不需撰寫程式碼。
回到頁首
背景
建立一系列互連表單來分解資料收集作業是一種常見的作法。這項工作可以藉由管理表單之間的巡覽、資料永續性 (Data Persistence),以及每一個步驟中的狀態管理來達成。利用 Wizard 控制項,您不需使用連續的步驟即能收集資料,這讓使用者可以自行巡覽想要的步驟,並建立較簡單的使用者經驗。身為開發人員,您不必擔心如何才能在切換頁面時仍舊保存 (Persist) 資料,因為控制項會在使用者完成各種步驟時維護狀態。
精靈步驟
Wizard 控制項會使用幾個步驟,描述使用者資料輸入中的不同區段。控制項內的每一個步驟都已指定 StepType,以指出這是開始步驟、中間步驟或完成步驟。精靈可視需要具有任何數目的中間步驟。您可以加入不同的控制項 (如 TextBox 或 ListBox 控制項) 來收集使用者輸入。當達到 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),使用者就可以在任何一處選取個別步驟。您可以使用 StepNextButtonText、StepPreviousButtonText 和 FinishCompleteButtonText 屬性 (Property),在控制項的根 asp:Wizard 項目中自訂要巡覽的文字。
<asp:Wizard ID="Wizard1" Runat="server"
StepNextButtonText=" Next >> "
StepPreviousButtonText=" << Previous "
FinishCompleteButtonText=" Done! ">
自訂其他精靈控制項設定
Wizard 控制項會自動顯示標題,以及控制項目前的步驟。標題是利用 HeaderText 屬性來自訂。您可以使用 HeaderTemplate 屬性來調整標題範本。
您可以藉由將 DisplayCancelButton 屬性設定為 true,選擇性地顯示取消按鈕。
Wizard 控制項的 NavigationButtonStyle 屬性提供簡單方式,將所有按鈕設定為通用樣式,同時又提供個別自訂每一個按鈕的彈性。NavigationButtonStyle 屬性會套用至所有呈現的按鈕。不過,您可以設定個別按鈕的樣式屬性來覆寫這個樣式。
巡覽範本
Wizard 控制項支援範本,讓您能利用 StartNavigationTemplate、FinishNavigationTemplate、StepNavigationTemplate 和 SideBarTemplate 屬性,進一步自訂控制項介面。
精靈控制項事件
您可以使用自訂程式碼和事件,自訂 Wizard 控制項的行為。
例如,您可以在使用者按 [下一步] 按鈕時攔截所引發的 NextButtonClick 事件,然後擷取目前步驟的資料。傳遞給這個事件的 WizardNavigationEventArgs 參數包括 CurrentStepIndex 和 NextStepIndex 屬性,讓您可根據目前步驟和下一個步驟自訂控制項的行為,或在按 [下一步] 按鈕時取消巡覽動作。
同樣地,您可以使用 PreviousButtonClick 和 FinishButtonClick 事件,自訂 [上一頁] 和 [完成] 按鈕的行為。或者,您可以在按一下 [取消] 按鈕時,使用 CancelButtonClick 事件來執行清除作業。
回到頁首
程式碼範例
逐步解說:ASP.NET Wizard 控制項的進階使用方式
回到頁首
類別參考
下表列出與 Wizard 控制項相關的重要類別。
成員 |
描述 |
---|---|
控制項的主要類別。 |
|
提供 Wizard 控制項中各種巡覽事件所需的資料。 |
|
表示將處理 Wizard 控制項中巡覽事件的方法。 |
|
表示顯示在 Wizard 控制項中的基本步驟。 |
|
表示 WizardStep 物件的集合,這些物件包含每個步驟的使用者介面,由網頁開發人員定義。 |
|
指定 Wizard 控制項的步驟可顯示的巡覽 UI 類型。 |
回到頁首