Click here to Skip to main content
Click here to Skip to main content

Using the ASP.NET 2.0 Wizard Control

, 1 Sep 2006
Rate this:
Please Sign up or sign in to vote.
How to dynamically create an ASP.NET 2.0 Wizard control and load child controls at run-time.

Introduction

This article demonstrates how to load controls and attach event handlers inside an ASP.NET 2.0 Wizard control at run-time. The demo is a simple quiz program that prompts users to enter how many questions they would like to load into the Wizard control. The number of questions entered determines the WizardSteps to create at run-time and how many set of controls to create for the Wizard control.

The demo will display an Image control that displays a flag, followed by a RadioButtonList with three choices for the user to select. When a user clicks on the Finish button, the program calculates the total correct answers. The demo is developed using ASP.NET 2.0 with data stored in a SQL Server 2005 table.

Fig. 1 below prompts the user for the number of questions to load in the Wizard control.

Fig. 2 below shows the wizard loaded with five questions. Each question (i.e., a WizardStep) is loaded with an Image control and a RadioButtonList with pre-defined choices. The image and RadioButtonList choices are stored in a SQL Server table.

The user makes the proper selection in the RadioButtonList and clicks the Next button to move onto the next WizardStep. The user can also click on the SideBar and navigate to other WizardSteps in a non-sequential manner.

Fig. 3 below shows how when the Finish button is clicked, a score is calculated by looping through prior user selections in the Wizard control.

Easy enough….now let’s talk about the code behind these screens. Fig. 1 prompts users for an input, and uses a Server.Transfer() to move to the screen in Fig. 2. In the design screen of Fig. 2, only a PlaceHolder control and a Label control are needed. The PlaceHolder control is used to host the Wizard control created at run-time. The Label control is used to display the calculated score. The following code is implemented in the Page_Load event of Fig. 2.

using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Microsoft.ApplicationBlocks.Data;
using System.ComponentModel;

public partial class TestWizardControl1 : System.Web.UI.Page
{
    string thisConnectionString = 
      ConfigurationManager.ConnectionStrings[
      "PracticeDataConnectionString"].ConnectionString;
    System.Data.DataSet thisDataSet = new System.Data.DataSet();

    protected void Page_Load(object sender, EventArgs e)
    {       
        Wizard WizardControl = new Wizard();
        WizardControl.Height = Unit.Pixel(150);
        WizardControl.Width = Unit.Pixel(200);
        WizardControl.Style["Top"] = "111px";
        WizardControl.Style["Left"] = "333px";
        WizardControl.Style["Position"] = "absolute";

        // The demo uses a Session Variable titled “HowManySteps”
        // collected from Fig. 1 to determine the size 
        // of the Wizard control at run-time. The Wizard Control has an
        // initial index of 0. Therefore, subtracting 1 from
        // the session variable is needed.

        int j = Convert.ToInt16(Session["HowManySteps"]) - 1;
        for (int i = 0; i <= j; i++)
        {
            WizardStepBase newStep = new WizardStep();
            newStep.ID = "Step" + (i + 1).ToString();
            WizardControl.WizardSteps.Add(newStep);
        }

        //Dynamically attach an EventHandler to calculate 
        //final score to the FINISH Button

        WizardControl.FinishButtonClick += new 
          WizardNavigationEventHandler(WizardControl_FinishButtonClick);
        PlaceHolder1.Controls.Add(WizardControl);

        //Create your own ad hoc query or a stored procedure 
        //to retrieve the image for the Image Control 
        //and the choices for the RadioButtonList Control. 
        //The ExecuteDataset method from the Microsoft 
        //Application Block is used here to call a 
        //stored procedure name “Wizard_Retrieve”.

        thisDataSet = SqlHelper.ExecuteDataset(
              thisConnectionString, "Wizard_Retrieve");
        for (int i = 0; i < WizardControl.WizardSteps.Count; i++)
        {

            //Use a variable (ex. A in the code below) 
            //to tabulate the Image Control and 
            //RadioButtonList Control for each WizardStep.
            //For example, WizardStep1 will
            //contain Image1 and RadioButtonList1.
            //WizardStep2 will contain Image2 and
            //RadioButtonList2 and so on.

            int A = i + 1;
            Image ImageControl = new Image();
            ImageControl.ID = "Image" + A.ToString();
            ImageControl.Width = Unit.Pixel(120);
            ImageControl.Height = Unit.Pixel(75);
            WizardControl.WizardSteps[i].Controls.Add(ImageControl);
            Image IMG = (Image)
              WizardControl.WizardSteps[i].FindControl("Image" + A.ToString());
            IMG.ImageUrl = thisDataSet.Tables[0].Rows[i][0].ToString().Trim();

            RadioButtonList RadioButtonListControl = new RadioButtonList();
            RadioButtonListControl.ID = "RadioButtonList" + A.ToString();
            WizardControl.WizardSteps[i].Controls.Add(RadioButtonListControl);
            RadioButtonList RBL = (RadioButtonList) 
              WizardControl.WizardSteps[i].FindControl(
              "RadioButtonList" + A.ToString());
            RBL.Width = Unit.Pixel(180);
            RBL.Height = Unit.Pixel(100);
            RBL.Items.Clear(); 

            //Use another loop to load the RadioButtonList 
            //options for each WizardStep
               
            for (int x = 1; x < 4; x++)
            {
                RBL = (RadioButtonList)
                  WizardControl.WizardSteps[i].FindControl(
                  "RadioButtonList" + A.ToString());
                RBL.Items.Add(new ListItem(
                  thisDataSet.Tables[0].Rows[i][x].ToString().Trim()));
            }                
            RBL.SelectedIndexChanged += new EventHandler(RBL_SelectedIndexChanged);
        }
    }

    //Create a EventHandler to process the 
    //SelectedIndexChanged event for the 
    //RadioButtonList in each WizardStep. 
    //Use a HiddenField Control to store the 
    //selected answer. Concatenate all answers into 
    //a single string. Parse the answer 
    //during the FINISH Button Click event to calculate final score.

    public void RBL_SelectedIndexChanged(object sender, EventArgs e)
    {
        RadioButtonList RBL = (RadioButtonList)sender;
        if (HiddenField1.Value != string.Empty)
        {
            HiddenField1.Value = HiddenField1.Value.ToString() + 
                                 "/" + RBL.SelectedValue.ToString();
        }
        else
        {
            //bypass initial delimiter "/" 
            HiddenField1.Value = RBL.SelectedValue.ToString();
        }        
    }

    public void WizardControl_FinishButtonClick(object sender, EventArgs e)
    {
        Wizard WZ=(Wizard)sender;
        char[] DelimiterChar = { '/' };
        string[] Answer = HiddenField1.Value.Split(DelimiterChar);

        thisDataSet = SqlHelper.ExecuteDataset(thisConnectionString, 
                                               "Wizard_Retrieve");
        int score = 0;
        for (int i = 0; i < WZ.WizardSteps.Count; i++)
        {
            if (thisDataSet.Tables[0].Rows[i][4].ToString().Trim() 
                                               == Answer[i].Trim())
            {
                score = score + 1;
            }
        }
        lblMessage.Text = "Your score is " + score.ToString() + 
                          " out of a total of " + 
                          (WZ.WizardSteps.Count).ToString();
    }
}

In short, this is just a simple demo to show a way of using the Wizard control. You will have to download the flags from the web (the CIA World Fact Book is a good source for flags), or you can type in your own quiz questions to make the demo an online survey or an online test. To further improve the above demo, you can implement the Page.RegisterHiddenField() method, along with the IPostBackDataHandler interface, and call the Page.RegisterRequiresPostBack() to show the selections in previous WizardSteps when the web page that hosts the control is posted back to the web server. Also, flag images or text questions and the RadioButtonList options can all be packaged into a resource file instead of retrieving them as records from a SQL Server table.

In the meantime, hope you enjoy the article and find the example above useful and adaptable in your programming scenario. Thanks!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

ShirleySW
Web Developer
United States United States
No Biography provided

Comments and Discussions

 
QuestionWizard Control Questions PinmemberRDayalu24-Oct-07 20:43 
Hello,
 
I am new to ASP.Net development. I learnt ASP.Net using the online videos and tutorials. I am currently working on a project where I decided to use Wizard control. I put together this form that consists of 7 steps on the wizard. When the user clicks “Finish” button, that record is saved into a database.
 
Now, the database I am using is Oracle 9i. The database itself is very simple with one table with all the fields on the form.
 
I am now learning how to create reports using ASP.Net.
 
Read the tutorials on how to use the GridView and FormView.
 
So, created a page with the FormView. In the EditTemplate, I changed the template to include the wizard control. The idea being when the user wants to edit a record, it will bring the same look and feel as they entered data into the form. (as it is 7 steps with lots of fields, displaying them all on one page made it look too messy)
 
I have come so far and now am running into some issues. I hope you will have a chance to help answer these questions of mine.
 
1. How to enable Update option on the Wizard form in the Edit mode? (getting errors when I run the page and click Update)
 
2. How to post back the value (Y/N) that’s stored in the datafield back to the Radio button options?
I have few radio groups on my form. In the edit mode, I want to show the value on the radio button as it is in the database. The values are Y for Yes and N for No.
 
3. How to have a Master Detail relationship between GridView and FormView controls?
As further enhancement to the report, I would like to display the records with just two fields in a GridView layout and have edit options next to each record. When the user clicks Edit, it should take them to a Form Layout (which has this wizard) and they should be able to update it. When they click Update or Cancel, it should bring the user back to GridView again.
Is this possible?
 

Appreciate any input and help.
 
Regards,
Rekha.

AnswerRe: Wizard Control Questions PinmemberShirleySW25-Oct-07 12:27 
Generali want quiz in asp.net using sql server Pinmemberkarthikeyan_caleb8-Apr-07 21:23 
QuestionError when I press "Next" button from Wizard PinmemberNaif_Prof25-Nov-06 10:10 
AnswerRe: Error when I press "Next" button from Wizard PinmemberShirleySW25-Nov-06 13:57 
GeneralRe: Error when I press "Next" button from Wizard Pinmembersaintsmike5-Jan-07 2:25 
GeneralRe: Error when I press "Next" button from Wizard Pinmemberaalok4318-May-07 2:14 
AnswerRe: Error when I press "Next" button from Wizard PinmemberKalyan Ganjam31-Oct-07 2:13 
Generalweb custom control for wizard in asp 2.0 PinmembershadesRulz17-Sep-06 21:57 
GeneralTable structure and stored procedures........ PinmemberShirleySW11-Sep-06 5:08 
GeneralSource Code PinmemberAjith Cyriac8-Sep-06 1:14 
AnswerRe: Source Code PinmemberShirleySW8-Sep-06 3:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140821.2 | Last Updated 1 Sep 2006
Article Copyright 2006 by ShirleySW
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid