Creating a Tableless LoginControl with ASP.Net 2.0


The trouble with using some of the built in .Net controls like LoginControl and TreeView is that they render their output in tables and as we know tables should only be used to display tabular data not control the layout of a web page.

If we wanted to write semantic markup and style our web pages so they have proper accessible output we need to override the way ASP.Net controls render their HTML.

One way of doing this is using the CSS friendly control adapters which come with a number of built in controls for changing the rendered output of certain ASP.Net controls. Using these controls you can completely alter the way each ASP.Net control renders its output to the browser. The drawback here is that you need to reference another assembly and write .Net code if you need to modify anything.

The LoginControl supplies you with a nice ContentTemplate section that allows you to control the rendered output directly in the markup.

The following ASP.Net and CSS demonstrates how to create a tableless LoginControl. I apologise for the code formatting, it seems no matter what I do wordpress doesn’t like code :(. Best thing to do is copy and paste into a proper editor window to see what I’ve done.

Markup:

<div id=”Registration”>
<asp:CreateUserWizard ID=”CreateUserWizard1″ runat=”server”>
<WizardSteps>
<asp:CreateUserWizardStep ID=”CreateUserWizardStep1″ runat=”server”>
<ContentTemplate>
<h1>Sign Up for Your New Account</h1>
<div id=”Security”>

<span class=”FormLabel”>
<
asp:Label ID=”UserNameLabel” runat=”server” AssociatedControlID=”UserName”>User Name:</asp:Label>
</span>
<span class=”FormControl”>
<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=”CreateUserWizard1″>*
</asp:RequiredFieldValidator>
</span>
<span class=”FormLabel”>
<
asp:Label ID=”PasswordLabel” runat=”server” AssociatedControlID=”Password”>Password:</asp:Label>
</span>
<span class=”FormControl”>
<asp:TextBox ID=”Password” runat=”server” TextMode=”Password”></asp:TextBox>
<
asp:RequiredFieldValidator ID=”PasswordRequired” runat=”server” ControlToValidate=”Password”
ErrorMessage
=”Password is required.” ToolTip=”Password is required.” ValidationGroup=”CreateUserWizard1″>*</asp:RequiredFieldValidator>
</span>

<span class=”FormLabel”>
<
asp:Label ID=”ConfirmPasswordLabel” runat=”server” AssociatedControlID=”ConfirmPassword”>Confirm Password:</asp:Label>
</span>
<span class=”FormControl”>
<
asp:TextBox ID=”ConfirmPassword” runat=”server” TextMode=”Password”></asp:TextBox>
<
asp:RequiredFieldValidator ID=”ConfirmPasswordRequired” runat=”server” ControlToValidate=”ConfirmPassword”
ErrorMessage
=”Confirm Password is required.” ToolTip=”Confirm Password is required.”
ValidationGroup=”CreateUserWizard1″>*
</
asp:RequiredFieldValidator>
</span>
<span class=”FormLabel”>
<
asp:Label ID=”EmailLabel” runat=”server” AssociatedControlID=”Email”>E-mail:</asp:Label>
</span>
<span class=”FormControl”>
<asp:TextBox ID=”Email” runat=”server”></asp:TextBox>
<
asp:RequiredFieldValidator ID=”EmailRequired” runat=”server” ControlToValidate=”Email”
ErrorMessage
=”E-mail is required.” ToolTip=”E-mail is required.” ValidationGroup=”CreateUserWizard1″>*</asp:RequiredFieldValidator>
</span>
<span class=”FormLabel”>
<
asp:Label ID=”QuestionLabel” runat=”server” AssociatedControlID=”Question”>Security Question:</asp:Label>
</span>
<span class=”FormControl”>
<asp:TextBox ID=”Question” runat=”server”></asp:TextBox>
<
asp:RequiredFieldValidator ID=”QuestionRequired” runat=”server” ControlToValidate=”Question”
ErrorMessage
=”Security question is required.” ToolTip=”Security question is required.”
ValidationGroup=”CreateUserWizard1″>*</asp:RequiredFieldValidator>
</span>
<span class=”FormLabel”>
<
asp:Label ID=”AnswerLabel” runat=”server” AssociatedControlID=”Answer”>Security Answer:</asp:Label>
</span>
<span class=”FormControl”>
<asp:TextBox ID=”Answer” runat=”server”></asp:TextBox>
<
asp:RequiredFieldValidator ID=”AnswerRequired” runat=”server” ControlToValidate=”Answer”
ErrorMessage
=”Security answer is required.” ToolTip=”Security answer is required.”
ValidationGroup=”CreateUserWizard1″>*</asp:RequiredFieldValidator>
</span>
<span class=”FormLabel”>
<
asp:CompareValidator ID=”PasswordCompare” runat=”server” ControlToCompare=”Password”
ControlToValidate
=”ConfirmPassword” Display=”Dynamic” ErrorMessage=”The Password and Confirmation Password must match.”
ValidationGroup=”CreateUserWizard1″></asp:CompareValidator>
</
span>
<span class=”FormControl”>
<
asp:Literal ID=”ErrorMessage” runat=”server” EnableViewState=”False”></asp:Literal>
</span>
</div>
</ContentTemplate>
</asp:CreateUserWizardStep>
<asp:CompleteWizardStep ID=”CompleteWizardStep1″ runat=”server”>
</asp:CompleteWizardStep>
</WizardSteps>
</asp:CreateUserWizard>
</div>

 

CSS:
#Security
{
margin-top: 10px;
width: 60%;
text-align: left;
border: dashed 1px #999999;
padding: 20px;
background-color: #f9f9f9;
}

#Registration
{
margin-top: 5px;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 70%;
font-size: 1.2em;
}

#Registration h1
{
margin-top: 20px;
margin-bottom: 20px;
}
#Registration
input, textarea
{
width: 180px;
margin-bottom: 5px;
}

.Boxes
{
width: 1em;
}
.FormLabel
{
float: left;
width: 120px;
font-weight: bold;
}
.FormControl
{
float: left;
width: 45%;
}

This should provide you with a nicely formatted form that is rendered using DIV’s and SPAN’s rather than in a TABLE. You should now be able to style the markup and control layout better to provide your end users with a more accessible web page.

kick it on DotNetKicks.com

6 thoughts on “Creating a Tableless LoginControl with ASP.Net 2.0

  1. Lee,

    While your example is perfect for what I need, I ran into some browser problems.

    Under IE 6, your tableless CreateUserWizard looks fine AS LONG AS I do not expand/explode the page to full screen. But, once it’s at full screen, the prompts and textboxes do not wrap properly. The 2nd prompt is at the end of the first line, etc.

    And, under Firefox, it does not look right either.

    Is there some simple workaround? Might you have omitted something simple?

    Dave

  2. Hi Dave,

    Not really, this is kind of meant to be an example of how to implement it, I havn’t got around to making it fully cross browser compatible yet I’m afraid that up to you.

    Glad it helped though.

  3. If it doesn’t work across multiple browsers what is the point really?

    So – tables are bad you say!
    But css that doesn’t work is good? Come on.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s