ASP.NET高级控件——Wizard控件

Wizard控件

Wizard Control

用户希望新应用程序能提供向导功能，以引导他们完成多步操作。这些用户界面都被施了魔法。抱歉，开个玩笑而已。

Wizards控件为用户提供了呈现一连串步骤的基础架构，这样可以访问所有步骤中包含的数据，并方便地进行前后导航。

与MultiView控件类似，Wizard包含一个WizardStep对象集合。如图5-3所示，WizardStep从View类继承，而且WizardStep和Wizard控件之间的关系与View和MultiView的关系类似。

图5-3：View类的层次

与MultiView控件一样，所有WizardStep中的所有控件都位于页面控件树中，且无论哪个WizardStep可见，都可以在运行时通过代码实现控件访问。当用户单击一个导航按钮或链接时，页面将被提交到服务器。但是，不支持将在第6章描述到的跨页提交。

Wizard控件负责导航，包括线性导航（从一步转到下一步或上一步）和非线性导航（从一步转到任意其他步）。该控件能够自动创建合适的按钮，例如Next，Previous以及Finish。第一步没有Previous按钮，最后一步没有Next按钮。通过设置可以使得一些步骤只能被导航一次。另外，默认情况下，Wizard控件显示一个包含导航链接的工具栏，这让用户可以从当前步骤转到其他步骤。

Wizard控件的所有外观特征几乎都可以通过样式和模板来自定义，包括各种各样的按钮和链接、标题和页脚、工具条和WizardStep。

研究Wizard控件最好的方法是去查看一个示例。在这个示例中，将创建一个奇怪的向导来引导完成早晨醒来后需要做的事。

创建一个名为WizardDemo的网站。将一个Wizard控件拖到页面上。该控件默认包含一个两步的向导。虽然两个步骤有些少，但是功能是完整的。在设计视图中，将看到两个工具条链接和一个Next按钮，如图5-4所示。

图5-4：设计视图中的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”按钮，但工具条显示了两个步骤的链接。

图5-5：默认的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

续表5-2  WizardDemo的WizardSteps

图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示例中，将看到更多的属性。

表5-3  与按钮外观无关的属性