Introduction:
ASP.NET 2.0 came out with tons of new controls.
One of the coolest control is the Wizard control which let's you input or select
your content in steps. This is an idol control if you are making a registration
page. In this article I will explain that how you can use the Wizard control to
make a registration page.
What are we going to do?
Okay we are going to make use of the Wizard
control and make a multi-step registration scenario. We are going to collect
FirstName, LastName, Email, UserName, Password and finally preview all user
entries before giving them a confirmation message.
Using the Wizard Control:
The first thing you need to do is to drag and
drop a Wizard control from the toolbox on the webform. You can use the
auto-format feature to make your control pretty. Take a look at the image below
to get a better idea:
Adding different controls to the Wizard
control:
Our next step is to add different controls to
the Wizard control. Adding controls is pretty straight forward since the only
thing you need to do is to drag and drop various controls into the area where I
wrote "You can add your controls here" (Please see the image above).
| When adding controls in the
Wizard controls it is always a good idea to add a HTML table first and then
add the controls in the table. This way your controls will be aligned
property and will look good. |
Take a look at the screen shot below where I
have added several TextBoxes to the Wizard control.
Oh! you might be wondering how does the left
side bar has changed and now displaying different headings. It is pretty simple
all you need to do is to use the Add/Remove Wizard Steps which is available by
right clicking on the Wizard control. The display side bar also allows to jump
to the steps in the wizard control. If you want to hide the side bar menu then
you can make the DisplaySideBar property of the Wizard control to
false.
What are the different StepTypes
available in the Wizard control?
Wizard control provides you with different
StepTypes which let's you configure your control in more detail. You can change
the StepType of a certain step by simply using the Add/Remove Wizard Steps which
is available by right clicking on the Wizard control.
StepTypes:
Auto: This StepType allows you to make a step
in the Wizard control and based on its position in the Wizard control it will
automatically determine what kind of the StepType it should be.
| Complete: This is a complete
step usually at the end of the Wizard. This usually displays some message
like "Thanks for registering".
Finish: A little different than complete step since it displays a "Finish"
button instead of only the message.
Start: The first step of the Wizard
control.
Step: This just represents each step.
|
Adding more steps to the Wizard control:
Let's add some more steps to the Wizard
control. This time we are going to add the steps to add the UserName and
Password and finally a preview of all the information.
And now let's see how the preview screen looks
like:
| In my opinion a preview
screen should have been added by default to the Wizard control which should
show all the information we entered in the input controls. Although the
preview feature has not been added by default but it is pretty simply to
implement. |
Adding Validation to the Wizard Control:
Adding validation is also pretty simple simply
put a validation controls inside the Wizard control and set the
ControlToValidate to the input control on which you want the validation to
occur. In my opinion I think it's a good idea to stop the user on a certain step
and ask him to fill the form instead of allowing him to go till the end and
return back to the empty fields.
| Always remember to set the
property ActiveStepIndex = 0 to ensure that the Wizard will start from the
first step. |
Please feel free to download the the source
code at the end of this article.
I hope you liked the article! happy coding.
| If you are one of the
thousands that visit GridViewGuy for your .NET articles and resources, you
might be interested in making a donation. Extra cash helps pay for the
hosting services and speed things up
around here, and makes this website possible.
Make a Donation
Once, again thank you very much and
remember its because of you FINE people that this website
is up and running. |
|
Export Button is a custom control that let's you export your
DataGrid or TextBox data to several different formats. The
control is extremely easy to use and also exposes design time features. In
this article I will discuss some of the features of the Export Button and
how it benefits the developer.
BUY IT
NOW |