HomeASP.NET A Demo of the Wizard Control in ASP.NET 2....
A Demo of the Wizard Control in ASP.NET 2.0
In Visual Studio 2005, Microsoft made a lot of enhancements to the earlier version. Graphically pleasing and at the same highly interactive, rich page creation became a reality. Master pages gave the same look and feel among the different pages supported by CSS, themes, skins, and so on. Navigation was never easier. This tutorial is about a new control in ASP.NET 2.0, the Wizard Control, which adds to this rich repertoire.
The Wizard Control introduced in ASP.NET 2.0 resembles the countless wizards in Microsoft technology which have become quite common in other desktop products as well. The Windows ODBC manager and the installation routines of countless software programs are just two examples. Although wizards for web pages are not that common, the Wizard Control in ASP.NET 2.0 is for web applications. One could use a wizard to collect bits and pieces of information to be consolidated into some end result. This demo, presented at a very basic level, gives you a chance to experiment with the wizard control and discuss it in our article blogs.
In the next section a brief description of the wizard is given, describing the different regions where the user can interact. The control in its minimum embodiment is fully functional, and the user can configure it to embellish the wizard with the features that are desired. In the sections that follow, a simple demo is created by modifying the basic features utilizing the event driven logic which lets the wizard deliver an end product, albeit a trivial example is presented.
To your web site add a web page, herein called WizHow.aspx. In the Standard controls in the tool box double click the Wizard Control as shown in the next picture.
This adds the wizard control to your design view of your aspx page as shown in the next picture, with Step 1 highlighted. If you click the little arrow at top left of this control, you get a drop-down detailing the wizard's tasks to be completed.
.
When you add this control to your page, the program adds the following source code to your page as shown in the next picture. It basically shows the structure of the wizard with the steps laid out.
A wizard has to complete a certain number of designed steps, and this happens in this basic, no-frills control with two ready-to-use steps. The wizard runs on the server and so do the steps. As a default, the view with Step 1 is displayed in the design area, which has just one button, the Next button. At run time, if you click on the Next button it should take you to Step 2. If you now click on the hyperlink, Step 2, your design view changes as shown in the picture below.
Now you have Previous and Finish buttons for navigation. Basically, the Wizard has two places where the user can interact, either the navigation buttons at the bottom of the wizard, or the region where the steps are located. At design time however, clicking on the navigation buttons will open the code that you need to write for them. Additionally you also have a view area shown in the next picture.
To locate the "View Area" on the wizard you may need to click inside the wizard. This area is a kind of container for other controls, as well as for some textual content which will be associated with that step. The text "Test this wiz" has been added to the view area. This is "a minimum wizard" which is functional. You may note that the page title is carried through the various steps because the page never gets changed. If you right click the Wizard control you can access its extremely feature rich properties as shown in the next picture.
We shall only choose to modify a few of them, basically the Header text and some styling. We also use the auto-format feature of the wizard as shown in the next picture. Clicking on the small backward pointing arrow at the top of the wizard control, you get the Wizard's task list, and clicking on the hyperlink Auto Format... gets you the Auto Format window, where you can choose the scheme you like. Here the scheme "classic" has been chosen.
Apart from the "View Area" (container area) there is a header section as well, but the header text is not present in the properties. However you may add the header text 'No body beats the Wiz' into the <asp:wizard/> tag as follows by adding the text as shown into the page source.
<asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0" ForeColor="#FF8080" BackColor="#EFF3FB" BorderColor="#B5C7DE" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" HeaderText="No body beats the Wiz">.
With this addition your user interface has the appearance shown in the next picture, where you can clearly see all the regions in the Wizard Control.
With this your functioning "minimum wizard" is ready for prime time. Now if you browse this page, you will see the display shown in the next picture, a composite of both Step 1 and Step 2. You may verify for yourself by clicking the various controls and hyper links.
The basic operation of the wizard presented in this demonstration tutorial consists of three steps. In Step 1, the Wizard collects the user's first name and last name. In Step 2 the wizard collects a date (perhaps the last visited date). In Step 3, it guides you to the finish, and displays a Welcome message when you hit the Finish button. This trivial example shows how this is accomplished with the Wizard Control.
The Design Features of the First Step
In the first step, called Add Name, the Wizard collects the first and last names. Hence to the view area we have added the required controls, two text boxes and their related labels. We have also added a "Header Text." Using Auto Format a style has been chosen as well. This is shown in the next picture. The controls in this step are Textbox1, Textbox2, Label3, and Label4.
Design Features of Step Two
In the second step, called Add Date, you have a calendar control and a text box. Additionally a label control showing what needs to be done on this page has been added. The UI of this page is as shown in the next picture. The controls in this step are Label5, Calendar1 and Textbox4. When you click on the calendar the date clicked is shown in the textbox.
Design Features of Step Three
In this third step there are two labels and a textbox as shown. The controls in this step are Label1, Textbox3, and Label2. The UI is as shown in the next picture. One of the labels is hard-coded.
When the page loads, Step 1 will be in view and you should make sure that Step 1 is showing in the design view before you browse the page. Here you will be entering the names and clicking the Next button. The names you enter remain in the textboxes. When you click the Next button, the wizard moves to Step 2.
In Step 2 you will click the calendar control to add a date which will remain in the textbox in Step 2. When you click on the Next button you will move to Step 3.
In Step 3 you gather up all the information, and when you click on the Finish button you will display it in Step 3's "View Area." The code for the logic followed by the steps is shown in the next paragraph.
Partial Class wiz
Inherits System.Web.UI.Page
Protected Sub Wizard1_FinishButtonClick(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) _
Handles Wizard1.FinishButtonClick
Label1.Visible = True
TextBox3.Visible = False
Label2.Visible = False
Label1.Text = "<font color='blue'>" + TextBox3.Text _
+ "</font>" + "<p></p>" + "<font color='green'>" + _
TextBox1.Text + " " + TextBox2.Text + "</font>" + _
"<br/>" + "Your last visit was on " + TextBox4.Text
End Sub
Protected Sub Wizard1_NextButtonClick(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs) _
Handles Wizard1.NextButtonClick '[logic] if this logic is omitted
the Label1's text Label
would show up
'going from step 2 to three. If e.NextStepIndex = 2 Then
Label1.Visible = False
End If '[/logic] 'The textbox3 contents are carried forward
to finish
'but it's visibility is set to false TextBox3.Visible =
False 'must be false
TextBox3.Text = "We Cordially Welcome You Back"
End Sub
Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Calendar1.SelectionChanged
TextBox4.Text = Calendar1.SelectedDate.ToShortDateString
End Sub
End Class
A couple of annotations are in the code. The Label1.text after the Finish button is clicked collects all information and presents it. Textbox4 carries the date information from Step 2, while Textbox1 and Textbox2 carry the name information from Step1. If Textbox3 is not set to false in the Finish event, then Textbox3 will show through. The steps are indexed with 0 as the start index. Also note that the UI is represented by a partial class.
Make sure that for the present template used, Step 1 is showing in the design view (note: whatever step is showing in the design view will also be the first item to be displayed when the page is browsed). Now you just browse the page, make entries as required and proceed with the steps until you finish. The following pictures show you how each of the steps are displayed.
For the sake of completeness the source code of the page is presented in the next paragraph. A major portion of the code is for the appearance of the control.
The Wizard control in VS 2005 IDE is a nifty control which can be put to use in a variety of ways. Forms that take in user info which are unwieldy can be broken up into organized blocks handled by the Wizard. User information validation can be made using validating controls. The code as presented will work correctly when you are using only the buttons, as the coding has only taken care of this in the logic. The header text could have been an item in the property page, but you may need to open the source file to add the property. This tutorial has only touched upon some bare essentials; there is a lot more to the Wizard than meets the eye.
ASP.NET 
/ 32 
ASP.NET Export to Excel and Word using VB.NET and C#
