Wizard控制項
用戶希望新應用程式能提供嚮導功能，以引導他們完成多步操作。這些用戶界面都被施了魔法。抱歉，開個玩笑而已。
Wizard嚮導控制項可以在各個平台下使用。
ASP .NET Wijmo平台:ComponentOne為ASP .NET Wijmo出品的Wizard控制項可以在獨立的、可操縱的頁面上顯示部分內容。它可以保存螢幕的實際使用面積，或者通過創建一系列的表格來對輸入任務進行簡化。
View類的層次
與MultiView控制項一樣，所有WizardStep中的所有控制項都位於頁面控制項樹中，且無論哪個WizardStep可見，都可以在運行時通過代碼實現控制項訪問。當用戶單擊一個導航按鈕或連結時，頁面將被提交到伺服器。但是，不支持將在第6章描述到的跨頁提交。
Wizard控制項負責導航，包括線性導航（從一步轉到下一步或上一步）和非線性導航（從一步轉到任意其他步）。該控制項能夠自動創建合適的按鈕，例如Next，Previous以及Finish。第一步沒有Previous按鈕，最後一步沒有Next按鈕。通過設定可以使得一些步驟只能被導航一次。另外，默認情況下，Wizard控制項顯示一個包含導航連結的工具列，這讓用戶可以從當前步驟轉到其他步驟。
Wizard控制項的所有外觀特徵幾乎都可以通過樣式和模板來自定義，包括各種各樣的按鈕和連結、標題和頁腳、工具條和WizardStep。
研究Wizard控制項最好的方法是去查看一個示例。在這個示例中，將創建一個奇怪的嚮導來引導完成早晨醒來後需要做的事。
創建一個名為WizardDemo的網站。將一個Wizard控制項拖到頁面上。該控制項默認包含一個兩步的嚮導。雖然兩個步驟有些少，但是功能是完整的。在設計視圖中，將看到兩個工具條連結和一個Next按鈕，
設計視圖中的Wizard控制項
查看內容檔案的源視圖，將看到與以下代碼類似的Wizard聲明：
<asp:Wizard ID=”Wizard1” runat=”server”>
<WizardSteps>
<asp:WizardStep ID=”WizardStep1” runat=”server” Title=”Step 1”>
</asp:WizardStep>
<asp:WizardStep ID=”WizardStep2” runat=”server” Title=”Step 2”>
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
<asp:Wizard>標籤的內容是一對<WizardSteps>標籤。WizardStep控制項在這些標籤中聲明。
如果運行該頁，那么將看到如圖5-5所示的頁面。因為這是第一步，所以只顯示一個“Next”按鈕，但工具條顯示了兩個步驟的連結。
默認的Wizard控制項
現在讓我們把這個示例打扮一下。單擊WizardStep的內容區域，並輸入一些文本，例如使用<h2>標籤設定標題內容為“Wake Up”，如圖5-6所示。
圖5-6：將內容添加到一個Wizard步驟
接下來，單擊Wizard控制項的智慧型標記並選擇“Add/Remove”WizardStep，此時將打開WizardStep集合編輯器，如圖5-7所示。再添加5個步驟後，總數將達到7個。為每一個步驟（包括前兩個）輸入一個標題值和ID值，如表5-2所示。
表5-2 WizardDemo的WizardSteps
ID
標 題
stpWakeUp
Step1
stpShower
Step2
stpTakeMeds
Step3
stpBrushTeeth
Step4
續表5-2 WizardDemo的WizardSteps
ID
標 題
stpGetDressed
Step5
stpEatBreakfast
Step6
stpFinish
Step7
圖5-7：WizardStep集合編輯器
儘管可以單擊智慧型標記，依次選擇每個步驟，並如同上面添加第一步一樣添加內容，但是切換到源視圖直接編輯WizardStep聲明會更容易些。完成之後，Wizard控制項的聲明看起來類似於示例5-6。
示例5-6：添加步驟後的Wizard控制項聲明
<asp:Wizard ID=”wzrdMorning” runat=”server”>
<WizardSteps>
<asp:WizardStep ID=”stpWakeUp” runat=”server” Title=”Step 1”>
<h2>Wake Up</h2>
</asp:WizardStep>
<asp:WizardStep ID=”stpShower” runat=”server” Title=”Step 2”>
<h2>Shower</h2>
</asp:WizardStep>
<asp:WizardStep ID=”stpTakeMeds” runat=”server” Title=”Step 3”>
<h2>Take Medicine</h2>
</asp:WizardStep>
<asp:WizardStep ID=”stpBrushTeeth” runat=”server” Title=”Step 4”>
<h2>Brush Teeth</h2>
</asp:WizardStep>
<asp:WizardStep ID=”stpGetDressed” runat=”server” Title=”Step 5”>
<h2>Get Dressed</h2>
</asp:WizardStep>
<asp:WizardStep ID=”stpEatBreakfast” runat=”server” Title=”Step 6”>
<h2>Eat Breakfast</h2>
</asp:WizardStep>
<asp:WizardStep ID=”stpFinish” runat=”server” Title=”Step 7”>
<h2>Out the Door</h2>
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
Wizard控制項有許多外觀和行為屬性。表5-3列出了一些除與按鈕外觀相關的屬性之外的、最重要的屬性。按鈕外觀相關的屬性在表5-4中列出。在後面的WizardDemo示例中，將看到更多的屬性。
大部分屬性是TableItemStyle類型。該類從System.Web.UI.WebControls.Style繼承，它包含用於格式化組成Wizard控制項的表格行和單元格的屬性。TableItemStyle類有許多屬性，包括BackColor、BorderColor、BorderStyle、BorderWidth、CssClass、Font、ForeColor、Height、HorizonalAlign、VerticalAlign、Width和Wrap。
當在VS2005設計視圖中設定Wizard控制項的屬性時，屬性視窗中的TableItemStyle類型的屬性旁邊會顯示一個加號。單擊這個加號展開TableItemStyle子屬性列表，如圖5-8所示。在內容檔案的Wizard控制項聲明中，以這種方式設定的屬性包含在單獨的元素中，如下面代碼段中高亮顯示的代碼。
<asp:Wizard ID=”Wizard1” runat=”server” ActiveStepIndex=”0”>
<WizardSteps>
<asp:WizardStep ID=”stpWakeUp” runat=”server” Title=”Step 1”>
<h2>
Wake Up</h2>
</asp:WizardStep>
<asp:WizardStep ID=”WizardStep2” runat=”server” Title=”Step 2”>
</asp:WizardStep>
</WizardSteps>
<HeaderStyle
BackColor=”Gray”
BorderColor=”Black”
BorderStyle=”Solid”
BorderWidth=”2px”
Font-Size=”0.9em”
ForeColor=”White”
HorizontalAlign=”Center” />
</asp:Wizard>
在源視圖中操作時，TableItemStyle類型的屬性被列出並直接嵌入到Wizard控制項聲明中，它的格式如圖5-9所示，下面的代碼段高亮顯示了嵌入式的屬性聲明。
<asp:Wizard ID=”Wizard1” runat=”server”
ActiveStepIndex=”0”
SideBarStyle-BackColor=”Yellow”
SideBarStyle-BorderStyle=”Dashed”
SideBarStyle-Font-Bold=”true”
SideBarStyle-ForeColor=”Black”>
<WizardSteps>
<asp:WizardStep ID=”stpWakeUp” runat=”server” Title=”Step 1”>
<h2>
Wake Up</h2>
</asp:WizardStep>
<asp:WizardStep ID=”WizardStep2” runat=”server” Title=”Step 2”>
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
WizardStep有一個StepType屬性，這個屬性的值是一個WizardStepType枚舉值，該枚舉在表5-5中列出。StepType默認為Auto，這時導航界面由WizardStep集合中步驟的順序決定。第一步只有一個“Next”按鈕，最後一步只有一個“Previous”按鈕，其他的StepType值是Auto的步驟包含“Previous”和“Next”兩個按鈕。
此外，可以為StepType設定一個不同的值以修改默認行為，表5-5列出了這些值。例如，把StepType設定為Complete，就可以創建一個不包含任何導航按鈕的確認頁。
WizardStep類還包含一個特別有意思的AllowReturn屬性。該屬性可以強制線性導航。設定一個步驟的AllowReturn屬性為false後，則只能導航到該步驟一次。如果DisplaySideBar屬性為true（默認值），那么將顯示側欄。雖然AllowReturn屬性設定為false的步驟仍然顯示在導航連結中，但單擊連結不會有任何反應。
提示：AllowReturn屬性只禁止用戶互動。即使該步驟的AllowRe- turn屬性已經設定為false，程式代碼也可以強制返回到一個步驟。
表5-6列出了Wizard控制項的6個事件，其中一個是ActiveStepChanged事件，在當前步驟改變時觸發該事件。另外5個事件都由單擊按鈕觸發。如表5-6所示，除了CancelButtonClick，其他的按鈕單擊事件都有一個WizardNavigationEventArgs類型的參數，它公開了3個屬性：
Cancel
Boolean類型值。如果取消連結到下一步，則該值為true。默認值為false。
CurrentStepIndex
以0開始的WizardSteps集合中當前步驟的索引值。
NextStepIndex
以0開始的將要顯示的步驟的索引值。例如，如果單擊了“Previous”按鈕，則NextStepIndex的值比CurrentStepIndex值小
現在回到WizardDemo示例。在該示例中，將套用剛才列出並討論過的多個屬性、方法和事件。
首先，為WizardStep中的每個WizardStep添加一些文本。每個步驟的內容可以包含文本和HTML，以及其他ASP.NET伺服器控制項和用戶控制項，以方便重用界面和代碼。
接下來，設定第一步的StepType屬性為Start，設定第7步的StepType屬性為Finish。設定第3步的AlowReturn屬性為false，這樣只能訪問該步驟一次。最後，再添加一個WizardStep到WizardStep集合中，並設定StepType屬性為Complete。Wizard控制項聲明中的WizardStep部分看起來類似於示例5-7，修改的代碼被高亮顯示（除了添加的文本內容）。
示例5-7：WizardSteps聲明
<WizardSteps>
<asp:WizardStep ID=”stpWakeUp” runat=”server”
Title=”Step 1”
StepType=”Start”>
<h2>Wake Up</h2>
Rise and shine sleepy head.
</asp:WizardStep>
<asp:WizardStep ID=”stpShower” runat=”server”
Title=”Step 2”>
<h2>Shower</h2>
Make it cold!
</asp:WizardStep>
<asp:WizardStep ID=”stpTakeMeds” runat=”server”
Title=”Step 3”
AllowReturn=”False”>
<h2>Take Medicine</h2>
Only do this once.
</asp:WizardStep>
<asp:WizardStep ID=”stpBrushTeeth” runat=”server”
Title=”Step 4”>
<h2>Brush Teeth</h2>
Don’t forget to floss.
</asp:WizardStep>
<asp:WizardStep ID=”stpGetDressed” runat=”server”
Title=”Step 5”>
<h2>Get Dressed</h2>
Got to look good.
</asp:WizardStep>
<asp:WizardStep ID=”stpEatBreakfast” runat=”server”
Title=”Step 6”>
<h2>Eat Breakfast</h2>
The most important meal of the day.
</asp:WizardStep>
<asp:WizardStep ID=”stpFinish” runat=”server”
Title=”Step 7”
StepType=”Finish”>
<h2>Out the Door</h2>
Meet the world!
</asp:WizardStep>
<asp:WizardStep ID=”stpComplete” runat=”server”
StepType=”Complete”
Title=”Complete”>
<h2>Complete!</h2>
Your morning routine is now complete.
</asp:WizardStep>
</WizardSteps>
示例5-8：WizardDemo中的附加控制項
<br />
Select a step:
<asp:DropDownList ID=”DropDownList1” runat=”server”
AutoPostBack=”True”
OnSelectedIndexChanged=”DropDownList1_SelectedIndexChanged” >
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
<asp:ListItem>6</asp:ListItem>
<asp:ListItem>7</asp:ListItem>
</asp:DropDownList>
<br />
<br />
Active Step:
<asp:Label ID=”lblActiveStep” runat=”server” />
<br />
ActiveStepIndex:
<asp:Label ID=”lblActiveStepIndex” runat=”server” />
<br />
StepType:
<asp:Label ID=”lblStepType” runat=”server” />
<br />
Button Info:
<asp:Label ID=”lblButtonInfo” runat=”server” />
<br />
<br />
<u>History</u>
<br />
<asp:Label ID=”lblHistory” runat=”server” />
回到“Design View”，單擊“Wizard”控制項的“Smart tag”，並選擇“Auto Format”。在方案列表中選擇一個方案。在本示例中，選擇了“Simple”方案。正如將要看到的，該操作將會自動套用許多格式化屬性。
在Wizard控制項的屬性視窗中，設定DisplayCancelButton屬性為true。
在設計視圖下選中Wizard控制項，單擊屬性視窗中的事件圖示（一個小閃電）。雙擊ActiveStepChanged旁邊的單元格以便生成該事件的事件處理程式，並以默認名稱（wzrdMorning_ActiveStepChanged）命名。以同樣的方法為CancelButtonClick創建事件處理程式。對於FinishButtonClick事件，輸入名稱Button_Click，這將會在代碼隱藏檔案中插入以該名稱命名的事件處理程式。最後，為每個NextButtonClick、PreviousButtonClick和SideBarButtonClick事件都輸入Button_Click。
切換到代碼隱藏檔案Default.aspx.cs。在檔案頂部添加如下using聲明：
using System.Collections;
這樣，不用輸入完整命名空間就可以使用ICollection對象，該對象是Wizard控制項的GetHistory方法的返回值類型。
在VS2005生成的事件處理程式的代碼框架中，添加示例5-9中高亮顯示的代碼。
示例5-9：WizardDemo中Default.aspx.cs的事件處理程式
protected void wzrdMorning_ActiveStepChanged(object sender, EventArgs e)
{
lblActiveStep.Text = wzrdMorning.ActiveStep.Title;
lblActiveStepIndex.Text = wzrdMorning.ActiveStepIndex.ToString( );
lblStepType.Text = wzrdMorning.ActiveStep.StepType.ToString( );
// 獲取歷史訪問記錄
Icollection steps = wzrdMorning.GetHistory( );
string str = “”;
foreach(WizardStep step in steps)
{
str += step.Title + “<br/>”;
}
lblHistory.Text = str;
}
protected void Button_Click(object sender, WizardNavigationEventArgs e)
{
string str = “Current Index: “ +
e.CurrentStepIndex.ToString( ) +
“. Next Step: “ + e.NextStepIndex.ToString( );
lblButtonInfo.Text = str;
}
protected void wzrdMorning_CancelButtonClick(object sender, EventArgs e)
{
lblActiveStep.Text = “”;
lblActiveStepIndex.Text = “”;
lblStepType.Text = “”;
lblButtonInfo.Text = “Canceled”;
wzrdMorning.Visible = false;
}
protected void DropDownList1_SelectedIndexChanged(object sender,
EventArgs e)
{
DropDownList ddl = (DropDownList)sender;
int index = ddl.SelectedIndex;
WizardStepBase step = wzrdMorning.WizardSteps[index];
wzrdMorning.MoveTo(step);
}
無論由用戶操作觸發還是由程式觸發，當每次改變當前步驟時，都將執行ActiveStepChanged的事件處理程式wzrdMorning_ActiveStepChanged。該方法將獲取
的3個數據填充到標籤中，並顯示已訪問步驟的歷史記錄。
第一個標籤顯示當前的活動步驟。Wizard控制項的ActiveStep屬性返回一個WizardStep對象。該對象的Title屬性可獲取活動步驟的標題。第二個標籤由ActiveStepIndex屬性值填充。由於它是整型值，所以必須將其轉換為字元串。第三個標籤顯示WizardStep類的StepType屬性，該屬性是WizardStepType類型，因此，也要轉換為一個字元串，才能賦值給TextBox的Text屬性。
然後，WizrdMorning_ActiveStepChanged方法調用Wizard類的GetHistory方法，該方法返回一個WizardStep對象的集合（準確地說，應該是WizardStepBase對象的集合，WizardStep從它繼承）。遍歷該集合併把每個步驟的Title屬性添加到稍後要賦給lblHistory標籤的字元串中。最近一次訪問的步驟索引為0，它的上一個步驟索引為1，以此類推。
除了Cancel按鈕以外，其他按鈕和連結都使用同一個事件處理程式：Button_Click。該方使用當前步驟索引和下一個步驟索引填充lblButtonInfo標籤，兩個索引值都來自事件參數的屬性。
Cancel按鈕的單擊事件處理程式wizrdMorning_CancelButtonClick，能夠清空所有標籤信息並隱藏Wizard控制項。
頁面上的DropDownList控制項可以使您轉到任何一個步驟。在它的SelectedIndex- Changed事件中，首先將sender對象轉換為DropDownList類型，然後獲取SelectedIndex屬性值。該值被用作WizardStep集合中的索引來獲取目標WizardStep對象的引用（實際上是WizardStepBase對象，WizardStep從它繼承）。調用Wizard的MoveTo方法，實現以編程方式轉到該步驟。有意思的是，它可以多次轉到一個步驟，如步驟3，它的AllowReturn屬性設定為false。
設定事件處理程式及自動套用格式後，Wizard的聲明現在看起來類似於示例5-10。
示例5-10：設定事件處理程式及自動套用格式後的Wizard聲明
<asp:Wizard ID=”wzrdMorning” runat=”server”
DisplayCancelButton=”True”
OnCancelButtonClick=”wzrdMorning_CancelButtonClick”
OnActiveStepChanged=”wzrdMorning_ActiveStepChanged”
OnFinishButtonClick=”Button_Click”
OnNextButtonClick=”Button_Click”
OnPreviousButtonClick=”Button_Click”
OnSideBarButtonClick=”Button_Click”
BackColor=”#E6E2D8” BorderColor=”#999999” BorderWidth=”1px”
Font-Names=”Verdana” Font-Size=”0.8em” >
<WizardSteps>
<!-- unchanged from Example 5-7 -- >
</WizardSteps>
<StepStyle BackColor=”#F7F6F3” BorderColor=”#E6E2D8”
BorderStyle=”Solid” BorderWidth=”2px” />
<SideBarStyle BackColor=”#1C5E55” Font-Size=”0.9em”
VerticalAlign=”Top” />
<NavigationButtonStyle BackColor=”White” BorderColor=”#C5BBAF”
BorderStyle=”Solid”
BorderWidth=”1px” Font-Names=”Verdana”
Font-Size=”0.8em” ForeColor=”#1C5E55” />
<SideBarButtonStyle ForeColor=”White” />
<HeaderStyle BackColor=”#666666” BorderColor=”#E6E2D8”
BorderStyle=”Solid” BorderWidth=”2px”
Font-Bold=”True” Font-Size=”0.9em” ForeColor=”White”
HorizontalAlign=”Center” />
</asp:Wizard>
運行該頁面並在步驟間導航，如圖5-10所示。
圖5-10：經過幾次導航後的WizardDemo
Wizard控制項是一個定義非常明確又很容易使用的控制項，它可以引導用戶輸入參數或完成一次銷售。當需要讓用戶按一組定義好的步驟操作時，Wizard控制項是最好的選擇。
