Use Adapters?

The adapters are currently turned on. Do you want to keep them enabled?


more about the adapters

Theme Chooser

The examples can use either a "basic" or "enhanced" theme or no theme at all.



more about CSS & themes

CreateUserWizard Control Example

Example Summary and Logic

The CreateUserWizard control is a kind of CompositeControl like the other ASP.NET Membership controls. So it isn't surprising that, like most of the ASP.NET Membership controls, it normally produces nested <table> tags and frequently uses inline styling. An adapter can produce less bulky markup that positions content with CSS rather than tables.

This sample CreateUserWizard adapter supports many, but not all, of the control's features. For example, the sample adapter supports the optional templates for the CreateUserWizardStep and CompleteWizardStep but the does not support navigation templates or extra wizard steps.


Working Example

REGISTRATION
Sign Up for Your New Account
We're glad you want to become a member!
- Enter a user name and password of your choice (type your password twice to ensure against mistakes).
- Enter your email address (this is where we'll send your password if you ever forget it).
- Make up a question and answer that only you will know (we'll use this information to confirm your identity before sending your password via email).
 
 
Please see the HINT box below for the user name and password that can be used with this sample.
 
 
 
 

Hints:

Use the following values when filling out the create user wizard form.

  • User Name = fred
  • Password and Confirm Password = css!

(It doesn't matter what you type for the email and the security question and answer.)

When you click the "continue" button on the "Complete" page, you'll be taken to a page that demonstrates the LoginStatus control.

Please note that an account isn't actually created within the membership system (in fact, the fred account already exists) but the control will behave as if it's creating an account.

What would you like to do next?

HTML Snippets

Snippet of HTML when using the adapters

ASP.NET
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div class="PrettyCreateUserWizard" id="ctl00_ctl00_MainContent_LiveExample_createuserwizard1">
  <div class="AspNet-CreateUserWizard">
    <div class="AspNet-CreateUserWizard-HeaderTextPanel">
      <span>REGISTRATION</span>
    </div>
    <div class="AspNet-CreateUserWizard-StepTitlePanel">
      <span>Sign Up for Your New Account</span>
    </div>
    <div class="AspNet-CreateUserWizard-InstructionPanel">
      <span><strong>We're glad you want to become a member!</strong><br />- Enter a user name and password of your choice (type your password twice to ensure against mistakes).<br />- Enter your email address (this is where we'll send your password if you ever forget it).<br />- Make up a question and answer that only you will know (we'll use this information to confirm your identity before sending your password via email).</span>
    </div>
    <div class="AspNet-CreateUserWizard-UserPanel">
      <label for="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_UserName"><em>U</em>ser Name:</label>
      <input type="text" id="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_UserName" name="ctl00$ctl00$MainContent$LiveExample$createuserwizard1$CreateUserStepContainer$UserName" value="" accesskey="u" />
    </div>
    <div class="AspNet-CreateUserWizard-PasswordPanel">
      <label for="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_Password"><em>P</em>assword:</label>
      <input type="password" id="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_Password" name="ctl00$ctl00$MainContent$LiveExample$createuserwizard1$CreateUserStepContainer$Password" value="" accesskey="p" />
    </div>
    <div class="AspNet-CreateUserWizard-PasswordHintPanel">
      <span>Please see the HINT box below for the user name and password that can be used with this sample.</span>
    </div>
    <div class="AspNet-CreateUserWizard-ConfirmPasswordPanel">
      <label for="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_ConfirmPassword"><em>C</em>onfirm Password:</label>
      <input type="password" id="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_ConfirmPassword" name="ctl00$ctl00$MainContent$LiveExample$createuserwizard1$CreateUserStepContainer$ConfirmPassword" value="" accesskey="c" />
    </div>
    <div class="AspNet-CreateUserWizard-EmailPanel">
      <label for="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_Email"><em>E</em>mail:</label>
      <input type="text" id="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_Email" name="ctl00$ctl00$MainContent$LiveExample$createuserwizard1$CreateUserStepContainer$Email" value="" accesskey="e" />
    </div>
    <div class="AspNet-CreateUserWizard-QuestionPanel">
      <label for="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_Question"><em>S</em>ecurity Question:</label>
      <input type="text" id="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_Question" name="ctl00$ctl00$MainContent$LiveExample$createuserwizard1$CreateUserStepContainer$Question" value="" accesskey="s" />
    </div>
    <div class="AspNet-CreateUserWizard-AnswerPanel">
      <label for="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_Answer"><em>A</em>nswer to your Security Question:</label>
      <input type="text" id="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_Answer" name="ctl00$ctl00$MainContent$LiveExample$createuserwizard1$CreateUserStepContainer$Answer" value="" accesskey="a" />
    </div>
    <div class="AspNet-CreateUserWizard-FinalValidatorsPanel">
    </div>
    <div class="AspNet-CreateUserWizard-CreateUserButtonPanel">
      <input type="submit" value="create user" id="ctl00_ctl00_MainContent_LiveExample_createuserwizard1__CustomNav0_StepNextButtonButton" name="ctl00$ctl00$MainContent$LiveExample$createuserwizard1$__CustomNav0$StepNextButtonButton" onclick="WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl00$MainContent$LiveExample$createuserwizard1$__CustomNav0$StepNextButtonButton&quot;, &quot;&quot;, true, &quot;createuserwizard1&quot;, &quot;&quot;, false, true))" />
    </div>
  </div>
</div>

Snippet of HTML when not using the adapters

ASP.NET
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<table title="Please register." cellspacing="0" cellpadding="4" CssSelectorClass="PrettyCreateUserWizard" border="0" id="ctl00_ctl00_MainContent_LiveExample_createuserwizard1" style="background-color:White;border-color:#284775;border-width:1px;border-style:Solid;font-family:Verdana;font-size:0.8em;border-collapse:collapse;">
  <tr>
    <td align="center" style="color:White;background-color:#284775;font-weight:bold;height:2em;">REGISTRATION</td>
  </tr><tr style="height:100%;">
    <td><table cellspacing="0" cellpadding="0" border="0" style="height:100%;width:100%;border-collapse:collapse;">
      <tr>
        <td style="height:100%;width:100%;"><table border="0" style="height:100%;width:100%;">
          <tr>
            <td align="center" colspan="2" style="color:#F7F6F3;background-color:#5D7B9D;font-weight:bold;">Sign Up for Your New Account</td>
          </tr><tr>
            <td align="left" colspan="2" style="color:#284775;background-color:#EEEEEE;border-color:#EEEEEE;border-width:10px;border-style:Solid;"><strong>We're glad you want to become a member!</strong><br />- Enter a user name and password of your choice (type your password twice to ensure against mistakes).<br />- Enter your email address (this is where we'll send your password if you ever forget it).<br />- Make up a question and answer that only you will know (we'll use this information to confirm your identity before sending your password via email).</td>
          </tr><tr>
            <td align="right" style="color:#5D7B9D;"><label for="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_UserName">User Name:</label></td><td><input name="ctl00$ctl00$MainContent$LiveExample$createuserwizard1$CreateUserStepContainer$UserName" type="text" id="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_UserName" style="color:#5D7B9D;border-color:#5D7B9D;border-width:1px;border-style:Solid;" /></td>
          </tr><tr>
            <td align="right" style="color:#5D7B9D;"><label for="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_Password">Password:</label></td><td><input name="ctl00$ctl00$MainContent$LiveExample$createuserwizard1$CreateUserStepContainer$Password" type="password" id="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_Password" style="color:#5D7B9D;border-color:#5D7B9D;border-width:1px;border-style:Solid;" /></td>
          </tr><tr>
            <td></td><td style="color:#666666;">Please see the HINT box below for the user name and password that can be used with this sample.</td>
          </tr><tr>
            <td align="right" style="color:#5D7B9D;"><label for="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_ConfirmPassword">Confirm Password:</label></td><td><input name="ctl00$ctl00$MainContent$LiveExample$createuserwizard1$CreateUserStepContainer$ConfirmPassword" type="password" id="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_ConfirmPassword" style="color:#5D7B9D;border-color:#5D7B9D;border-width:1px;border-style:Solid;" /></td>
          </tr><tr>
            <td align="right" style="color:#5D7B9D;"><label for="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_Email">Email:</label></td><td><input name="ctl00$ctl00$MainContent$LiveExample$createuserwizard1$CreateUserStepContainer$Email" type="text" id="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_Email" style="color:#5D7B9D;border-color:#5D7B9D;border-width:1px;border-style:Solid;" /></td>
          </tr><tr>
            <td align="right" style="color:#5D7B9D;"><label for="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_Question">Security Question:</label></td><td><input name="ctl00$ctl00$MainContent$LiveExample$createuserwizard1$CreateUserStepContainer$Question" type="text" id="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_Question" style="color:#5D7B9D;border-color:#5D7B9D;border-width:1px;border-style:Solid;" /></td>
          </tr><tr>
            <td align="right" style="color:#5D7B9D;"><label for="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_Answer">Answer to your Security Question:</label></td><td><input name="ctl00$ctl00$MainContent$LiveExample$createuserwizard1$CreateUserStepContainer$Answer" type="text" id="ctl00_ctl00_MainContent_LiveExample_createuserwizard1_CreateUserStepContainer_Answer" style="color:#5D7B9D;border-color:#5D7B9D;border-width:1px;border-style:Solid;" /></td>
          </tr><tr>
            <td align="center" colspan="2"></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr><tr>
    <td align="right"><table cellspacing="5" cellpadding="5" border="0" style="height:100%;width:100%;">
      <tr align="right">
        <td align="right"><input type="submit" name="ctl00$ctl00$MainContent$LiveExample$createuserwizard1$__CustomNav0$StepNextButtonButton" value="create user" id="ctl00_ctl00_MainContent_LiveExample_createuserwizard1___CustomNav0_StepNextButtonButton" style="color:Cyan;background-color:#284775;border-color:#5D7B9D;border-width:1px;border-style:Solid;" /></td>
      </tr>
    </table></td>
  </tr>
</table>