Skip to main content
Email Password   helpLost your password?

Introduction

I've been an advocate of web standards for some time now and I'm frequently surprised to find new ways to simplify seemingly unrelated tasks. This article discusses how web standards can be used in ASP.NET control development to simplify some development tasks, build lighter weight and accessible controls and increase layout flexibility.

Background

This article assumes that you have a basic understanding and knowledge of Web Standards. If you need a primer there are a ton of references out there � one of my favorite being A List Apart.

Typical Scenario

You've probably built a glorified sign in page before using nested tables and lots of spacer images to control layout (see Traditonal.aspx in source) and a handful of properties to control how it is rendered. It may have even looked something like this:

Your HTML code probably resembled this:

<table> 
    <tr>
        <td>
            <table>
                <tr>
                    <td></td>
                </tr> 
                <tr> 
                    <td></td>
                </tr>
            </table>
        </td>
        <td></td>    
        <td>
            <table> 
                <tr>
                    <td></td>
                </tr>
                <tr>    
                    <td></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Like all good developers, you built a web control to handle its functionality so you could reuse it across sites. I've added a property named LayoutDirection to control swapping the two boxes left and right positions.

When it comes to custom control rendering of such controls, you probably often find yourself with if-else blocks scattered throughout your rendering code.

private void BuildControlTree() 
{ 
    Controls.Add(new LiteralControl(@"
        <table style=""width: 100%"" cellspacing=""0"" cellpadding=""0"">
        <tr> <td style=""width: 45%"">")); 

    if(LayoutDirection == Direction.Standard) 
        BuildNewCustomers(); 
    else 
        BuildExistingCustomers(); 

    Controls.Add(new LiteralControl(@"</td> <td style=""width: 10%""> </td> 
        <td style=""width: 45%;text-align:right;"">")); 

    if(LayoutDirection == Direction.Standard) 
        BuildExistingCustomers(); 
    else 
        BuildNewCustomers(); 

    Controls.Add(new LiteralControl(@"</td></tr></table>")); 
} 

This has the following drawbacks:

Using Web Standards

I always like to start with a barebones structure and then apply styling afterwards. The goal is to keep the presentation near identical. All we need here is a DIV for each box and something to designate a title (I choose the H3 tag in this case).

Our final HTML markup should look something like (See Standards.cs and WebStandards_Bare.aspx):

<div>
    <div id="signupdiv">
        <h3>Sign Up</h3>
        <p>New customers <a href="#">click here</a></p>
    </div>
    <div id="signindiv">
        <h3>Sign In</h3>
        <p>Existing Customers Sign In Below:</p> 
        Email: <input type="text" /><br /> 
        Pass: <input type="text" /><br /> 
        <input type="submit" value="Sign In" /> 
    </div>
</div>

The rendered output looks like:

Now all we need to do is apply some styling to get it looking right. For simplicity I assigned each DIV an ID in the web control and referenced it in CSS by ID. In the real world you would probably want to expose properties to control the CSS class assigned to the DIV. Our final CSS looks like:

#signupdiv, #signindiv { 
    width: 45%; 
    border: 1px solid #000; 
    padding: 1px 1px 0 1px; 
    text-align:center; 
    height: 175px; 
} 
#signupdiv 
{ 
    float:left; 
} 

#signindiv 
{ 
    float:right; 
} 

#signupdiv h3, #signindiv h3 
{ 
    color: #fff; 
    background: #444; 
    text-align:center; 
    width: 100%; 
    height: 25px; 
    font-weight:normal; 
} 

Remember how in the traditional model I added a property named LayoutDirection to the web control so I could swap the left and right boxes? That's no longer needed thanks to the floating techniques available. Not only did we remove an entire property block from our code, we replaced it with two lines of external CSS code!

Side-By-Side Comparison

We've accomplished identical layouts using both techniques, so how do they stack up next to each other? For simple tasks like this I often like to look at two factors: number of lines of code, size of rendered output. I know that line counting isn't a practical measurement for most projects, but in this case I think it's a good gauge of simplicity.

Traditional

Standards Based

% Change

Web Control Lines of Code

128

55

-57%

Rendered HTML Page Size

1,899 bytes

1,224 bytes

-35%

Easily viewable on Blackberry handheld

No

Yes

N/A

Easily viewable without style sheet?

No

Yes

N/A

Points of Interest

If you have been paying attention you might point out that I've excluded the size of the external CSS document (which, by the way, is 361 bytes). The reason for this is that because it will be cached by the browser, it only needs to be downloaded once.

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
Rantcan someone fix the messages for this article Pin
txghia58
18:57 13 Jun '08  
GeneralRe: can someone fix the messages for this article Pin
Steven Berkovitz
9:12 16 Jun '08  
GeneralIn Context - CSSAdapters [modified] Pin
Jon-W
22:43 23 Oct '07  
GeneralGood practices Pin
rajantawate1(http//www.jhatak.com)
5:37 5 Oct '07  
GeneralCongratulations For Being On The Light Side Pin
volkan.ozcelik
7:15 21 Mar '07  
GeneralRe: Congratulations For Being On The Light Side Pin
Steven Berkovitz
7:16 21 Mar '07  
GeneralRe: Congratulations For Being On The Light Side Pin
volkan.ozcelik
7:40 21 Mar '07  
GeneralRe: Congratulations For Being On The Light Side Pin
highandhigher
23:52 4 Oct '07  
GeneralWeb Standards Pin
mjl@hbs.uk.com
0:45 20 Mar '07  
GeneralRe: Web Standards Pin
Steven Berkovitz
4:41 20 Mar '07  
GeneralNice Article Pin
Kevin Jensen
5:24 19 Mar '07  
GeneralRe: Nice Article Pin
Joe Brinkman
1:58 20 Mar '07  
QuestionSince when... Pin
Grimolfr
4:33 19 Mar '07  
AnswerRe: Since when... Pin
Steven Berkovitz
4:41 19 Mar '07  
GeneralRe: Since when... Pin
Grimolfr
7:23 19 Mar '07  
GeneralRe: Since when... Pin
Jamie Nordmeyer
13:17 4 Oct '07  
AnswerRe: Since when... Pin
jamesLuterek
5:39 5 Oct '07  
Generalwhere is the source file? Pin
manu n
18:55 18 Mar '07  
GeneralRe: where is the source file? Pin
Steven Berkovitz
18:58 18 Mar '07  


Last Updated 4 Oct 2007 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2009