How to: Customize the PasswordRecovery Control

You can customize the PasswordRecovery control in the following ways:

• You can edit the displayed templates and change the control's user interface (UI).

• You can apply an ASP.NET theme to the control. For more information, see ASP.NET Themes and Skins Overview.

• You can use the control's properties (such as QuestionLabelText or InstructionTextStyle).to modify its appearance. For details, see the properties of the PasswordRecovery control in the class library reference.

This topic describes how to customize the System.Web.UI.WebControls.PasswordRecovery control using templates.

To edit the PasswordRecovery templates

1. Add a PasswordRecovery control to the page as shown in the following code example.

   <asp:PasswordRecovery ID="PasswordRecovery1" Runat="server">
   </asp:PasswordRecovery>
   

2. You can apply styles to customize the appearance of the PasswordRecovery control. Use properties to apply any desired styles to the template, such as the LabelStyle, HyperLinkStyle, and TitleTextStyle properties.

   To customize the content of the PasswordRecovery control, continue with the following steps to modify the templates used by the PasswordRecovery control.

3. Create a UserNameTemplate template to specify the markup and controls that appear when the control is first rendered, as shown in the following code example.

   Security Note:
   This example has a text box that accepts user input, which is a potential security threat. By default, ASP.NET Web pages validate that user input does not include script or HTML elements. For more information, see Script Exploits Overview.

   <UserNameTemplate>
     <table border="0" cellpadding="1">
       <tr>
         <td>
           <table border="0" cellpadding="0">
             <tr>
               <td align="center" colspan="2">
                 Forgot Your Password?</td>
             </tr>
             <tr>
               <td align="center" colspan="2">
                 Enter your User Name to receive your password.</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="PasswordRecovery1">*</asp:RequiredFieldValidator>
               </td>
             </tr>
             <tr>
               <td align="center" colspan="2" style="color: red">
                 <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
               </td>
             </tr>
             <tr>
               <td align="right" colspan="2">
                 <asp:Button ID="SubmitButton" runat="server" CommandName="Submit" Text="Submit" ValidationGroup="PasswordRecovery1" />
               </td>
             </tr>
           </table>
   
         </td>
       </tr>
     </table>
   
   </UserNameTemplate>
   

   <UserNameTemplate>
     <table border="0" cellpadding="1">
       <tr>
         <td>
           <table border="0" cellpadding="0">
             <tr>
               <td align="center" colspan="2">
                 Forgot Your Password?</td>
             </tr>
             <tr>
               <td align="center" colspan="2">
                 Enter your User Name to receive your password.</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="PasswordRecovery1">*</asp:RequiredFieldValidator>
               </td>
             </tr>
             <tr>
               <td align="center" colspan="2" style="color: red">
                 <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
               </td>
             </tr>
             <tr>
               <td align="right" colspan="2">
                 <asp:Button ID="SubmitButton" runat="server" CommandName="Submit" Text="Submit" ValidationGroup="PasswordRecovery1" />
               </td>
             </tr>
           </table>
   
         </td>
       </tr>
     </table>
   
   </UserNameTemplate>
   

4. Create a QuestionTemplate template to specify the markup and controls that appear when the control prompts the user for the security question, as shown in the following code example.

   Security Note:
   This example has a text box that accepts user input, which is a potential security threat. By default, ASP.NET Web pages validate that user input does not include script or HTML elements. For more information, see Script Exploits Overview.

   <QuestionTemplate>
     <table border="0" cellpadding="1">
       <tr>
         <td>
           <table border="0" cellpadding="0">
             <tr>
               <td align="center" colspan="2">
                 Identity Confirmation</td>
             </tr>
             <tr>
               <td align="center" colspan="2">
                 Answer the following question to receive your password.</td>
             </tr>
             <tr>
               <td align="right">
                 User Name:</td>
               <td>
                 <asp:Literal ID="UserName" runat="server"></asp:Literal>
               </td>
             </tr>
             <tr>
               <td align="right">
                 Question:</td>
               <td>
                 <asp:Literal ID="Question" runat="server"></asp:Literal>
               </td>
             </tr>
             <tr>
               <td align="right">
                 <asp:Label ID="AnswerLabel" runat="server" AssociatedControlID="Answer">Answer:</asp:Label></td>
               <td>
                 <asp:TextBox ID="Answer" runat="server"></asp:TextBox>
                 <asp:RequiredFieldValidator ID="AnswerRequired" runat="server" ControlToValidate="Answer"
                   ErrorMessage="Answer is required." ToolTip="Answer is required." ValidationGroup="PasswordRecovery1">*</asp:RequiredFieldValidator>
               </td>
             </tr>
             <tr>
               <td align="center" colspan="2" style="color: red">
                 <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
               </td>
             </tr>
             <tr>
               <td align="right" colspan="2">
                 <asp:Button ID="SubmitButton" runat="server" CommandName="Submit" Text="Submit" ValidationGroup="PasswordRecovery1" />
               </td>
             </tr>
           </table>
   
         </td>
       </tr>
     </table>
   
   </QuestionTemplate>
   

   <QuestionTemplate>
     <table border="0" cellpadding="1">
       <tr>
         <td>
           <table border="0" cellpadding="0">
             <tr>
               <td align="center" colspan="2">
                 Identity Confirmation</td>
             </tr>
             <tr>
               <td align="center" colspan="2">
                 Answer the following question to receive your password.</td>
             </tr>
             <tr>
               <td align="right">
                 User Name:</td>
               <td>
                 <asp:Literal ID="UserName" runat="server"></asp:Literal>
               </td>
             </tr>
             <tr>
               <td align="right">
                 Question:</td>
               <td>
                 <asp:Literal ID="Question" runat="server"></asp:Literal>
               </td>
             </tr>
             <tr>
               <td align="right">
                 <asp:Label ID="AnswerLabel" runat="server" AssociatedControlID="Answer">Answer:</asp:Label></td>
               <td>
                 <asp:TextBox ID="Answer" runat="server"></asp:TextBox>
                 <asp:RequiredFieldValidator ID="AnswerRequired" runat="server" ControlToValidate="Answer"
                   ErrorMessage="Answer is required." ToolTip="Answer is required." ValidationGroup="PasswordRecovery1">*</asp:RequiredFieldValidator>
               </td>
             </tr>
             <tr>
               <td align="center" colspan="2" style="color: red">
                 <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
               </td>
             </tr>
             <tr>
               <td align="right" colspan="2">
                 <asp:Button ID="SubmitButton" runat="server" CommandName="Submit" Text="Submit" ValidationGroup="PasswordRecovery1" />
               </td>
             </tr>
           </table>
   
         </td>
       </tr>
     </table>
   
   </QuestionTemplate>
   

5. Create a SuccessTemplate template to specify the markup and controls that appear when a user has successfully retrieved a password

   The following code example shows the markup for a PasswordRecovery control with a SuccessTemplate template defined.

   Security Note:
   This example has a text box that accepts user input, which is a potential security threat. By default, ASP.NET Web pages validate that user input does not include script or HTML elements. For more information, see Script Exploits Overview.

   <%@ Page Language="VB" %>
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
   <script runat="server">
   
   </script>
   
   <html xmlns="http://www.w3.org/1999/xhtml" >
   <head runat="server">
     <meta http-equiv="Content-Type" content="text/html" />
     <title>PasswordRecovery All Templates Sample</title>
   </head>
   <body>
       <form id="form1" runat="server">
       <div title="All Templates Sample">
         <asp:PasswordRecovery ID="PasswordRecovery1" runat="server">
           <QuestionTemplate>
             <table border="0" cellpadding="1">
               <tr>
                 <td>
                   <table border="0" cellpadding="0">
                     <tr>
                       <td align="center" colspan="2">
                         Identity Confirmation</td>
                     </tr>
                     <tr>
                       <td align="center" colspan="2">
                         Answer the following question to receive your password.</td>
                     </tr>
                     <tr>
                       <td align="right">
                         User Name:</td>
                       <td>
                         <asp:Literal ID="UserName" runat="server"></asp:Literal>
                       </td>
                     </tr>
                     <tr>
                       <td align="right">
                         Question:</td>
                       <td>
                         <asp:Literal ID="Question" runat="server"></asp:Literal>
                       </td>
                     </tr>
                     <tr>
                       <td align="right">
                         <asp:Label ID="AnswerLabel" runat="server" AssociatedControlID="Answer">Answer:</asp:Label></td>
                       <td>
                         <asp:TextBox ID="Answer" runat="server"></asp:TextBox>
                         <asp:RequiredFieldValidator ID="AnswerRequired" runat="server" ControlToValidate="Answer"
                           ErrorMessage="Answer is required." ToolTip="Answer is required." ValidationGroup="PasswordRecovery1">*</asp:RequiredFieldValidator>
                       </td>
                     </tr>
                     <tr>
                       <td align="center" colspan="2" style="color: red">
                         <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
                       </td>
                     </tr>
                     <tr>
                       <td align="right" colspan="2">
                         <asp:Button ID="SubmitButton" runat="server" CommandName="Submit" Text="Submit" ValidationGroup="PasswordRecovery1" />
                       </td>
                     </tr>
                   </table>
   
                 </td>
               </tr>
             </table>
   
           </QuestionTemplate>
           <UserNameTemplate>
             <table border="0" cellpadding="1">
               <tr>
                 <td>
                   <table border="0" cellpadding="0">
                     <tr>
                       <td align="center" colspan="2">
                         Forgot Your Password?</td>
                     </tr>
                     <tr>
                       <td align="center" colspan="2">
                         Enter your User Name to receive your password.</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="PasswordRecovery1">*</asp:RequiredFieldValidator>
                       </td>
                     </tr>
                     <tr>
                       <td align="center" colspan="2" style="color: red">
                         <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
                       </td>
                     </tr>
                     <tr>
                       <td align="right" colspan="2">
                         <asp:Button ID="SubmitButton" runat="server" CommandName="Submit" Text="Submit" ValidationGroup="PasswordRecovery1" />
                       </td>
                     </tr>
                   </table>
   
                 </td>
               </tr>
             </table>
   
           </UserNameTemplate>
           <SuccessTemplate>
             <table border="0" cellpadding="1">
               <tr>
                 <td>
                   <table border="0" cellpadding="0">
                     <tr>
                       <td>
                         Your password has been sent to you.</td>
                     </tr>
                   </table>
   
                 </td>
               </tr>
             </table>
   
           </SuccessTemplate>
         </asp:PasswordRecovery>
   
       </div>
       </form>
     </body>
   </html>
   

   <%@ Page Language="C#" %>
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
   <script runat="server">
   
   </script>
   
   <html xmlns="http://www.w3.org/1999/xhtml" >
   <head runat="server">
       <title>Password Recovery All Templates Sample</title>
   </head>
   <body>
       <form id="form1" runat="server">
       <div title="All Templates Sample">
         <asp:PasswordRecovery ID="PasswordRecovery1" runat="server">
           <QuestionTemplate>
             <table border="0" cellpadding="1">
               <tr>
                 <td>
                   <table border="0" cellpadding="0">
                     <tr>
                       <td align="center" colspan="2">
                         Identity Confirmation</td>
                     </tr>
                     <tr>
                       <td align="center" colspan="2">
                         Answer the following question to receive your password.</td>
                     </tr>
                     <tr>
                       <td align="right">
                         User Name:</td>
                       <td>
                         <asp:Literal ID="UserName" runat="server"></asp:Literal>
                       </td>
                     </tr>
                     <tr>
                       <td align="right">
                         Question:</td>
                       <td>
                         <asp:Literal ID="Question" runat="server"></asp:Literal>
                       </td>
                     </tr>
                     <tr>
                       <td align="right">
                         <asp:Label ID="AnswerLabel" runat="server" AssociatedControlID="Answer">Answer:</asp:Label></td>
                       <td>
                         <asp:TextBox ID="Answer" runat="server"></asp:TextBox>
                         <asp:RequiredFieldValidator ID="AnswerRequired" runat="server" ControlToValidate="Answer"
                           ErrorMessage="Answer is required." ToolTip="Answer is required." ValidationGroup="PasswordRecovery1">*</asp:RequiredFieldValidator>
                       </td>
                     </tr>
                     <tr>
                       <td align="center" colspan="2" style="color: red">
                         <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
                       </td>
                     </tr>
                     <tr>
                       <td align="right" colspan="2">
                         <asp:Button ID="SubmitButton" runat="server" CommandName="Submit" Text="Submit" ValidationGroup="PasswordRecovery1" />
                       </td>
                     </tr>
                   </table>
   
                 </td>
               </tr>
             </table>
   
           </QuestionTemplate>
           <UserNameTemplate>
             <table border="0" cellpadding="1">
               <tr>
                 <td>
                   <table border="0" cellpadding="0">
                     <tr>
                       <td align="center" colspan="2">
                         Forgot Your Password?</td>
                     </tr>
                     <tr>
                       <td align="center" colspan="2">
                         Enter your User Name to receive your password.</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="PasswordRecovery1">*</asp:RequiredFieldValidator>
                       </td>
                     </tr>
                     <tr>
                       <td align="center" colspan="2" style="color: red">
                         <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
                       </td>
                     </tr>
                     <tr>
                       <td align="right" colspan="2">
                         <asp:Button ID="SubmitButton" runat="server" CommandName="Submit" Text="Submit" ValidationGroup="PasswordRecovery1" />
                       </td>
                     </tr>
                   </table>
   
                 </td>
               </tr>
             </table>
   
           </UserNameTemplate>
           <SuccessTemplate>
             <table border="0" cellpadding="1">
               <tr>
                 <td>
                   <table border="0" cellpadding="0">
                     <tr>
                       <td>
                         Your password has been sent to you.</td>
                     </tr>
                   </table>
   
                 </td>
               </tr>
             </table>
   
           </SuccessTemplate>
         </asp:PasswordRecovery>
   
       </div>
       </form>
   </body>
   </html>
   

See Also

Concepts

Customizing the Appearance of ASP.NET Login Controls

Reference

ASP.NET Login Controls Overview