How to use ASP.NET Membership Login control with templates

The ASP.NET Membership Login control supports templates as other ASP.NET controls. You can customize the contents of the Login control without any limitation, by using templates. You can add any control you wanted to your Login control. The next markup shows how you can use a custom template for the Login control through the LayoutTemplate tag:

 

<asp:Login ID=”LoginCtrl” runat=”server”

BackColor=”aliceblue”

BorderColor=”Black”

BorderStyle=”double”>

<LayoutTemplate>

<h4>Log-In to the System</h4>

<td>

User Name:

<td>

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

<asp:RequiredFieldValidator ID=”UserNameRequired”  runat=”server”

ControlToValidate=”UserName”

ErrorMessage=”*” />

<asp:RegularExpressionValidator ID=”UsernameValidator” runat=”server”

ControlToValidate=”UserName”

ValidationExpression=”[\w| ]*”

ErrorMessage=”Invalid User Name” />

<td>

Password:

<td>

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

<asp:RequiredFieldValidator ID=”PasswordRequired” runat=”server”

ControlToValidate=”Password”

ErrorMessage=”*” />

<asp:RegularExpressionValidator ID=”RegularExpressionValidator1″ runat=”server”

ControlToValidate=”Password” ValidationExpression='[\w| !”§$%&amp;/()=\-?\*]*’

ErrorMessage=”Invalid Password” />

<asp:CheckBox ID=”RememberMe” runat=”server” Text=”Remember Me” />

<asp:Literal ID=”FailureText” runat=”server” /><br />

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

</LayoutTemplate>

</asp:Login>

 

By using this approach you don’t need to write any code for handling events if you use right controls and the correct ID values for these controls in place. The code just works as usual, except that you define the set of controls and the layout of these controls. Actually, the Login control requires at least two text boxes with the IDs UserName and Password and if you missed them the control throws an exception.  All the other controls are optional, but if you specify corresponding ID values (such as Login for the login button), the Login control automatically handles their events and behaves as when you used the predefined layouts for the control. The next table lists the special ID values, their required control types, and whether they are required or optional:

 

Control IDControl TypeRequired?
UserNameSystem.Web.UI.WebControls.TextboxYes
PasswordSystem.Web.UI.WebControls.TextboxYes
RememberMeSystem.Web.UI.WebControls.CheckBoxNo
FailureTextSystem.Web.UI.WebControls.LiteralNo
LoginAny control that supports event bubbling and a CommandNameNo

 

Important notes:

1. The control with the ID Login can be any control that supports event bubbling and a CommandName property. It is important that you set the CommandName property to Login, because otherwise the Login control won’t recognize it in the event-handling process. If you don’t add a control with the CommandName set to Login, you have to handle the event of the control yourself and write the appropriate code for validating the user name and password and for redirecting to the originally requested page.

2. You can also add controls with other IDs that are not related to the Login control at all. The previous code includes RequiredFieldValidator and RegularExpressionValidator controls for validating the UserName and Password fields appropriately.

3. When you are using LayoutTemplate, many of the properties originally offered by the Login control (described in the article: ASP.NET Membership Login control customization properties ) are not available anymore. Only the following properties are available:

– DestinationPageUrl;

– VisibleWhenLoggedIn;

– FailureAction;

– MembershipProvider;

– Password;

– Username;

– RememberMeSet;

All the style properties (described in the article How to manage ASP.NET membership Login control appearance)  and several properties for configuring text contents of default controls are not available in Visual Studio’s property editor anymore, because you can add them manually as separate controls or static text to the template for the Login control. If you still add them to the Login control when using the template mode, they simply get ignored because the template overrides the default UI of the Login control, which leverages these properties.