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:
- Your code is cluttered with excess HTML
- Making changes is prone to errors because you often have to cut up the fragments further and matching tags properly in a code view can be difficult
- Adding properties to control the layout usually results in scattered if-else blocks.
- Styling options are not very flexible without a property for each option
- Difficult to navigate and use on mobile devices such as a Blackberry
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. |
|
|
 |
|
|
|
|
|
|
|
|
Just to mention it in context with web standards and web control development....
ex. There is control adapter to the logincontrol etc.
CSSAdapters
"Welcome! ASP.NET is a great technology for building web sites but it would be even better if it provided more flexibility for customizing the rendered HTML. For example, the Menu control makes it simple to add a menu to a web site, but it would be better if it didn't create tags and was easier to style using CSS. Happily, it's easy to customize and adapt the Menu control to generate better HTML. Indeed, you can modify any ASP.NET control so it produces exactly the HTML you want.
The key is to use something that may be new to you: control adapters. These are little chunks of logic that you add to your web site to effectively "adapt" an ASP.NET control to render the HTML you prefer. The ASP.NET 2.0 CSS Friendly Control Adapters kit provides pre-built control adapters that you can easily use to generate CSS friendly markup from some of the more commonly used ASP.NET controls."
modified on Monday, June 16, 2008 2:05 PM
|
| Sign In·View Thread·PermaLink | 1.00/5 |
|
|
|
|
|
|
I was looking to learn a standardized way of doing the web components, your article is very helpful.
Thanks
|
| Sign In·View Thread·PermaLink | 5.00/5 |
|
|
|
|
|
|
Even if the article can be (and should be) enhanced, the philosophy, the concept and your enthusiasm deserves a 5.
hence you get mine.
|
| Sign In·View Thread·PermaLink | 5.00/5 |
|
|
|
|
|
|
volkan.ozcelik,
I plan on updating it to include proper LABEL elements - is there anything else in particular you'd like to see added?
-Steven
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Here are things come to my mind at a glance.
Email: <input type="text" /><br />
Pass: <input type="text" /><br />
will not validate from a strict point of view
The form element should be inside a container:
<p>
Email: <input type="text" /><br />
Pass: <input type="text" /><br />
</p>
actually
<div><label>email <input></div>
<div><label>passs <input></div>
will be a better structure imho (no it is not dividitis)
Secondly you can add some unobtrusive client-side validation
(preferably using AJAX which transforms gracefully, aka: progressive enhancement)
Third, more links and references at the end which will be nice to
i. persuade and
ii. direct
the intersted wannabe standardistas to the right path.
Cheers.
.: Volkan Ozcelik :. blog .: trials/errors/studies :. sardalya .: orkinos :.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Look at the final HTML-Code: The input elements are inside of divs. And the whole server control will be rendered inside a form element in ASP.NET. IMHO there's no violation of XHTML standards.
On the other hand, I like the inputs aligned with their left edges. This is the place where a 2 or 3 column table is suitable, left side with labels, middle or right side with inputs, the outermost right column probably with error controls.
Cheers.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
|
|
|
You're absolutely right for real-world apps - I didn't want to spend too much time on building the control heiarchy for this article. Luckily if you use a label control you can specify the control it links with and ASP.NET will take care of rendering the LABEL tags.
-Steven
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
I would love to see Microsoft build less table-driven controls and harness the power of .css.
.NET Consulting
http://www.kineticmedia.net
|
| Sign In·View Thread·PermaLink | 5.00/5 |
|
|
|
|
|
|
They already have. Do a search on CSS Control Adapters and you will find that they have built a ton of adapters that will output div/css based for the standard controls. What's more, they provide the source code so you can figure out to create adapters for your own controls.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
are HTML tables not a "web standard?"
HTML tables are, arguably, more "standard" than CSS is likely to be any time in the near future.
Grim (aka Toby) MCDBA, MCSD, MCP+SB
SELECT * FROM users WHERE clue IS NOT NULL
GO
(0 row(s) affected)
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
I agree that tables are beneficial in some cases (mainly when your displaying tabular data!) however the purpose of my article was not to argue table-based layouts versus DIV based layouts, rather, to show how by removing presentaion data from your web control you can simply control development - this just happened to not involve using tables. Also, being able to swap left and right with CSS would not have been possible (or easy anyways) with tables
-Steven
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
My comment was not really targeted at the content of your article. Your article is good, in as far as it addresses using CSS instead of tables to control page layout.
The comment is more targeted at your title, which when taken in context with the article itself, implies that HTML is no longer a standard. I find that CSS-evangelists seem to do this all the time, and it aggravates me. Not least because, as I implied in my earlier comment, doing layout with CSS requires a lot of extra work and "CSS hacks" to get it to work similarly across multiple browsers, whereas table layouts "just work."
Grim (aka Toby) MCDBA, MCSD, MCP+SB
SELECT * FROM users WHERE clue IS NOT NULL
GO
(0 row(s) affected)
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Though I admit I haven't tested this myself, I've heard from numerous sources that tables are much larger in memory than div's are, which is probably the biggest reason for using them. I just recently started forcing myself to learn how to use div's with the float and clear style attributes, and it's been slow going, but I'm learning. I still fall back on tables, though, when I just don't have the time to fiddle around.
Kyosa Jamie Nordmeyer - Taekwondo Yi (2nd) Dan
Portland, Oregon, USA
www.defaultn.com
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
You are right, HTML tables are a web standard. They are not however semantic HTML. Often standards and semantic HTML are thrown together. They are very different, but both very important, and although the title may have been a bit off I think the article was excellent.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
|
|
|
|
|
|
