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

ChangePassword Control Example

Example Summary and Logic

The ChangePassword control, like most other ASP.NET Membership controls, positions form elements in nested <table> tags. Templates are a great way to replace some of those <table> tags with <div> tags or other markup you prefer. Visual Studio's design view makes it easy to get started making these templates. Since you can put any markup you like in these templates, they can be quite "friendly" to CSS. There are, however, two circumstances where an adapter can help.

  1. Even if you use templates, the unadapted version of the ChangePassword control creates at least one overall wrapper <table>. An adapter can replace that outer <table> with something preferable, like a <div> tag.
  2. And, of course, there is no need to use templates if you use an adapter that, by default, renders table-less markup that is easy to style with CSS.

Get listed here

Working Example

So ... you want to change your password?
No Problem!
- Confirm your user name.
- Type your old password.
- Type your new password twice.
 
 
 
 
Register here.
Forgot your password?

Hints:

Use the following values when filling out the change password form.

  • User Name = fred
  • Old password = css!
  • New password = (use anything, it doesn't matter)
  • Retype new password = (type the same new password, it has to match to avoid the validation error)

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

Please note that the password is not actually changed in the membership provider. Continue to use css! when you log in as fred.

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

<div class="PrettyChangePassword" id="ctl00_ctl00_MainContent_LiveExample_changepassword1">
  <div class="AspNet-ChangePassword">
    <div class="AspNet-ChangePassword-ChangePasswordTitlePanel">
      <span>So ... you want to change your password?</span>
    </div>
    <div class="ChangePassword-Skin-InstructionText AspNet-ChangePassword-InstructionPanel">
      <span><strong>No Problem!</strong><br />- Confirm your user name.<br />- Type your old password.<br />- Type your new password twice.</span>
    </div>
    <div class="AspNet-ChangePassword-UserPanel">
      <label for="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_UserName"><em>U</em>ser Name:</label>
      <input type="text" id="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_UserName" name="ctl00$ctl00$MainContent$LiveExample$changepassword1$ChangePasswordContainerID$UserName" value="fred" accesskey="u" />
    </div>
    <div class="AspNet-ChangePassword-PasswordPanel">
      <label for="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_CurrentPassword"><em>O</em>ld password:</label>
      <input type="password" id="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_CurrentPassword" name="ctl00$ctl00$MainContent$LiveExample$changepassword1$ChangePasswordContainerID$CurrentPassword" value="" accesskey="o" />
    </div>
    <div class="AspNet-ChangePassword-NewPasswordPanel">
      <label for="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_NewPassword"><em>N</em>ew password:</label>
      <input type="password" id="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_NewPassword" name="ctl00$ctl00$MainContent$LiveExample$changepassword1$ChangePasswordContainerID$NewPassword" value="" accesskey="n" />
    </div>
    <div class="AspNet-ChangePassword-ConfirmNewPasswordPanel">
      <label for="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_ConfirmNewPassword"><em>R</em>etype your new password:</label>
      <input type="password" id="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_ConfirmNewPassword" name="ctl00$ctl00$MainContent$LiveExample$changepassword1$ChangePasswordContainerID$ConfirmNewPassword" value="" accesskey="r" />
    </div>
    <div class="AspNet-ChangePassword-SubmitPanel">
      <input type="submit" value="change my password" id="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_ChangePasswordPushButton" name="ctl00$ctl00$MainContent$LiveExample$changepassword1$ChangePasswordContainerID$ChangePasswordPushButton" onclick="WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl00$MainContent$LiveExample$changepassword1$ChangePasswordContainerID$ChangePasswordPushButton&quot;, &quot;&quot;, true, &quot;ctl00$ctl00$MainContent$LiveExample$changepassword1&quot;, &quot;&quot;, false, true))" />
      <input type="submit" value="cancel" id="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_CancelPushButton" name="ctl00$ctl00$MainContent$LiveExample$changepassword1$ChangePasswordContainerID$CancelPushButton" />
    </div>
    <div class="AspNet-ChangePassword-CreateUserPanel">
      <a href="CreateUserWizard.aspx" title="Create user">Register here.</a>
    </div>
    <div class="AspNet-ChangePassword-PasswordRecoveryPanel">
      <a href="PasswordRecovery.aspx" title="Password recovery">Forgot your password?</a>
    </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

<table title="Use this form to change your password." cellspacing="0" cellpadding="1" cellpadding="4" CssSelectorClass="PrettyChangePassword" border="0" id="ctl00_ctl00_MainContent_LiveExample_changepassword1" style="background-color:White;border-color:#284775;border-width:1px;border-style:Solid;border-collapse:collapse;">
  <tr>
    <td><table cellpadding="0" border="0" style="font-family:Verdana;font-size:0.8em;">
      <tr>
        <td align="center" colspan="2" style="color:#F7F6F3;background-color:#5D7B9D;font-weight:bold;height:2em;">So ... you want to change your password?</td>
      </tr><tr>
        <td class="ChangePassword-Skin-InstructionText" align="center" colspan="2" style="color:#284775;background-color:#EEEEEE;"><strong>No Problem!</strong><br />- Confirm your user name.<br />- Type your old password.<br />- Type your new password twice.</td>
      </tr><tr>
        <td align="right" style="color:#5D7B9D;"><label for="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_UserName">User Name:</label></td><td><input name="ctl00$ctl00$MainContent$LiveExample$changepassword1$ChangePasswordContainerID$UserName" type="text" value="fred" id="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_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_changepassword1_ChangePasswordContainerID_CurrentPassword">Old password:</label></td><td><input name="ctl00$ctl00$MainContent$LiveExample$changepassword1$ChangePasswordContainerID$CurrentPassword" type="password" id="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_CurrentPassword" 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_changepassword1_ChangePasswordContainerID_NewPassword">New password:</label></td><td><input name="ctl00$ctl00$MainContent$LiveExample$changepassword1$ChangePasswordContainerID$NewPassword" type="password" id="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_NewPassword" 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_changepassword1_ChangePasswordContainerID_ConfirmNewPassword">Retype your new password:</label></td><td><input name="ctl00$ctl00$MainContent$LiveExample$changepassword1$ChangePasswordContainerID$ConfirmNewPassword" type="password" id="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_ConfirmNewPassword" style="color:#5D7B9D;border-color:#5D7B9D;border-width:1px;border-style:Solid;" /></td>
      </tr><tr>
        <td align="center" colspan="2"></td>
      </tr><tr>
        <td align="right"><input type="submit" name="ctl00$ctl00$MainContent$LiveExample$changepassword1$ChangePasswordContainerID$ChangePasswordPushButton" value="change my password" id="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_ChangePasswordPushButton" style="color:Cyan;background-color:#284775;border-color:#5D7B9D;border-width:1px;border-style:Solid;" /></td><td><input type="submit" name="ctl00$ctl00$MainContent$LiveExample$changepassword1$ChangePasswordContainerID$CancelPushButton" value="cancel" id="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_CancelPushButton" style="color:Cyan;background-color:#284775;border-color:#5D7B9D;border-width:1px;border-style:Solid;" /></td>
      </tr><tr>
        <td colspan="2"><a id="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_CreateUserLink" href="CreateUserWizard.aspx">Register here.</a><br /><a id="ctl00_ctl00_MainContent_LiveExample_changepassword1_ChangePasswordContainerID_PasswordRecoveryLink" href="PasswordRecovery.aspx">Forgot your password?</a></td>
      </tr>
    </table></td>
  </tr>
</table>