How to: Use Advanced Features of the ASP.NET Login Control

The Login control is a composite control that provides all the common user interface (UI) elements of a login form. The control is modularized, and each part can be individually customized. These parts include the Username and Password text boxes, the Submit button, the button to create a new user, the Remember Me check box, and help information for the user. You can define your own user interface for the Login control by defining new elements and by reusing default components. You can also customize the user interface text and the appearance (fonts and colors) of the Login control. Alternatively, you can change the overall appearance of the Login control by applying an ASP.NET theme or skin.

Additionally, you can make use of more advanced capabilities of the Login control, such as whether the login information is stored in a persistent cookie in the browser or whether the login control is visible (on pages other than the default login page) when a user is logged in. Finally, you can convert the login control to a template to have complete control over the control's appearance.

To control whether the login control is visible when a user is logged in

1. Place a Login control on a page.

   Note

   By default, the control is configured to work with a login page named Login.aspx. You can change the name of the login page in the Web.config file by setting the LoginUrl property of the FormsAuthentication class.

2. If you want the Login control to appear only when a user is not logged in (the control will always be displayed on the login page identified by the LoginUrl property), set the VisibleWhenLoggedIn property to false.

To control whether the authentication token is stored in a persistent cookie

1. If you want the control to display a Remember me next time check box, set the DisplayRememberMe property to true. If a user selects the Remember me next time check box when he or she logs in, the authentication token will be stored in a persistent cookie in the browser.

2. If you want the Remember me next time check box to be selected by default, set the RememberMeSet property to true.

3. If you want the authentication token to be stored in a persistent cookie without giving the user the option to clear the Remember me next time check box, set the RememberMeSet property to true and set the DisplayRememberMe property to false. This is not recommended for sites that can be accessed from public computers that serve multiple users, as a user's persistent authentication token could be used by an unwanted user.

To add help links to the Login control

1. To add a link to the Login control that takes the user to a URL where he or she can create a new user account, set the CreateUserText property to text such as Click here to register and the CreateUserUrl property to the URL of the Help page, such as ~/register.aspx.

   Note

   This step and the following steps require that the destination URLs be in a location that does not require authentication.

2. To add a link to the Login control that takes the user to a URL for users to recover their passwords, set the PasswordRecoveryText property to text such as Forgot your password? and the PasswordRecoveryUrl property to the URL of the Help page, such as ~/recoverpassword.aspx.

3. To add a link to the Login control that takes the user to a Help URL, set the HelpPageText property to text such as Need Help? and the HelpPageUrl property to the URL of the help page, such as ~/userhelp.aspx.

To add images to the Login control

• To use an image instead of a Log In button, set the LoginButtonImageUrl property to the URL of your login image file, such as ~/images/login.gif.

  You can also include images with the links to the create user URL, password recovery URL, and Help URL using the PasswordRecoveryIconUrl, CreateUserIconUrl, and HelpPageIconUrl properties, respectively.

Converting the Login Control to a Template

You can convert the Login control into a template that is defined in the markup as a table that contains ASP.NET controls such as Label and TextBox . You can then use these elements or add your own to create a custom template for your Login control. Notice that the same control IDs are used for the controls that make up the Login template as in the default template.

To use a template with the Login control

1. Place a Login control on a page in Design view.

2. Right-click the control and select Convert to Template from the shortcut menu.

How the Login control is converted depends on the DOCTYPE declaration. If the DOCTYPE declaration is set to XHTML 1.0 Transitional (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">), styles are applied to the table that is created when the Login control is converted to a template. If the DOCTYPE declaration is not set to XHTML 1.0 Transitional or is absent, no style information is persisted to the outer table that is generated.

For example, if you set the relative font size on the Login control, and then convert the control to a template, the relative font size is not persisted to the table. The following example shows a Login control with a font size set to X-Large.

<asp:login id="Login2" runat="server" font-size="X-Large" BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" ForeColor="#333333">
    <TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.9em" ForeColor="White" />
    <InstructionTextStyle Font-Italic="True" ForeColor="Black" />
   <TextBoxStyle Font-Size="0.8em" />
    <LoginButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px"
    Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" />
</asp:login>

When the Login control in the code above is converted to a template, the table created does not have any of the styles applied. The following example is a snippet of the code generated from the control above when it is converted to a template.

<asp:login id="Login2" runat="server" font-size="X-Large" BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" ForeColor="#333333">
    <TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.9em" ForeColor="White" />
    <InstructionTextStyle Font-Italic="True" ForeColor="Black" />
    <TextBoxStyle Font-Size="0.8em" />
    <LoginButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px"
    Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" />
    <LayoutTemplate>
    <table border="0" cellpadding="4" cellspacing="0" style="border-collapse: collapse">
...

If you want to have the style attributes also apply to the table created when you convert the Login control to a template, ensure that the DOCTYPE for the page is set to XHTML 1.0 Transitional before you select Convert to Template from the control menu in Design view.

See Also

Concepts

Customizing the Appearance of ASP.NET Login Controls

Other Resources

Login Toolbox Controls

ASP.NET Themes and Skins