Partager via

How to: Customize the ASP.NET CreateUserWizard Control

  • Article

You can customize the contents of the CreateUserWizard control using the CreateUserWizardStep and CompleteWizardStep templates. By specifying the contents of the templates, you can specify your own custom user interface (UI) that includes controls that the CreateUserWizard control uses to gather information about the new user, as well as additional controls that you specify (for a list of the controls that the CreateUserWizard control uses, see Customizing the Appearance of ASP.NET Login Controls.)

Additionally, because the CreateUserWizard control inherits from the Wizard class, you can add your own custom steps to the CreateUserWizard control. For more information on the Wizard control, see Wizard Web Server Control Overview.

Note

You can also customize the appearance of the CreateUserWizard control using themes and style properties. For details, see ASP.NET Themes and Skins and the properties of the CreateUserWizard control.

To customize the CreateUserWizard steps

  1. Place a CreateUserWizard control on your page using the following syntax.

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

  2. To customize the user account creation step, create a <ContentTemplate> element within the <asp:CreateUserWizardStep> element. Inside the template, add markup and controls to define the layout and content of the UI for gathering the user information you need.

    Note

    If your membership provider extends the MembershipProvider class with custom members, you must add any controls to gather custom information required by your membership provider for creating a new user. For details, see CreateUserWizardStep.

    The following code example shows a CreateUserStep property that includes CheckBox controls that enable users to specify additional options.

    <asp:CreateUserWizardStep ID="CreateUserWizardStep1" 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>

        <asp:CheckBox ID="SubscribeCheckBox" runat="server" Checked="True" Text="Send me a monthly newsletter." />
        <br />
        <asp:CheckBox ID="ShareInfoCheckBox" runat="server" Checked="True" Text="Share my information with partner sites." />
    </ContentTemplate>
</asp:CreateUserWizardStep>

    <asp:CreateUserWizardStep ID="CreateUserWizardStep1" 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>

        <asp:CheckBox ID="SubscribeCheckBox" runat="server" Checked="True" Text="Send me a monthly newsletter." />
        <br />
        <asp:CheckBox ID="ShareInfoCheckBox" runat="server" Checked="True" Text="Share my information with partner sites." />
    </ContentTemplate>
</asp:CreateUserWizardStep>

  3. To customize the completion step, create a <ContentTemplate> element within the <asp:CompleteWizardStep> element. Inside the template, add markup and controls to define the layout and content of the UI for displaying a confirmation message and optionally allowing the user to navigate to continue. (You must provide the controls to gather the information required by your membership provider for creating a new user account. For details, see CompleteWizardStep.)

    The following code example shows a CompleteStep property that references the CheckBox controls from the previous example.

    <asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server">
    <ContentTemplate>
        <table border="0" style="font-size: 100%; font-family: Verdana" id="TABLE1" >
            <tr>
                <td align="center" colspan="2" style="font-weight: bold; color: white; background-color: #5d7b9d; height: 18px;">
                    Complete</td>
            </tr>
            <tr>
                <td>
                    Your account has been successfully created.<br />
                    <br />
                    <asp:Label ID="SubscribeLabel" runat="server" Text="You have elected to receive our monthly newsletter."></asp:Label><br />
                    <br />
                    <asp:Label ID="ShareInfoLabel" runat="server" Text="You have elected to share your information with partner sites."></asp:Label></td>
            </tr>
            <tr>
                <td align="right" colspan="2">
                    &nbsp;<asp:Button ID="ContinueButton" runat="server" BackColor="#FFFBFF" BorderColor="#CCCCCC"
                        BorderStyle="Solid" BorderWidth="1px" CausesValidation="False" CommandName="Continue"
                        Font-Names="Verdana" ForeColor="#284775" Text="Continue" ValidationGroup="CreateUserWizard1" />
                </td>
            </tr>
        </table>

    </ContentTemplate>
</asp:CompleteWizardStep>

    <asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server">
    <ContentTemplate>
        <table border="0" style="font-size: 100%; font-family: Verdana" id="TABLE1" >
            <tr>
                <td align="center" colspan="2" style="font-weight: bold; color: white; background-color: #5d7b9d; height: 18px;">
                    Complete</td>
            </tr>
            <tr>
                <td>
                    Your account has been successfully created.<br />
                    <br />
                    <asp:Label ID="SubscribeLabel" runat="server" Text="You have elected to receive our monthly newsletter."></asp:Label><br />
                    <br />
                    <asp:Label ID="ShareInfoLabel" runat="server" Text="You have elected to share your information with partner sites."></asp:Label></td>
            </tr>
            <tr>
                <td align="right" colspan="2">
                    &nbsp;<asp:Button ID="ContinueButton" runat="server" BackColor="#FFFBFF" BorderColor="#CCCCCC"
                        BorderStyle="Solid" BorderWidth="1px" CausesValidation="False" CommandName="Continue"
                        Font-Names="Verdana" ForeColor="#284775" Text="Continue" ValidationGroup="CreateUserWizard1" />
                </td>
            </tr>
        </table>

    </ContentTemplate>
</asp:CompleteWizardStep>

  4. Add code to reference the additional controls. For example, handling the CreatingUser event enables you to enter code to gather, verify, and modify information before a new user account is created.

    The following code example shows a handler for the CreatedUser event that references the CheckBox controls from the previous examples and adds them to the Comment property of the newly created user account. You will need to add an OnCreatedUser attribute to the CreateUserWizard control on your page that references the handler for the CreatedUser event (for example, OnCreatedUser="CreateUserWizard1_CreatedUser".)

    Protected Sub CreateUserWizard1_CreatedUser(ByVal sender As Object, ByVal e As EventArgs)
    ' Determine the checkbox values.
    Dim subscribeCheckBox As CheckBox = _
      CType(CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("SubscribeCheckBox"), CheckBox)
    Dim shareInfoCheckBox As CheckBox = _
      CType(CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("ShareInfoCheckBox"), CheckBox)
    Dim userNameTextBox As TextBox = _
      CType(CreateUserWizardStep1.ContentTemplateContainer.FindControl("UserName"), TextBox)


    Dim user As MembershipUser = Membership.GetUser(userNameTextBox.Text)
    User.Comment = "Subscribe=" & subscribeCheckBox.Checked.ToString() & "&" & _
                   "ShareInfo=" & shareInfoCheckBox.Checked.ToString()
    Membership.UpdateUser(user)

    ' Show or hide the labels based on the checkbox values.
    Dim subscribeLabel As Label = _
      CType(CreateUserWizard1.CompleteStep.ContentTemplateContainer.FindControl("SubscribeLabel"), Label)
    Dim shareInfoLabel As Label = _
      CType(CreateUserWizard1.CompleteStep.ContentTemplateContainer.FindControl("ShareInfoLabel"), Label)

    subscribeLabel.Visible = subscribeCheckBox.Checked
    shareInfoLabel.Visible = shareInfoCheckBox.Checked
End Sub

    protected void CreateUserWizard1_CreatedUser(object sender, EventArgs e)
{
  // Determine the checkbox values.
  CheckBox subscribeCheckBox = 
    (CheckBox)CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("SubscribeCheckBox");
  CheckBox shareInfoCheckBox =
    (CheckBox)CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("ShareInfoCheckBox");
  TextBox userNameTextBox = 
    (TextBox)CreateUserWizardStep1.ContentTemplateContainer.FindControl("UserName");

  MembershipUser user = Membership.GetUser(userNameTextBox.Text);
  user.Comment = "Subscribe=" + subscribeCheckBox.Checked.ToString() + "&" +
                 "ShareInfo=" + shareInfoCheckBox.Checked.ToString();
  Membership.UpdateUser(user);

  // Show or hide the labels based on the checkbox values.
  Label subscribeLabel = 
    (Label)CreateUserWizard1.CompleteStep.ContentTemplateContainer.FindControl("SubscribeLabel");
  Label shareInfoLabel =
    (Label)CreateUserWizard1.CompleteStep.ContentTemplateContainer.FindControl("ShareInfoLabel");

  subscribeLabel.Visible = subscribeCheckBox.Checked;
  shareInfoLabel.Visible = shareInfoCheckBox.Checked;
}

To add a wizard step

  1. Add an <asp:WizardStep> element to the <WizardSteps> section of the CreateUserWizard control. Include any controls and markup in the additional wizard step that your customized CreateUserWizard control will use.

    For example, the following code example shows a step to be added before the CreateUserStep of the CreateUserWizard control that includes a textbox control for users to enter a user name. The user name will be checked to ensure that it does not already exist in the membership database.

    <asp:WizardStep ID="CreateUserWizardStep0" runat="server">
     <table border="0" style="font-size: 100%; font-family: Verdana" id="TABLE1" >
          <tr>
              <td align="center" colspan="2" style="font-weight: bold; color: white; background-color: #5d7b9d">
                  Select an Account Name</td>
          </tr>
          <tr>
              <td>
                <asp:Label ID="AccountNameLabel" runat="server" AssociatedControlID="SearchAccount" > 
                  Account Name:</asp:Label>
                <asp:TextBox ID="SearchAccount" runat="server"></asp:TextBox><br />
                <asp:Label ID="SearchAccountMessage" runat="server" ForeColor="red" />                                          
              </td>
          </tr>
      </table>

 </asp:WizardStep>

    <asp:WizardStep ID="CreateUserWizardStep0" runat="server">
     <table border="0" style="font-size: 100%; font-family: Verdana" id="TABLE1" >
          <tr>
              <td align="center" colspan="2" style="font-weight: bold; color: white; background-color: #5d7b9d">
                  Select an Account Name</td>
          </tr>
          <tr>
              <td>
                <asp:Label ID="AccountNameLabel" runat="server" AssociatedControlID="SearchAccount" > 
                  Account Name:</asp:Label>
                <asp:TextBox ID="SearchAccount" runat="server"></asp:TextBox><br />
                <asp:Label ID="SearchAccountMessage" runat="server" ForeColor="red" />                                          
              </td>
          </tr>
      </table>

 </asp:WizardStep>

  2. Add code for your wizard step. You can handle the NextButtonClick event of the Wizard control to execute your code. The CurrentStepIndex property value indicates which additional wizard step raised the NextButtonClick event by the step index number (starting from 0 for the first step).

    The following code example shows a handler for the NextButtonClick event that takes the user name entered in the TextBox control in the wizard step from the previous code example and verifies that the user name is not blank and does not currently exist in the membership database. You will need to add an OnNextButtonClick attribute to the CreateUserWizard control on your page that references the handler for the NextButtonClick event handler (for example, OnNextButtonClick="CreateUserWizard1_NextButtonClick".)

    Private Function UserExists(ByVal username As String) As Boolean
    If Membership.GetUser(username) IsNot Nothing Then Return True

    Return False
End Function

Protected Sub CreateUserWizard1_NextButtonClick(ByVal sender As Object, ByVal e As WizardNavigationEventArgs)
    If e.CurrentStepIndex = 0 Then
        If SearchAccount.Text.Trim() = "" OrElse UserExists(SearchAccount.Text) Then
            SearchAccountMessage.Text = "That account already exists. Please select an different account name."
            e.Cancel = True
        Else
            Dim userName As TextBox = _
              CType(CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("UserName"), TextBox)
            userName.Text = SearchAccount.Text
            SearchAccountMessage.Text = ""
            e.Cancel = False
        End If
    End If
End Sub

    private bool UserExists(string username)
{
    if (Membership.GetUser(username) != null) { return true; }

    return false;
}

protected void CreateUserWizard1_NextButtonClick(object sender, WizardNavigationEventArgs e)
{
    if (e.CurrentStepIndex == 0)
    {
        if (SearchAccount.Text.Trim() == "" || UserExists(SearchAccount.Text))
        {
            SearchAccountMessage.Text = "That account already exists. Please select an different account name.";
            e.Cancel = true;
        }
        else
        {
            TextBox userName =
              (TextBox)CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("UserName");
            userName.Text = SearchAccount.Text;
            SearchAccountMessage.Text = "";
            e.Cancel = false;
        }
    }
}
    Security noteSecurity Note

    This control has a text box that accepts user input, which is a potential security threat. By default, ASP.NET Web pages validate user input to ensure that the input does not contain HTML elements or script. For more information, see Script Exploits Overview.

Example

The following code example shows a CreateUserWizard control with templates defined for the two basic steps, CreateUserStep and CompleteStep, and an additional wizard step added before the CreateUserStep.

Security noteSecurity Note

This control has a textbox that accepts user input, which is a potential security threat. User input in a Web page can potentially contain malicious client script. By default, ASP.NET Web pages validate user input to ensure that the input does not contain HTML elements or script. As long as this validation is enabled, you do not need to explicitly check for script or HTML elements in user input. For more information, see Script Exploits Overview.

 
<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    Protected Sub CreateUserWizard1_CreatedUser(ByVal sender As Object, ByVal e As EventArgs)
        ' Determine the checkbox values.
        Dim subscribeCheckBox As CheckBox = _
          CType(CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("SubscribeCheckBox"), CheckBox)
        Dim shareInfoCheckBox As CheckBox = _
          CType(CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("ShareInfoCheckBox"), CheckBox)
        Dim userNameTextBox As TextBox = _
          CType(CreateUserWizardStep1.ContentTemplateContainer.FindControl("UserName"), TextBox)


        Dim user As MembershipUser = Membership.GetUser(userNameTextBox.Text)
        User.Comment = "Subscribe=" & subscribeCheckBox.Checked.ToString() & "&" & _
                       "ShareInfo=" & shareInfoCheckBox.Checked.ToString()
        Membership.UpdateUser(user)

        ' Show or hide the labels based on the checkbox values.
        Dim subscribeLabel As Label = _
          CType(CreateUserWizard1.CompleteStep.ContentTemplateContainer.FindControl("SubscribeLabel"), Label)
        Dim shareInfoLabel As Label = _
          CType(CreateUserWizard1.CompleteStep.ContentTemplateContainer.FindControl("ShareInfoLabel"), Label)

        subscribeLabel.Visible = subscribeCheckBox.Checked
        shareInfoLabel.Visible = shareInfoCheckBox.Checked
    End Sub

    Private Function UserExists(ByVal username As String) As Boolean
        If Membership.GetUser(username) IsNot Nothing Then Return True

        Return False
    End Function

    Protected Sub CreateUserWizard1_NextButtonClick(ByVal sender As Object, ByVal e As WizardNavigationEventArgs)
        If e.CurrentStepIndex = 0 Then
            If SearchAccount.Text.Trim() = "" OrElse UserExists(SearchAccount.Text) Then
                SearchAccountMessage.Text = "That account already exists. Please select an different account name."
                e.Cancel = True
            Else
                Dim userName As TextBox = _
                  CType(CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("UserName"), TextBox)
                userName.Text = SearchAccount.Text
                SearchAccountMessage.Text = ""
                e.Cancel = False
            End If
        End If
    End Sub
</script>

<html xmlns="https://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:CreateUserWizard ID="CreateUserWizard1" runat="server" BackColor="#F7F6F3" BorderColor="#E6E2D8"
            BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" 
            OnNextButtonClick="CreateUserWizard1_NextButtonClick"
            OnCreatedUser="CreateUserWizard1_CreatedUser" ContinueDestinationPageUrl="~/Default.aspx">
            <WizardSteps>
               <asp:WizardStep ID="CreateUserWizardStep0" runat="server">
                    <table border="0" style="font-size: 100%; font-family: Verdana" id="TABLE1" >
                         <tr>
                             <td align="center" colspan="2" style="font-weight: bold; color: white; background-color: #5d7b9d">
                                 Select an Account Name</td>
                         </tr>
                         <tr>
                             <td>
                               <asp:Label ID="AccountNameLabel" runat="server" AssociatedControlID="SearchAccount" > 
                                 Account Name:</asp:Label>
                               <asp:TextBox ID="SearchAccount" runat="server"></asp:TextBox><br />
                               <asp:Label ID="SearchAccountMessage" runat="server" ForeColor="red" />                                          
                             </td>
                         </tr>
                     </table>

                </asp:WizardStep>
                <asp:CreateUserWizardStep ID="CreateUserWizardStep1" 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>

                        <asp:CheckBox ID="SubscribeCheckBox" runat="server" Checked="True" Text="Send me a monthly newsletter." />
                        <br />
                        <asp:CheckBox ID="ShareInfoCheckBox" runat="server" Checked="True" Text="Share my information with partner sites." />
                    </ContentTemplate>
                </asp:CreateUserWizardStep>
                <asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server">
                    <ContentTemplate>
                        <table border="0" style="font-size: 100%; font-family: Verdana" id="TABLE1" >
                            <tr>
                                <td align="center" colspan="2" style="font-weight: bold; color: white; background-color: #5d7b9d; height: 18px;">
                                    Complete</td>
                            </tr>
                            <tr>
                                <td>
                                    Your account has been successfully created.<br />
                                    <br />
                                    <asp:Label ID="SubscribeLabel" runat="server" Text="You have elected to receive our monthly newsletter."></asp:Label><br />
                                    <br />
                                    <asp:Label ID="ShareInfoLabel" runat="server" Text="You have elected to share your information with partner sites."></asp:Label></td>
                            </tr>
                            <tr>
                                <td align="right" colspan="2">
                                    &nbsp;<asp:Button ID="ContinueButton" runat="server" BackColor="#FFFBFF" BorderColor="#CCCCCC"
                                        BorderStyle="Solid" BorderWidth="1px" CausesValidation="False" CommandName="Continue"
                                        Font-Names="Verdana" ForeColor="#284775" Text="Continue" ValidationGroup="CreateUserWizard1" />
                                </td>
                            </tr>
                        </table>

                    </ContentTemplate>
                </asp:CompleteWizardStep>
            </WizardSteps>
            <SideBarStyle BackColor="#5D7B9D" BorderWidth="0px" Font-Size="0.9em" VerticalAlign="Top" />
            <TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <SideBarButtonStyle BorderWidth="0px" Font-Names="Verdana" ForeColor="White" />
            <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" />
            <ContinueButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid"
                BorderWidth="1px" Font-Names="Verdana" ForeColor="#284775" />
            <StepStyle BorderWidth="0px" />
        </asp:CreateUserWizard>
        &nbsp;</div>
    </form>
</body>
</html>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
  protected void CreateUserWizard1_CreatedUser(object sender, EventArgs e)
  {
    // Determine the checkbox values.
    CheckBox subscribeCheckBox = 
      (CheckBox)CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("SubscribeCheckBox");
    CheckBox shareInfoCheckBox =
      (CheckBox)CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("ShareInfoCheckBox");
    TextBox userNameTextBox = 
      (TextBox)CreateUserWizardStep1.ContentTemplateContainer.FindControl("UserName");

    MembershipUser user = Membership.GetUser(userNameTextBox.Text);
    user.Comment = "Subscribe=" + subscribeCheckBox.Checked.ToString() + "&" +
                   "ShareInfo=" + shareInfoCheckBox.Checked.ToString();
    Membership.UpdateUser(user);

    // Show or hide the labels based on the checkbox values.
    Label subscribeLabel = 
      (Label)CreateUserWizard1.CompleteStep.ContentTemplateContainer.FindControl("SubscribeLabel");
    Label shareInfoLabel =
      (Label)CreateUserWizard1.CompleteStep.ContentTemplateContainer.FindControl("ShareInfoLabel");

    subscribeLabel.Visible = subscribeCheckBox.Checked;
    shareInfoLabel.Visible = shareInfoCheckBox.Checked;
  }

  private bool UserExists(string username)
  {
      if (Membership.GetUser(username) != null) { return true; }

      return false;
  }

  protected void CreateUserWizard1_NextButtonClick(object sender, WizardNavigationEventArgs e)
  {
      if (e.CurrentStepIndex == 0)
      {
          if (SearchAccount.Text.Trim() == "" || UserExists(SearchAccount.Text))
          {
              SearchAccountMessage.Text = "That account already exists. Please select an different account name.";
              e.Cancel = true;
          }
          else
          {
              TextBox userName =
                (TextBox)CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("UserName");
              userName.Text = SearchAccount.Text;
              SearchAccountMessage.Text = "";
              e.Cancel = false;
          }
      }
  }
</script>

<html xmlns="https://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:CreateUserWizard ID="CreateUserWizard1" runat="server" BackColor="#F7F6F3" BorderColor="#E6E2D8"
            BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" 
            OnNextButtonClick="CreateUserWizard1_NextButtonClick"
            OnCreatedUser="CreateUserWizard1_CreatedUser" ContinueDestinationPageUrl="~/Default.aspx">
            <WizardSteps>
               <asp:WizardStep ID="CreateUserWizardStep0" runat="server">
                    <table border="0" style="font-size: 100%; font-family: Verdana" id="TABLE1" >
                         <tr>
                             <td align="center" colspan="2" style="font-weight: bold; color: white; background-color: #5d7b9d">
                                 Select an Account Name</td>
                         </tr>
                         <tr>
                             <td>
                               <asp:Label ID="AccountNameLabel" runat="server" AssociatedControlID="SearchAccount" > 
                                 Account Name:</asp:Label>
                               <asp:TextBox ID="SearchAccount" runat="server"></asp:TextBox><br />
                               <asp:Label ID="SearchAccountMessage" runat="server" ForeColor="red" />                                          
                             </td>
                         </tr>
                     </table>

                </asp:WizardStep>
                <asp:CreateUserWizardStep ID="CreateUserWizardStep1" 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>

                        <asp:CheckBox ID="SubscribeCheckBox" runat="server" Checked="True" Text="Send me a monthly newsletter." />
                        <br />
                        <asp:CheckBox ID="ShareInfoCheckBox" runat="server" Checked="True" Text="Share my information with partner sites." />
                    </ContentTemplate>
                </asp:CreateUserWizardStep>
                <asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server">
                    <ContentTemplate>
                        <table border="0" style="font-size: 100%; font-family: Verdana" id="TABLE1" >
                            <tr>
                                <td align="center" colspan="2" style="font-weight: bold; color: white; background-color: #5d7b9d; height: 18px;">
                                    Complete</td>
                            </tr>
                            <tr>
                                <td>
                                    Your account has been successfully created.<br />
                                    <br />
                                    <asp:Label ID="SubscribeLabel" runat="server" Text="You have elected to receive our monthly newsletter."></asp:Label><br />
                                    <br />
                                    <asp:Label ID="ShareInfoLabel" runat="server" Text="You have elected to share your information with partner sites."></asp:Label></td>
                            </tr>
                            <tr>
                                <td align="right" colspan="2">
                                    &nbsp;<asp:Button ID="ContinueButton" runat="server" BackColor="#FFFBFF" BorderColor="#CCCCCC"
                                        BorderStyle="Solid" BorderWidth="1px" CausesValidation="False" CommandName="Continue"
                                        Font-Names="Verdana" ForeColor="#284775" Text="Continue" ValidationGroup="CreateUserWizard1" />
                                </td>
                            </tr>
                        </table>

                    </ContentTemplate>
                </asp:CompleteWizardStep>
            </WizardSteps>
            <SideBarStyle BackColor="#5D7B9D" BorderWidth="0px" Font-Size="0.9em" VerticalAlign="Top" />
            <TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <SideBarButtonStyle BorderWidth="0px" Font-Names="Verdana" ForeColor="White" />
            <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" />
            <ContinueButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid"
                BorderWidth="1px" Font-Names="Verdana" ForeColor="#284775" />
            <StepStyle BorderWidth="0px" />
        </asp:CreateUserWizard>
        &nbsp;</div>
    </form>
</body>
</html>

See Also

Reference

ASP.NET Login Controls Overview

TemplatedWizardStep

Concepts

Customizing the Appearance of ASP.NET Login Controls

Other Resources

ASP.NET Themes and Skins