Why ASP.NET is leaky... Example of over-engineering

Ayende has been talking about leaky abstraction a lot in his recent posts about ASP.NET. He is especially hates a lot on the viewstate and postback handling on ASP.NET. This is one of them:
http://ayende.com/Blog/archive/2007/03/20/WebForms-and-lies.aspx

Be frank I have never develop something so heavy that I have to consider all the viewstate issues etc. However I do come across very much issue when I want to do dynamic control creation in asp.net....

But, this is not what I aim to talk about in this article. What I wanna share with you all is an aspect of web development myself has interpreted as a leisure developer on both asp.net and monorail, and what I had come across in asp.net makes me feel its leaky (and why monorail/ruby on rails is right).

Lack of Model Validation
Lets start with a simple example. Try to implement an online shop application using asp.net and monorail. When you want to do validation, asp.net tells you to put validators on the form. So you have validator in customers' billing address maintenance screen, as well as order checkout (when you allow user to ad-hoc override the address of the order). You end up have 2 validators doing exactly the same function. If you have shipping address as well, then it goes to 3 validators.

All a sudden your customer hated your program to enforce 'City' to be entered in address, so they want you to release the control on City. I end up going through all 3 pages, removing the validators, and as I am such a forgettful person, I forget one of them and I end up being kicked because of this issue.

In MR/RoR, ORM feature with validation is built in, so all you need to do is to add
[ValidateNonEmpty]
public string City {
...
}

This will trigger all form generator to apply mandatory validation, and everything is done with client side script. When my customer wants me to release the control, simply I just remove this attribute and everything are released. No hassle, no duplicate work.

Over-engineered Abstraction
I have my own term to describe this issue. As oppose to leaky abstraction described by Ayende, I call this 'over-engineering'. This is a good term I think as it describes the tendency of people try to over complicate simple matters very well.

A very good example is the 'need' of 10+ state events in a typical ASP page. Can you really think of a good reason why I need 10+ state events instead of just one? Personally I can hardly think of any. I have seen the entire asp.net model trying to do something too much like Windows. The fact so many people stated are, web, is designed to be stateless. Web has never getting more complicate than:

GET bugthis.blogspot.com
...
and return some HTML. The most complicated one would be a POST with some variables written to server, but thats all.

ASP.NET wants you to forget this, and learn 1000+ classes in System.Web to do your job. Lets use a very typical example in GridView. In ASP.NET, with the help of your pretty designer, you can create a grid very easy: just drag over and put it there. But- how can you, say, get 3 (note, not two) alternative styles rotated on the grid row, plus an Edit/Add/Delete link? You have couple choices:
1. Rewrite a control supporting 3 row styles
2. Use this everytime in RowDataBound (READ: EVERYTIME, EVERY GRID):
switch (e.Row.RowIndex % 3)
{
case 0:
e.Row.BackColor = Color.Red;
break;
case 1:
e.Row.BackColor = Color.Green;
break;
case 2:
e.Row.BackColor = Color.Blue;
break;
}
3. Give it up, the stock control will only support 2.

In Monorail, I write a component like this:
public class RepeaterComponent:ViewComponent
{
private string[] _styles;
private IEnumerable _collection;
private string _rowItemName;
public override void Initialize()
{
_styles = ((string)ComponentParams["styleClass"]).Split(';');
_rowItemName = (string) ComponentParams["rowItemName"];
_collection = (IEnumerable)ComponentParams["collection"];
}
public override void Render()
{
if (HasSection("header"))
RenderSection("header");
int currentStyleIndex=0;
foreach (object item in _collection)
{
PropertyBag[_rowItemName] = item;
PropertyBag["styleClass"] = _styles[currentStyleIndex];
RenderSection("row");
currentStyleIndex++;
if (currentStyleIndex == _styles.Length) currentStyleIndex = 0;

}
if (HasSection("footer")) RenderSection("footer");
}

public override bool SupportsSection(string name)
{
return name == "row" || name == "header" || name == "footer";
}

}

And then, I put this in my NVelocity view:
<style>
tr.red
{
background-color: red;
}
tr.green
{
background-color: green;
}
tr.blue
{
background-color: blue;
}
</style>

#blockcomponent (RepeaterComponent with "collection=$users" "rowItemName=user" "styleClass=red;green;blue")
#header
<table>
<tr>
<th>User Name</th>
</tr>
#end
#row
<tr class="$styleClass">
<td >
$user.UserName
</td>
</tr>
#end
#footer
</table>
#end
#end

You will say its more code, but within 30 minutes I got a repeater that does everything I need on rotating style, flexible layout (works on table, bullet list).

In ASP.NET, that routine will only help you when you have 3 colors, I think when you have multiple and decided to do something like my rotation style, its not going to be that simple (any brave challenger?) Whats more is you need a control that handles every repeater, even div sections.

Not Designer Friendly
You might still disagree with me on the previous part. But try to see the source of what ASP.NET generates:
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNjc2NTE4NTMzD2QWAgIDD2QWAgIBDzwrAA0CAA8WBh4LXyFEYXRhQm91bmRnHglQYWdlQ291bnQCAR4LXyFJdGVtQ291bnQCBmQMFCsAAhYIHgROYW1lBQZWYWx1ZTEeCklzUmVhZE9ubHloHgRUeXBlGSsCHglEYXRhRmllbGQFBlZhbHVlMRYIHwMFBlZhbHVlMh8EaB8FGSsCHwYFBlZhbHVlMhYCZg9kFg4CAQ8PFgQeCUJhY2tDb2xvcgqNAR4EXyFTQgIIZBYEZg8PFgIeBFRleHQFB1dpbGxpYW1kZAIBDw8WAh8JBQVZZXVuZ2RkAgIPDxYEHwcKTx8IAghkFgRmDw8WAh8JBQdXaWxsaWFtZGQCAQ8PFgIfCQUFWWV1bmdkZAIDDw8WBB8HCiUfCAIIZBYEZg8PFgIfCQUHV2lsbGlhbWRkAgEPDxYCHwkFBVlldW5nZGQCBA8PFgQfBwqNAR8IAghkFgRmDw8WAh8JBQdXaWxsaWFtZGQCAQ8PFgIfCQUFWWV1bmdkZAIFDw8WBB8HCk8fCAIIZBYEZg8PFgIfCQUHV2lsbGlhbWRkAgEPDxYCHwkFBVlldW5nZGQCBg8PFgQfBwolHwgCCGQWBGYPDxYCHwkFB1dpbGxpYW1kZAIBDw8WAh8JBQVZZXVuZ2RkAgcPDxYCHgdWaXNpYmxlaGRkGAEFCUdyaWRWaWV3MQ9nZHLwlQri9Rg4hiZHDTVtYb0X/c7A" />
</div>

<div>
<div>

<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
<tr>
<th scope="col">Value1</th><th scope="col">Value2</th>
</tr><tr style="background-color:Red;">
<td>William</td><td>Yeung</td>
</tr><tr style="background-color:Green;">
<td>William</td><td>Yeung</td>

</tr><tr style="background-color:Blue;">
<td>William</td><td>Yeung</td>
</tr><tr style="background-color:Red;">
<td>William</td><td>Yeung</td>
</tr><tr style="background-color:Green;">
<td>William</td><td>Yeung</td>

</tr><tr style="background-color:Blue;">
<td>William</td><td>Yeung</td>
</tr>
</table>
</div>

</div>
</form>

Why I got 2 divs and a form where I don't suppose to have any post activity? Simple. Thats ASP.NET's generation. You end up wasted bandwidth on _viewState and the useless tag, plus more importantly- your designer originally writes:
<style>
td.red
{
...
}
</style>

Now they have to take care the form and divs additions. Send that HTML to your designer and I am sure they will hate you a lot. :) Not to mention if you try to give them the .aspx, most people would not be able to modify them properly, thanks to the abstraction!

So, is asp.net a good approach? For people who never want to get involve with html/javascript, maybe. But for others who need the native power, I would suggest monorail.

ASP.NET is not alone. I feel a lot of so called 'modern' framework, including a lot of those in Java world, are heading the same direction. Thats why Ruby on Rails get so much attention and praise when finally a model with strict MVC architecture without trading off your raw HTML power and complicating things.