Pro ASP.NET 2.0 In CSharp 2005 (2005) [eng]

558 C H A P T E R 1 6 ■ W E B S I T E N AV I G AT I O N

DropDownList1.DataTextField = "ID"; DropDownList1.DataBind();

}

}

And here’s the code that sets the current view based on the list index:

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

MultiView1.ActiveViewIndex = DropDownList1.SelectedIndex;

}

Figure 16-2 shows the result.

Figure 16-2. Switching views with a list control

If you want to give the views more descriptive names, you simply fill the list box by hand. Just make sure the order matches the order of views.

There’s actually no need to write this code, because the MultiView includes some built-in smarts. Like some of the rich data controls, the MultiView recognizes specific command names in button controls. (A button control is any control that implements IButtonControl, including the Button, ImageButton, and LinkButton.) If you add a button control to the view that uses one of these recognized command names, the button will have some automatic functionality. Table 16-1 lists all the recognized command names. Each command name also has a corresponding static field in the MultiView class, so you can easily get the right command name if you choose to set it programmatically.

Table 16-1. Recognized Command Names for the MultiView

To try this, add this button to your first two views (remembering to change the ID for each one):

<asp:Button ID="cmdNext" runat="server" Text="Next >" CommandName="NextView" />

And add this button to your second and third views:

<asp:Button ID="cmdPrev" runat="server" Text="< Prev" CommandName="PrevView" />

Finally, make sure the drop-down list shows the correct view when you use the buttons by adding this code to handle the MultiView.ActiveViewIndexChanged event:

protected void MultiView1_ActiveViewChanged(object sender, EventArgs e)

{

DropDownList1.SelectedIndex = MultiView1.ActiveViewIndex;

}

Now you can move from view to view using the buttons (see Figure 16-3).

Figure 16-3. Switching views with recognized command names

The Wizard Control

The Wizard control is a more glamorous version of the MultiView control. It also supports showing one of several views at a time, but it includes a fair bit of built-in yet customizable behavior, including navigation buttons, a sidebar with step links, styles, and templates.

Usually, wizards represent a single task, and the user moves linearly through them, moving from the current step to the one immediately following it (or the one immediately preceding it in the case of a correction). The ASP.NET Wizard control also supports nonlinear navigation, which means it allows you to decide to ignore a step based on the information the user supplies.

Table 16-2. WizardStep Properties

The following wizard contains four steps that, taken together, represent a simple survey. The StepType adds a Complete step at the end, with a summary. The navigation buttons and sidebar links are added automatically.

<asp:Wizard ID="Wizard1" runat="server" Width="467px" BackColor="#EFF3FB" BorderColor="#B5C7DE" BorderWidth="1px"> <WizardSteps>

<asp:WizardStep ID="WizardStep1" runat="server" Title="Personal"> <h3>Personal Profile</h3>

Preferred Programming Language:

<asp:DropDownList ID="lstLanguage" runat="server"> <asp:ListItem>C#</asp:ListItem> <asp:ListItem>VB .NET</asp:ListItem> <asp:ListItem>J#</asp:ListItem> <asp:ListItem>Java</asp:ListItem> <asp:ListItem>C++</asp:ListItem> <asp:ListItem>C</asp:ListItem>

</asp:DropDownList> <br />

</asp:WizardStep>

<asp:WizardStep ID="WizardStep2" runat="server" Title="Company"> <h3>Comany Profile</h3>

Number of Employees: <asp:TextBox ID="txtEmpCount" runat="server"/> Number of Locations: <asp:TextBox ID="txtLocCount" runat="server"/>

</asp:WizardStep>

<asp:WizardStep ID="WizardStep3" runat="server" Title="Software"> <h3>Software Profile</h3>

Licenses Required:

<asp:CheckBoxList ID="lstTools" runat="server"> <asp:ListItem>Visual Studio</asp:ListItem> <asp:ListItem>Office</asp:ListItem> <asp:ListItem>Windows 2003 Server</asp:ListItem> <asp:ListItem>SQL Server 2005</asp:ListItem> <asp:ListItem>BizTalk 2004</asp:ListItem>

</asp:CheckBoxList>

</asp:WizardStep>

<asp:WizardStep ID="Complete" runat="server" Title="Complete" StepType="Complete">

562 C H A P T E R 1 6 ■ W E B S I T E N AV I G AT I O N

<br />

Thank you for completing this survey.<br /> Your products will be delivered shortly.<br />

</asp:WizardStep>

</WizardSteps>

</asp:Wizard>

Figure 16-5 shows the wizard steps.

Figure 16-5. A wizard with four steps

Unlike the MultiView control, you can see only one step at a time in Visual Studio. To choose which step you’re currently designing, select it from the smart tag, as shown in Figure 16-6. But be warned—every time you do, Visual Studio changes the Wizard.ActiveStepIndex property to the step you choose. Make sure you set this back to 0 before you run your application so it starts at the first step.

■Note Remember, when you add controls to separate steps on a wizard, they are all instantiated and persisted in view state, regardless of the current step. If you need to slim down a complex wizard, you’ll need to split it into separate pages, use the Server.Transfer() method to move from one page to the next, and tolerate a less elegant programming model.

Wizard Events

You can write the code that underpins your wizard by responding to several events (as listed in Table 16-3).

Figure 16-6. Designing a step

Table 16-3. Wizard Events

On the whole, two wizard programming models exist:

Commit-as-you-go: This makes sense if each wizard step wraps an atomic operation that can’t be reversed. For example, if you’re processing an order that involves a credit card authorization followed by a final purchase, you can’t allow the user to step back and edit the credit card number. To support this model, you set the AllowReturn property to false on some or all steps, and you respond to the ActiveStepChanged event to commit changes for each step.

Commit-at-the-end: This makes sense if each wizard step is collecting information for an operation that’s performed only at the end. For example, if you’re collecting user information and plan to generate a new account once you have all the information, you’ll probably allow a user to make changes midway through the process. You execute your code for generating the new account when the wizard is finished by reacting to the FinishButtonClick event.

564 C H A P T E R 1 6 ■ W E B S I T E N AV I G AT I O N

To implement commit-at-the-end with the current example, just respond to the FinishButtonClick event. Here’s an example that simply displays every selection in the summary:

protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)

{

StringBuilder sb = new StringBuilder(); sb.Append("<b>You chose: <br />"); sb.Append("Programming Language: "); sb.Append(lstLanguage.Text); sb.Append("<br />Total Employees: "); sb.Append(txtEmpCount.Text); sb.Append("<br />Total Locations: "); sb.Append(txtLocCount.Text); sb.Append("<br />Licenses Required: "); foreach (ListItem item in lstTools.Items)

{

if (item.Selected)

{

sb.Append(item.Text); sb.Append(" ");

}

}

sb.Append("</b>"); lblSummary.Text = sb.ToString();

}

For this to work, you must add a Label control named lblSummary to the summary step.

■Tip If you want to find out the path the user has taken through your wizard, you can use the Wizard.GetHistory() method. It returns a collection of WizardStepBase objects that have been accessed so far, arranged in reverse chronological order. That means the first item in the collection represents the previous step, the second item represents the step before that, and so on.

Wizard Styles and Templates

Without a doubt, the Wizard control’s greatest strength is the way it lets you customize its appearance. This means that if you want the basic model (a multistep process with navigation buttons and various events), you aren’t locked into the default user interface.

Depending on how radically you want to change the wizard, you have different options. For less dramatic modifications, you can set various top-level properties. For example, you can control the colors, fonts, spacing, and border style, as you can with any ASP.NET control. You can also tweak the appearance of every button. For example, to change the Next button, you can use the following properties: StepNextButtonType (use a button, link, or clickable image), StepNextButtonText (customize the text for a button or link), StepNextButtonImageUrl (set the image for an image button), and StepNextButtonStyle (use a style from a stylesheet). You can also add a header using the HeaderText property.

More control is available through styles. You can use styles to apply formatting options to various portions of the Wizard control just as you can use styles to format different parts of rich data controls such as the GridView. Table 16-4 lists all the styles you can use. As with other style-based controls, more specific style settings (such as SideBarStyle) override more general style settings (such as ControlStyle) when they conflict. Similarly, StartNextButtonStyle overrides NavigationButtonStyle on the first step.

566 C H A P T E R 1 6 ■ W E B S I T E N AV I G AT I O N

Table 16-5 shows the full list of templates.

Table 16-5. Wizard Templates

For example, here’s a header template that uses a data binding expression to show the title of the current step:

<asp:Wizard ID="Wizard1" runat="server" ...> <WizardSteps>

...

</WizardSteps>

<HeaderTemplate> <i>Header Template</i> -

<b><%= Wizard1.ActiveStep.Title %></b> <br /><br />

</HeaderTemplate>

</asp:Wizard>

You can also add the following templates to customize the navigation buttons. This example keeps the standard buttons (by declaring them explicitly) and adds a piece of italicized text so you can see when each template is being used.

<StepNavigationTemplate> <i>StepNavigationTemplate</i><br />

<asp:Button ID="StepPreviousButton" runat="server" CausesValidation="False" CommandName="MovePrevious"

Text="Previous" />

<asp:Button ID="StepNextButton" runat="server" Text="Next" CommandName="MoveNext" />

</StepNavigationTemplate>

<StartNavigationTemplate> <i>StartNavigationTemplate</i><br />

<asp:Button ID="StartNextButton" runat="server" Text="Next" CommandName="MoveNext" />

</StartNavigationTemplate>

<FinishNavigationTemplate> <i>FinishNavigationTemplate</i><br />

<asp:Button ID="FinishPreviousButton" runat="server" CausesValidation="False" Text="Previous" CommandName="MovePrevious" />

<asp:Button ID="FinishButton" runat="server" Text="Finish" CommandName="MoveComplete" />

</FinishNavigationTemplate>