|
download source code
Those of us who use Windows all know what wizards are, and whether you love them or hate them,
they've become a fixture in the modern computing landscape. For those of you who don't already know,
according to Wikipedia,
"A wizard is an interactive computer program which acts as an interface to lead a user through
a complex task, using step-by-step dialogs."
This article serves as an introduction to the ASP.NET 2.0 Wizard Control.
It starts with a brief overview and then walks you through the steps involved in
building a complete web form that utilizes a wizard to collect informatin from a user.
The ASP.NET 2.0 Wizard Control
In classic ASP and ASP.NET 1.x, if you wanted to use a wizard-like interface, you were
pretty much forced to build one on your own. In ASP.NET 2.0 Microsoft introduced
the Wizard control. The control handles all of the basic functionality
involved in navigating the user through a series of steps. The most common use is
for collecting information, but there's no rule that says that's the only thing you
can use it for. The wizard control comes in handy whenever you need to
do a number of related things in sequence.
In it's simplest form, the Wizard control itself is defined on your ASP.NET 2.0 Webform as follows:
<asp:Wizard id="myWizard" runat="server">
</asp:Wizard>
Aside from a few basic properties and a bunch of formatting attributes, there's really not much to
the Wizard control. Most of the wizard functionality actually comes from four sub-objects:
- WizardSteps - a collection of WizardStep objects each representing a step in the completion of the Wizard.
- Navigation Area - this is where the "Previous" and "Next" buttons are located.
- SideBar - an optional navigation bar that lists all the WizardSteps and allows you to move from step to step in any sequence.
- Header - a header for the Wizard that is displayed on every step.
Your First Wizard
Now that you know what a wizard is and the names of the objects we'll be working with, it's time to build
our first wizard using the ASP.NET 2.0 Wizard control. It's going to be very simple and honestly it's not
going to do very much, but it'll serve as a starting point and will begin to familiarizing you with
the elements involved.
I'm going to be building my samples using Microsoft Visual Web Developer 2005 Express Edition. While you certainly
don't need VWD 2005 in order to use the code from this article, if you are interested in getting a copy,
it's available as a free download from the
Visual Studio Express web site.
-
Load Visual Web Developer and create a new "ASP.NET Web Site" project named "Wizard".
-
Once the site is created, add a new "Web Form" named "wizard_basic.aspx"
-
If it's not already open, open the new "wizard_basic.aspx" page and switch to design view.
-
Drag a Wizard control on to the page. You'll find the Wizard control on the "Standard"
tab in the VS2005 "Toolbox".
-
Your page should now look similar to this:
-
Next, change the title of the page to "Wizard Sample - Basic"
and rename the wizard "myWizard".
-
Still in design view, make sure "Step 1" is still active and drag a Label and TextBox
control into the Wizard. Name the Label "lblName", set it's text to "Name:", and make it bold.
Change the name of the TextBox to "txtName".
Your page should look very much like the image above.
-
Next, click on "Step 2" in order to begin editing the second WizardStep.
Once again, drag a Label and TextBox onto the Wizard. This time we're going to ask for an
e-mail address instead of a name so name the Label "lblEmail", set it's text to
"E-mail:", and make it bold.
Change the name of the TextBox to "txtEmail".
When you're done your page should look something like this:
All that's left now is to do something with the data we gather when the user presses the
"Finish" button. In a real application, it would probably get stored in
a database or sent via email, but to keep things simple, I'll simply echo it back
out to the web page.
-
Add a Literal control below the wizard and name it "litFinished".
-
If you double click on the "Finish" button in the wizard, VWD will take you into source view
and will create an empty Sub called "myWizard_FinishButtonClick". Paste the
following code into the Sub.
Dim myStringBuilder As New StringBuilder()
myStringBuilder.AppendLine("<p><strong>Here's what you entered:</strong></p>")
myStringBuilder.AppendLine("<pre>")
myStringBuilder.AppendLine("<strong>Name:</strong> " & txtName.Text)
myStringBuilder.AppendLine("<strong>E-mail:</strong> " & txtEmail.Text)
myStringBuilder.AppendLine("</pre>")
myWizard.Visible = False
litFinished.Text = myStringBuilder.ToString
The code simply hides the Wizard and copies the data entered to the Literal control added in the previous step.
-
The final step is to change back to design mode and make sure that the first WizardStep
of the Wizard control is the active one. This sets the ActiveStepIndex to "0" so that
the Wizard starts on the first step when the page is run.
-
That's it. Now we run the code and this is what we get:
Once the forms are filled out and submitted the page will look something like this:
Now I know that it's not the prettiest thing around, but it's a good basic starting point.
A Better Looking Wizard
For the more advanced wizard, instead of explaining each step I'm just going to mention
the highlights, but the code in the zip file is pretty straight-forward. So here's a list
of the main changes from the simple version you just built above.
- Added a HeaderTemplate that displays the current step number out of the total number of steps.
- Added another step and a bunch more fields.
- Gave the steps more descriptive names.
- Applied the "Simple" auto formatting scheme from VWD.
And here's what this version looks like when run in IE:
Get the Code
You can download a zip file containing both samples above from
here (2.7 KB).
The code doesn't require any real setup or configuration. Just unzip the files to
a web server with ASP.NET 2.0 or later installed and they should run fine.
Conclusion
I hope this article has shown you how simple it can be to use the new ASP.NET 2.0 Wizard control
to make your multi-page forms easier to manage. Aside from building the individual WizardSteps
and processing the data when the wizard is finished, the control does most of the work for you.
And while it's outside the scope of this discussion, the controls have an set of Styles and Templates
that you can work with in order to get your pages to look exactly as you'd like.
For more information on the wizard control, you may want to read the
Wizard Control Reference
from the ASP.NET 2.0 Quickstart.
For those of you who are still running ASP.NET 1.x, you might want to check out
my ASP.NET Wizard Sample at ASP 101.
It's not as elegant as the ASP.NET 2.0 Wizard, but it gets the job done and
the way the panels are laid out actually makes converting to the Wizard quite painless.
|
