Creating a Step-by-Step User Interface with the ASP.NET 2.0 Wizard Control: The Basics
By Scott Mitchell
Introduction
The wizard - a standard user interface element in desktop applications - takes the user through a series of discrete steps in order to accomplish some task. A wizard step typically includes instructions, input controls, and an interface for moving between the wizard's steps (typically Next and Previous buttons, with a Finish button at the last step). Furthermore, wizards often include different steps depending on the inputs chosen in previous steps.
Wizards have typically been the domain of desktop applications, but have recently become more prevalent in web applications.
In ASP.NET 1.x, developers who wanted to implement a wizard-like user interface would often use multiple Panel Web controls,
one for each Wizard step. As they user progressed through the wizard by hitting the Next and Previous buttons, the appropriate
Panel could be displayed (have its Visible property set to True), while the others hidden (have their Visible
properties set to False).
ASP.NET 2.0 makes creating wizard interfaces a lot less work thanks to its new Wizard control. With the Wizard control, we can define a series of Wizard steps and specify the content - static HTML and Web controls - that belongs in each step along with the function of the step, whether it's the first step, one step in the series of steps, the final step, or a summary step to appear after the wizard has completed. The Wizard control automatically includes the appropriate navigation elements for each step, remembers the values entered into the Web controls in each step, and includes a rich event model from which programmatic logic can be added to perform the desired task upon finishing the wizard (among other tasks).
In this article we'll see how to use the wizard control to break up the steps involved in inserting a record into a database, although the concepts can be extended to any multi-step task. We'll focus on the basics in this article; refer to Creating a Step-by-Step User Interface with the ASP.NET 2.0 Wizard Control: Improving and Customizing the User Experience for more advanced features of the Wizard control. Read on to learn more!
Specifying the Wizard Control's Steps
The Wizard control is useful for breaking down a complex task into a sequence of simpler steps. Each step in the Wizard control can include the following information:
- A
Title- along with each step, the Wizard control can optionally include a side bar that lists the available steps in the wizard and allows the user to quickly jump from one step to another. The title, if provided, is what appears in the side bar for the step. - A
StepType- the navigation controls displayed in each step depend upon the value of the step'sStepTypeproperty. This property can be assigned one of the following values:Start- the Start step includes just a Next buttonStep- Step steps include both a Next and Previous buttonFinish- the Finish step includes Next, Previous, and Finish buttonsComplete- the Complete step, if provided, displays a summary of the task performed after the Finish button has been clicked from the Finish step.Auto- (the default) the navigation controls rendered are automatically determined based on the index of the step itself. That is, the first step in the wizard is assumed to be the Start step, the last step the Finish step, and all other steps are considered Step steps; no step is automatically considered a Complete step (if you want a Complete step, it must be explicitly specified).
- Content - each step can be composed of static HTML and Web controls. Often, steps will include Web controls for collecting user input, which is then used to perform the desired task after the Finish button has been clicked.
WizardSteps
property. Clicking on that property will bring up the WizardStep Collection Editor, from which you can add or remove steps, reorder them,
and alter their properties.
To add content to a step, select the step from the Wizard's smart tag and then simply type in the text or add the Web controls from the Toolbox that you want to appear in the step.
The steps can also be examined and modified through the declarative syntax. The Wizard control specifies its steps through the
<WizardSteps> element, with each step implemented as an <asp:WizardStep> or
<asp:TemplatedWizardStep>. The Title and StepType properties can be specified
through attributes in the <asp:WizardStep> or <asp:TemplatedWizardStep> tags; the actual
content for the step is placed within the tags.
|
Creating a Wizard for Inserting a New Record
To illustrate how to use the Wizard control, I've whipped up a demo (which can be downloaded from the end of this article) that provides a wizard for collecting information that is, at wizard's completion, inserted into a database. In particular, this demo inserts data into an Access database that has an
Employees table; this table has the following schema:
Employees | ||
|---|---|---|
| Column | Data Type | Comments |
EmployeeID | AutoNumber | Primary Key / Auto-Increment ID value |
FirstName | Text | Required |
LastName | Text | Required |
Salary | Currency | Required |
HireDate | Date/Time | Required |
Phone | Text | Optional |
Street | Text | Optional |
City | Text | Optional |
Email | Text | Optional |
Rather than having one screen that prompts the user for all of these inputs at once, let's instead have a Wizard control where each step asks for a subset of the input values. The following screen shots illustrate this goal:
To create such an interface we need a wizard with at least three steps (one for the name information, one for salary and hire date, and one for the contact information). In addition to these three steps, let's also add an "Introduction" step that includes instructions. In the "Introduction" step, I have just text (and HTML) explaining the task about to be performed. In the other three steps, I include Web controls for collecting user input - a Calendar control for the HireDate field and TextBoxes for the other seven fields.
Let's look at the declarative syntax for this Wizard control. Since it's rather lengthy, let's first just focus on the overall structure and then dive into each step's content:
|
I've omitted virtually all style-related markup for brevity. However, I did leave in the Width="95%" setting in the
<asp:Wizard> tag. If you don't set the Width for the entire Wizard control each step's width
will be adjusted based on the content in the step. Therefore, you may want to set the Width of the Wizard control
to some explicit value, either in pixels or as a percentage of the screen width; similarly, you may want to also set the Height
property, if you also want a fixed height.
Note that for each <asp:WizardStep> I've omitted the StepType property. If you omit this property,
the StepType is determined by the ordinal index of the step. Therefore, the "Introduction" step is made a Start step,
the "Contact Information" step a Finished step, and the "Name" and "Salary & Hire Date" steps are made Step steps.
Let's look at the "Name" step's content. Here, I've added two TextBoxes (and an HTML <table> for positioning
purposes) to collect the new employee's FirstName and LastName values.
|
The other steps include the appropriate markup and Web control syntax to collect the needed input. Note that for each step
we do not need to specify the navigation controls. The appropriate Start, Next, Previous, and Finish buttons are automatically
added based on the step's StepType setting.
Accessing the Content Defined in a Wizard Step
Eventually, after the Finish button has been clicked, we'll need to process the user's input and perform the desired task (in this case, inserting a record into the
Employees table). At this point - or perhaps earlier in the Wizard life cycle -
we may want to programmatically access the values entered by the user into the user controls. This can be accomplished by
referencing the control's directly via their ID values in the code behind class, just like you would had the
controls been defined outside of the Wizard control.
In order to insert a record when the Finished button is clicked, we'll need to do one of two things:
- Write ADO.NET code that connects to the database and issues the appropriate
INSERTstatement, passing in the values entered by the user in the Web controls - Add an AccessDataSource or SqlDataSource control to the page and specify its
InsertCommandproperty. We can then use a series of<asp:ControlParameter>values in theInsertParameterscollection to read the values entered by the user and use those values in the actualINSERTstatement. With this approach the only code we have to write is one line - we must invoke the data source control'sInsert()method once the Finish button is clicked.
<asp:ControlParameter> cannot see the controls in the <asp:WizardStep> unless
it's placed within one of the <asp:WizardStep>s. I've put this control in the final step, along with the markup and
Web controls for collecting the user's contact information:
<asp:WizardStep runat="server" Title="Contact Information">
|
The Wizard Control Event Model
When the user moves from one wizard step to another, the Wizard control raises one or more events. The
ActiveStepChanged
event fires anytime one step is about to transition to another. The NextButtonClick and PreviousButtonClick
events fire when the user clicks the Next or Previous button, respectively. The FinishButtonClick event is raised
when the Finish button is clicked.
In this demo we'll only examine one of these events, FinishButtonClick. We'll create an event handler for this
event to insert the employee record. The other events are useful for performing server-side validation of user input or
implementing a non-linear workflow (for example, if, after clicking Next, the Next step depends on the user's input in this
step or a previous one).
The event handler for the FinishButtonClick event for our demo is painfully simply - we just need to invoke the
AccessDataSource control's Insert() method. At that point, the AccessDataSource control will grab the values
from the specified controls and issue the INSERT statement. After inserting the data, the event handler redirects
the user back to the site's homepage.
'This event handler fires when the user clicks Finish. We need to insert the new employee record into the database
|
In addition to this event handler, our page also includes a Page_Load event handler that sets the HireDate
Calendar control's SelectedDate property to the current date on the first page load. (You can omit this if you don't
want to Calendar to be set to the current date, by default.)
Limitations of Our Demo
Our demo has some limitations. First off, there's no input field validation. While the
FirstName field is a required
field in the database, the user may omit this value, leading to an OleDb-level exception upon attempting to insert the employee record.
This can be remedied using standard ASP.NET validation controls, which will prevent the user from moving to any other step than
the previous one if the validation controls do not report the data as being valid. Also, any additional server-side validation
checks can be performed by creating an event handler for the NextButtonClick event.
Another annoyance is that when moving from one step to another, we have to continuously click in the input field to start entering data. Ideally, moving to the next screen would automatically place the keyboard's focus in the first input control on the page. Moreover, you may notice that after entering data into the TextBoxes and hitting Enter, the wizard goes to the previous step. This is because the Previous button appears before the Next button.
In Creating a Step-by-Step User Interface with the ASP.NET 2.0 Wizard Control: Improving and Customizing the User Experience
we'll see how to overcome these shortcomings. We'll also see how to add a Complete step to the Wizard control
that shows a summary of the action performed. Additionally, we'll see how to use the <asp:TemplatedWizardStep>
control, which allows us to customize the navigation controls for a particular step, as well as how to implement custom and
non-linear progression through the Wizard's steps. (Demos that accomplish these goals are available in the download at the end of this
article.)
Conclusion
Often, it helps to break a complex step into a series of simpler ones. This is the premise behind the wizard, a standard user interface element that consists of a series of steps and Next, Previous, and Finish buttons that allow the user to progress through these steps toward accomplishing some larger goal. In an ASP.NET application we can create such a user interface using the Wizard control.
As we saw in this article, the Wizard control is made up of a number of discrete steps that include the step's title, its
StepType, and content. The StepType property dictates the type of navigation controls the step possesses;
the content for the step includes text and Web controls for processing that step. The Web controls defined within the wizard's
steps can be accessed programmatically like any other control on the page from the ASP.NET page's code-behind class, and are
commonly accessed from the event handler for the Wizard control's FinishButtonClick event.
This article touched on the basics of the Wizard control. For a look at more advanced Wizard-related topics, check out: Creating a Step-by-Step User Interface with the ASP.NET 2.0 Wizard Control: Improving and Customizing the User Experience.
Happy Programming!
Attachments
Suggested Readings
