Blogger Jeff = new Blogger

Programming and stuff in Western PA

ASP.Net Wizard Control

Have you ever had to ask a user to input a lot of information at once? Has one of your business requirements ever had you stagger your data input over a series of pages? Have you ever had a client insist on the ability to cycle through each one of those pages, and then display a summary at the end? Well then my friend, if you haven’t ever used ASP.Net’s Wizard control, then you’re missing all the fun.

What the Wizard control does is allow you to collect all the information you need in a series of steps. The control comes built in with functionality to cycle through each of your steps. In this post, we’re going to write a quick page, collecting two fields, add some form validation, and then displaying the results in a summary at the end.

First thing you need to do is add a web form to a project, and drag the Wizard control onto it. We’ll add an additional step to make our code look like:

<asp:Wizard ID="Wizard1" runat="server" >
    <WizardSteps>
        <asp:WizardStep runat="server" title="Step 1">
        </asp:WizardStep>
        <asp:WizardStep runat="server" title="Step 2">
        </asp:WizardStep>
        <asp:WizardStep runat="server" title="Summary">
        </asp:WizardStep>
    </WizardSteps>
</asp:Wizard>

What these three steps represent, of course, is a different step in our process. The Wizard control itself is derived from the View Control. We could accomplish these same steps with the View control, but would have to add a lot of what the Wizard control gives us (navigation from step to step,etc). If we run this now, we see what we get “out of the box” from our Wizard control :
Wizard Out of the Box

Let’s add the following to our code :

<asp:Wizard ID="Wizard1" runat="server" >
    <WizardSteps>
        <asp:WizardStep runat="server" title="Step 1">
            <asp:Label ID="lblFirstName" runat="server" Text="First Name" /> :
            <asp:TextBox ID="txtFirstName" runat="server" />
        </asp:WizardStep>
        <asp:WizardStep runat="server" title="Step 2">
            <asp:Label ID="lblState" runat="server" Text="State" /> :
            <asp:DropDownList ID="ddlState" runat="server">
                <asp:ListItem Text="Please select a state" Value="" />
                <asp:ListItem Text="PA" Value="PA" />
                <asp:ListItem Text="MD" Value="MD" />
                <asp:ListItem Text="DE" Value="DE" />
            </asp:DropDownList>
        </asp:WizardStep>
        <asp:WizardStep runat="server" title="Summary">
             <table border=1>
                <tr><td>First Name :</td><td><% Response.Write(txtFirstName.Text); %></td></tr>
                <tr><td>State :</td><td><% Response.Write(ddlState.SelectedValue); %></td></tr>
             </table>
        </asp:WizardStep>
    </WizardSteps>
</asp:Wizard>

This should be pretty self-explanatory, as we’ve added labels and controls to steps one and two, and then summary information to step three. If you run this, you can cycle through the steps, and the information, and get a summary at the end. You can also cycle back through and adjust the data as well. The final part missing is data validation. This too is easy to do, as all we have to do is add a validation summary control and whatever validation controls we need. We’ll do so, and adjust our now complete code to look like this :

<asp:ValidationSummary runat="server">
    </asp:ValidationSummary>
<asp:Wizard ID="Wizard1" runat="server" >

    <WizardSteps>
        <asp:WizardStep runat="server" title="Step 1">
            <asp:Label ID="lblFirstName" runat="server" Text="First Name" /> :
            <asp:TextBox ID="txtFirstName" runat="server" />
            <asp:RequiredFieldValidator ID="valFirstname" 
                runat="server" ErrorMessage="First Name is required" 
ControlToValidate="txtFirstName">*</asp:RequiredFieldValidator>
        </asp:WizardStep>
        <asp:WizardStep runat="server" title="Step 2">
            <asp:Label ID="lblState" runat="server" Text="State" /> :
            <asp:DropDownList ID="ddlState" runat="server">
                <asp:ListItem Text="Please select a state" Value="" />
                <asp:ListItem Text="PA" Value="PA" />
                <asp:ListItem Text="MD" Value="MD" />
                <asp:ListItem Text="DE" Value="DE" />
            </asp:DropDownList>
            <asp:RequiredFieldValidator ID="reqState" 
                runat="server" ErrorMessage="State is required" 
ControlToValidate="ddlState">*</asp:RequiredFieldValidator>
        </asp:WizardStep>
        <asp:WizardStep runat="server" title="Summary">
             <table border=1>
                <tr><td>First Name :</td><td><% Response.Write(txtFirstName.Text); %></td></tr>
                <tr><td>State :</td><td><% Response.Write(ddlState.SelectedValue); %></td></tr>
             </table>
        </asp:WizardStep>
    </WizardSteps>
</asp:Wizard>

Now if we try to skip to Step 2 without entering a name, we’ll see :
Wizard with validation

There you have it, a rather simple example that should get you on your way. The last part to this, once the Wizard is complete would be to save the contents to a data source.

Tags: ,

Advertisements

February 2, 2008 - Posted by | ASP.Net, C#

2 Comments »

  1. I’m not sure if I can ask something.
    I’ve got a question about the last example you posted.
    As you may know, on the Step 2 the previous button allows us to go back (Step 1) without selecting State field, but when you click the Step 1 from the side bar button, the “State is required” messsage pops up.
    So what I want to know is that is there any way to go back from Step 2 when you click the Step 1 button without any message just like the Previous button. I don’t want to make State field to not required.

    Thanks,

    Comment by Yoonsoo Kim | October 20, 2008 | Reply

  2. Oh my goodness! Awesome article dude! Thank you so much, However I am encountering difficulties with your RSS.

    I don’t understand why I cannot subscribe to it. Is
    there anyone else getting the same RSS issues?
    Anybody who knows the answer will you kindly respond?
    Thanx!!

    Comment by active acne | September 21, 2014 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: