{infiniteZest}
// Articles. Tutorials. Utilities.
Home  |   Search  |   Login  
Categories Skip Navigation Links
New / All
AJAX
Apple
ASP.NET
.NET
Git
Google / Android
Python / IronPython
Miscellaneous
SQL Server
Extending Wizard Steps in CreateUserWizard
Summary
This article discusses the CreateUserWizard and looks at extending the default user interface provided by it.
 
Table of Contents

Default CreateUserWizard

Code Listing 1. The basic declarative statement for CreateUserWizard

Figure 1. The basic UI provided by the CreateUserWizard

Styling the User Interface

Code Listing 2. CreateUserWizard with Professional Style

Figure 2. CreateUserWizard with Professional Style

The WizardSteps

Customizing the Create User Step

Code Listing 3. The template for CreateUserWizardStep

Figure 3. The extended CreateUserWizard control

 

Right out of the box, ASP.NET 2.0 provides several controls to add login/membership functionality to your site very easily. You can simply drag and drop the CreateUserWizard from the Toolbox (under the Login section) to add the primary user interface for creating a user.

Default CreateUserWizard

If you simply drag and drop the CreateUserWizard on to an aspx page, you will get the following:

Code Listing 1. The basic declarative statement for CreateUserWizard

    <asp:CreateUserWizard ID="CreateUserWizard1" runat="server">
        <WizardSteps>
            <asp:CreateUserWizardStep runat="server">
            </asp:CreateUserWizardStep>
            <asp:CompleteWizardStep runat="server">
            </asp:CompleteWizardStep>
        </WizardSteps>
    </asp:CreateUserWizard>

Figure 1. The basic UI provided by the CreateUserWizard

Figure 1. The basic UI provided by the CreateUserWizard

The simple set of declarative statements shown in Listing 1 provides the UI shown in Figure 1. This itself is good enough to let the users create accounts for themselves (if you have setup the membership database in the backend).

But this simplicity masks the customization that can be done to the CreateUserWizard user interface.

Styling the User Interface

One of the first steps in customizing the look of the CreateUserWizard is to style it to fit in your web site. This can be done via the Auto Format menu item on the wizard or playing with the styles provided in the Properties window.

Code Listing 2. CreateUserWizard with Professional Style

    <asp:CreateUserWizard ID="CreateUserWizard1" runat="server" BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em">
        <WizardSteps>
            <asp:CreateUserWizardStep runat="server">
            </asp:CreateUserWizardStep>
            <asp:CompleteWizardStep runat="server">
            </asp:CompleteWizardStep>
        </WizardSteps>
        <SideBarStyle BackColor="#5D7B9D" BorderWidth="0px" Font-Size="0.9em" VerticalAlign="Top" />
        <SideBarButtonStyle BorderWidth="0px" Font-Names="Verdana" ForeColor="White" />
        <ContinueButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid"
            BorderWidth="1px" Font-Names="Verdana" ForeColor="#284775" />
        <NavigationButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid"
            BorderWidth="1px" Font-Names="Verdana" ForeColor="#284775" />
        <HeaderStyle BackColor="#5D7B9D" BorderStyle="Solid" Font-Bold="True" Font-Size="0.9em"
            ForeColor="White" HorizontalAlign="Center" />
        <CreateUserButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid"
            BorderWidth="1px" Font-Names="Verdana" ForeColor="#284775" />
        <TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <StepStyle BorderWidth="0px" />
    </asp:CreateUserWizard>

Figure 2. CreateUserWizard with Professional Style

Figure 2. CreateUserWizard with Professional Style

If you look at the Listing 2, which is generated after choosing the Professional style from the Auto Format menu item of the wizard, you see a whole bunch styles automatically created for you.

However, the WizardSteps still remains empty.

The WizardSteps

As you can see from below, the CreateUserWizard has two steps: CreateUserWizardStep and CompleteWizardStep.

        <WizardSteps>

            <asp:CreateUserWizardStep runat="server">
            </asp:CreateUserWizardStep>

            <asp:CompleteWizardStep runat="server">
            </asp:CompleteWizardStep>

        </WizardSteps>

The user interface you see so far (username, password, etc.) comes from the CreateUserWizardStep. All the user interface you see above is default, and that’s why you don’t see any additional children in between the <asp:CreateUserWizardStep> tags.

Customizing the Create User Step

Of the above two wizard steps, you would typically want to customize the CreateUserWizardStep by adding additional controls in there. For example, the default user interface does not capture the first name, last name of the user. You might want to get the company name of the user, address, etc. at the time of account creation itself.

In order to do that, you need to open up template for CreateUserWizardStep. In order to do that, click on the ‘Customize Create User Step’ menu item in the wizard menu (right in the Design Window).

After that, if you look in the Source window, you will see the full and elaborate content template for the create user wizard step.

Code Listing 3. The template for CreateUserWizardStep

<asp:CreateUserWizardStep runat="server">
    <ContentTemplate>
        <table border="0" style="font-size: 100%; font-family: Verdana">
            <tr>
                <td align="center" colspan="2" style="font-weight: bold; color: white; background-color: #5d7b9d">
                    Sign Up for Your New Account</td>
            </tr>
            <tr>
                <td align="right">
                    <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User Name:</asp:Label></td>
                <td>
                    <asp:TextBox ID="UserName" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName"
                        ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label></td>
                <td>
                    <asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password"
                        ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <asp:Label ID="ConfirmPasswordLabel" runat="server" AssociatedControlID="ConfirmPassword">Confirm Password:</asp:Label></td>
                <td>
                    <asp:TextBox ID="ConfirmPassword" runat="server" TextMode="Password"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="ConfirmPasswordRequired" runat="server" ControlToValidate="ConfirmPassword"
                        ErrorMessage="Confirm Password is required." ToolTip="Confirm Password is required."
                        ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <asp:Label ID="EmailLabel" runat="server" AssociatedControlID="Email">E-mail:</asp:Label></td>
                <td>
                    <asp:TextBox ID="Email" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="EmailRequired" runat="server" ControlToValidate="Email"
                        ErrorMessage="E-mail is required." ToolTip="E-mail is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <asp:Label ID="QuestionLabel" runat="server" AssociatedControlID="Question">Security Question:</asp:Label></td>
                <td>
                    <asp:TextBox ID="Question" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="QuestionRequired" runat="server" ControlToValidate="Question"
                        ErrorMessage="Security question is required." ToolTip="Security question is required."
                        ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <asp:Label ID="AnswerLabel" runat="server" AssociatedControlID="Answer">Security Answer:</asp:Label></td>
                <td>
                    <asp:TextBox ID="Answer" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="AnswerRequired" runat="server" ControlToValidate="Answer"
                        ErrorMessage="Security answer is required." ToolTip="Security answer is required."
                        ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td align="center" colspan="2">
                    <asp:CompareValidator ID="PasswordCompare" runat="server" ControlToCompare="Password"
                        ControlToValidate="ConfirmPassword" Display="Dynamic" ErrorMessage="The Password and Confirmation Password must match."
                        ValidationGroup="CreateUserWizard1"></asp:CompareValidator>
                </td>
            </tr>
            <tr>
                <td align="center" colspan="2" style="color: red">
                    <asp:Literal ID="ErrorMessage" runat="server" EnableViewState="False"></asp:Literal>
                </td>
            </tr>
        </table>
    </ContentTemplate>
</asp:CreateUserWizardStep>

If you look in the <ContentTemplate> element, you will notice the following:

  • Entire user interface is encompassed inside a table (so, you will see the table, tr, and td tags)
  • You have a set of Label and TextBox controls inside the above table. These controls represent the username, password, email, etc.
  • You can also see that the validation is provided via validators – you see RequiredFieldValidator for all the text boxes – meaning, by default, they all are required fields. In addition, there is a CompareValidator to compare to two password fields.

So, now you can change the above template to your heart’s content to come up with new user interface for the wizard.

Let’s say we want to keep all the fields on the wizard, but add three new ones: first name, last name, and company. So, I simply added three tr (table row) elements to the table in the content template. Each of tr elements have two td elements as shown below.

<tr>
    <td align="right">
        <asp:Label ID="FirstNameLabel" runat="server" AssociatedControlID="FirstName">First Name:</asp:Label></td>
    <td>
        <asp:TextBox ID="FirstName" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="FirstNameRequired" runat="server" ControlToValidate="FirstName"
            ErrorMessage="First Name is required." ToolTip="First Name is required." ValidationGroup="cuwCreateUser">*</asp:RequiredFieldValidator>
    </td>
</tr>

<tr>
    <td align="right">
        <asp:Label ID="LastNameLabel" runat="server" AssociatedControlID="LastName">Last Name:</asp:Label></td>
    <td>
        <asp:TextBox ID="LastName" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="LastNameRequired" runat="server" ControlToValidate="LastName"
            ErrorMessage="Last Name is required." ToolTip="Last Name is required." ValidationGroup="cuwCreateUser">*</asp:RequiredFieldValidator>
    </td>
</tr>

The labels and textboxes fit with the rest of the content template. They all have the RequiredFieldValidator controls as well.

Figure 3. The extended CreateUserWizard control

Figure 3. The extended CreateUserWizard control

As shown in Figure 3, the First Name, Last Name, and Company labels and textboxes have been added to the first step of this wizard. Here the Professional look is left as it is, but additional subheadings have been added by adding and styling those labels in the appropriate places in the table in content template (slight changes to the default as shown below):

<tr>
    <td colspan="2" style="font-weight: bold; color: white; background-color: #5d7b9d;">
        Account</td>
</tr>

Now the next step is to capture the data from these newly added controls and save it to the database. This is discussed in the following article:

Saving the Custom User Data from CreateUserWizard via Profiles

A look at what membership data is saved in the database is done in the following article:

Authentication vs Authorization

Bookmark and Share This

More Articles With Similar Tags
icon-CreateUserWizard-newuser.jpg
You have added the extra controls to the CreateUserWizard to collect additional information from the user at the time of new account creation. This article discusses how to save that extra information to the database.
icon-roles-dbdiag.jpg
This article looks at adding a role to the user that has been newly created via the CreateUserWizard.
By default SQLEXPRESS is used as the database that contains the membership information. Some thoughts in this regard.
icon-aspnet_membership_dbdiag.jpg
This article discusses the difference between authentication and authorization. It also discusses how the data required to support each of these features is stored in the database in ASP.NET 2.0 sites.
About  Contact  Privacy Policy  Site Map