This is part two in a two part series on customizing the ASP.NET CreateUserWizard control.  To read part one, click here.

So far we've gotten the control built and we're able to create a user.  That's great, but for practical uses, we need to get a little bit more information about the user.

We're going to customize the <asp:CreateUserWizard/> control, using ASP.NET Profile provider and gather the users' name and address.  Let's look at the code:

[REMAINDER OF THIS POST WILL BE PUBLISHED SOON] 

UPDATE (6/22/2009): We appologize for the delay in updating this post

After re-evaluating the customizations we needed to perform in order to get the <asp:CreateUserWizard/> control to perform as we required, we have decided to abandon the use of this control for this project altogehter. 

We recognize the extream usefulness of this control in most scenarios, however, our requirements for the control are not currently supported by this control.  In the future we may choose to  post an additional tutorial for customizing the wizard steps involved for this control, and we will link this tutorial with part one.  For now this tutorial is closed. 

Sorry for the inconvenience.

The <asp:CreateUserWizard /> control is another ASP.NET 2.0 feature that allows a web developer to quickly build a user registration form.

There are several ways to customize this control.  The default settings are shown here.  This article will cover how to customize both the opperation and the style of this control. 

 First, let's look at the code used to build this, and the web.config settings:

<asp:CreateUserWizard id="CreateUserWizard1" runat="server">
    <wizardSteps>
        <asp:CreateUserWizardStep id="CreateUserWizardStep1" runat="server">
        </asp:CreateUserWizardStep>
        <asp:CompleteWizardStep id="CompleteWizardStep1" runat="server">
        </asp:CompleteWizardStep>
    </wizardSteps>
</asp:CreateUserWizard> 

<membership defaultProvider="AspNetSqlMembershipProvider">
    <providers>
    <clear />
    <add name="AspNetSqlMembershipProvider"
       connectionStringName="connectionString"
       enablePasswordRetrieval="true"
       enablePasswordReset="true"
       requiresQuestionAndAnswer="true"
       applicationName="XeroOne"
       requiresUniqueEmail="true"
       passwordFormat="Hashed"
       maxInvalidPasswordAttempts="5"
       minRequiredPasswordLength="6"
       minRequiredNonalphanumericCharacters="0"
       passwordAttemptWindow="10"
       passwordStrengthRegularExpression=""
       type="System.Web.Security.SqlMembershipProvider"/>
  </providers>
</membership>

If you're not planning on allowing the user's to reset their own passwords, or to use an "I forgot" function, then you won't need to ask for a security question and answer.  These fields are easily removed by changing the web.config settings.

enablePasswordRetrieval="false"
enablePasswordReset="false"
requiresQuestionAndAnswer="false"

You can also force the users to create a strong password by requiring a specific number of symbols in the password (minRequiredNonalphanumericCharacters), or optionally use a regular expression (passwordStrengthRegularExpression) to specify the user must enter at least one uppercase letter, one number, and one symbol.

Next, let's make this control blend in a little better with our site's theme, and change some of the messages.

<asp:CreateUserWizard id="CreateUserWizard1" runat="server"
         invalidPasswordErrorMessage="Password must be at least 6 characters.">
     <titleTextStyle CssClass="wizardTitle" />
     <labelStyle CssClass="wizardLabel" />
     <continueButtonStyle CssClass="wizardButton" />
     <createUserButtonStyle CssClass="wizardButton" />
     <wizardSteps>
         <asp:CreateUserWizardStep id="CreateUserWizardStep1" runat="server" 
              title="Create a new user account"> 
         </asp:CreateUserWizardStep>
         <asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server">
         </asp:CompleteWizardStep>
    </wizardSteps>
</asp:CreateUserWizard> 

I'm not forcing my users to register a strong password, so telling them they have to enter 0 alphanumeric characters seemed pointless. Use the InvalidPasswordErrorMessage property to change the message displayed to the user when their password doesn't meet your criteria. I also changed the title that instructs the user what they are doing usng the CreateUserWizardStep's Title property.

I'm also using my style sheet to define how to display the title, the label that is next to each textbox, and the create user and continue buttons.  You haven't seen the continue button yet because it is the second step in the create user process.  The options are limitless with CSS, but in this example, I changed the text color, made the title bold, left aligned the label text, and added a background image to my button.

There are plenty of other options that allow you to change the text, messages, and styles of the rest of the control, but these are the ones I find myself changing most often.

Part 2 of this tutorial will go over creating additional fields and using the ASP.NET Profile provider.  

Read Part 2: Customizing the ASP.NET CreateUserWizard Control >