ASP.NET Controls – Improving automatic ID generation : Introduction ( Part 1)

Some time ago, while developing a large corporate ASP.NET application with high complex layout requirements and thus, many custom composite controls, I was faced with the following problem:

The generated HTML of my pages don’t meet my bandwidth constrain of 50Kb/page, even after applying the traditional ways to reduce page size (compression, viewstate optimization). Looking carefully at the HTML source I found that a big amount of size has due to the large values ‘id’ and ‘name’ attributes. The sum of all this values could be up to 40% of page size, and this became a real issue to me.

So, ASP.NET gives us out of the box a unique strategy to generate the control’s ID values. Although such strategy is most of time a satisfactory approach, there are cases when it can become problematic. [more]

Let me show what I’m talking about:

<input id="ctl00_cphAdmin_cbEnableCommentsModeration" checked="checked" name="ctl00$cphAdmin$cbEnableCommentsModeration" type="checkbox" />

This line of HTML comes from my blog Settings panel (BlogEngine.NET), and, as you can see, the id and name attributes are responsible for a large part of the size of the HTML line. To be precise this two attributes length represent 59.3% of the total length.

What if, somehow, we were able to change the way ASP.NET controls ids are generated? What if we are able to generate something like C0_C3_C1 to represent the some control id?

Such approach will produce the following HTML:

<input id="C0_C3_C2" type="checkbox" name="C0$C3$C2" checked="checked" />

This way the total HTML length is almost 53% smaller than the standard ASP.NET way. Great improvement!

Now think about all the javascript code that get elements by id, like validator’s generated code do. All this statements will also be smaller. This is getting even better!

It seems that this approach is good enough to try an implementation, but ASP.NET presents a major obstacle to accomplish this task: All the Id generation process is done privately at Control class, without any extendibility point.

Without extension points I was forced to create a specific controls for each control I want to change the ID generation process.

See also:

Part 2 – The Concept

ASP.NET – Tag Mapping

Tag Mapping is not a new ASP.NET 2.0 feature, but only recently many people discover it.

<add tagType=”System.Web.UI.WebControls.TextBox”

The use of Tag Mapping allow us to, at parsing time, replace a given control type with other control type. The only constrain is that new control type extends primary control type.

If I use Tag Mapping with Web Controls everything works fine but if, instead, I use Html Controls, like HtmlForm, with tag mapping no mapping is done.

Using Reflector I found no reason for this behavior.