A Demo of the Wizard Control in ASP.NET 2.0 - The Minimum Wizard
(Page 2 of 6 )
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.
Next: A Basic Demo >>
More ASP.NET Articles
More By Jayaram Krishnaswamy
/ 14 
