How to use ASP.NET Membership CreateUserWizard control

The CreateUserWizard control enables you to create registration pages very quickly. This control is a wizard control with two default steps:

1. For querying general user information.

2. For displaying a confirmation message.

As the CreateUserWizard inherits from the base Wizard control, and you add as many wizard steps as you want. If you use as example the next code:

<form id=”form1″ runat=”server”>

<div align=”center”>

<asp:CreateUserWizard ID=”CreateUserWizardCtrl” runat=”server”

MembershipProvider=”AspNetSqlMembershipProvider”

BorderStyle=”Solid” BackColor=”Silver”>

<WizardSteps>

<asp:CreateUserWizardStep runat=”server” />

<asp:CompleteWizardStep runat=”server” />

</WizardSteps>

</asp:CreateUserWizard>

</div>

</form>

 

the result will be:

 

 

Membership API CreateUserWizard control in action

Membership API CreateUserWizard control in action

If you wish you can customize the default appearance of the control through properties and styles. When you use the CreateUserWizard control as shown previously, you don’t need to perform any special configuration. It automatically uses the configured membership provider for creating the user, and it includes two steps:

  1. The default CreateUserWizardStep that creates controls for gathering the necessary information.
  2. The CompleteWizardStep for displaying a confirmation message.

Both steps are customizable through styles and properties or through templates. Although you can customize these two steps, you cannot remove them. If you use templates, you are responsible for creating the necessary controls, as follows:

 

<form id=”form1″ runat=”server”>

<div align=”center”>

<asp:CreateUserWizard ID=”CreateUserWizardCtrl” runat=”server” MembershipProvider=”AspNetSqlMembershipProvider”

BorderStyle=”Solid” BackColor=”Silver”>

<WizardSteps>

<asp:CreateUserWizardStep>

<ContentTemplate>

<table>

<tr>

<td align=”left”>

UserName:

</td>

<td>

<asp:TextBox ID=”UserName” runat=”server” Width=”160px”></asp:TextBox>

</td>

</tr>

<tr>

<td align=”left”>

Password:

</td>

<td>

<asp:TextBox ID=”Password” runat=”server” TextMode=”Password” Width=”160px”></asp:TextBox>

</td>

</tr>

<tr>

<td align=”left”>

Confirm Password:

</td>

<td>

<asp:TextBox ID=”ConfirmPassword” runat=”server” TextMode=”Password” Width=”160px”></asp:TextBox>

</td>

</tr>

<tr>

<td align=”left”>

Email:

</td>

<td>

<asp:TextBox ID=”Email” runat=”server” Width=”160px”></asp:TextBox>

</td>

</tr>

</table>

</ContentTemplate>

</asp:CreateUserWizardStep>

<asp:CompleteWizardStep>

<ContentTemplate>

Your account has been successfully created.

<asp:Button ID=”ContinueButton” CommandName=”Continue” runat=”server” Text=”Continue” />

</ContentTemplate>

</asp:CompleteWizardStep>

</WizardSteps>

</asp:CreateUserWizard>

</div>

</form>

 

The next pictures present the result:

 

 

Customized Membership API CreateUserWizard control in action

Customized Membership API CreateUserWizard control in action

The first step doesn’t require any buttons because a Next button (in our case “Create User” ) is automatically displayed by the hosting wizard control. Depending on the configuration of the membership provider, some of the controls in the first step are required, and others are not, as listed in the next table:

 

ID

Type

Required?

Notes

UserNameSystem.Web.UI.WebControls.TextBoxYesAlways required
PasswordSystem.Web.UI.WebControls.TextBoxYesAlways required
ConfirmPasswordSystem.Web.UI.WebControls.TextBoxYesAlways required
EmailSystem.Web.UI.WebControls.TextBoxNoRequired only if the RequireEmail property of the CreateUserWizard control is set to true
QuestionSystem.Web.UI.WebControls.TextBoxNoRequired only if the underlying membership provider requires a password question
AnswerSystem.Web.UI.WebControls.TextBoxNoRequired only if the underlying membership provider requires a password question
ContinueButtonAny control that supports bubblingNoNot required at all, but if present, you need to set the CommandName to Continue