ASP.NET Controls – Improving automatic ID generation : Live example

Two weeks ago I was surprised by a CodeProject post written by Jeff Chin. The post is about How to shorten ASP.NET automatically generated control IDs and is an extension to my previous work on the same subject:

Also, Jeff is using this approach in the “wild” and you can see it running at http://www.biocompare.com.Take a look at these two html source excerpts from the above site:

<div class="checkBoxList module">
    <span id="T0_T8_T25_T1" class="columnCheckBoxList sub2 module">
        <input id="T0_T8_T25_T1_0" type="checkbox" name="T0$T8$T25$T1$0" /><label for="T0_T8_T25_T1_0">Life
            Science</label><input id="T0_T8_T25_T1_9" type="checkbox" name="T0$T8$T25$T1$9" /><label
                for="T0_T8_T25_T1_9">Industry News</label><br />
        <input id="T0_T8_T25_T1_1" type="checkbox" name="T0$T8$T25$T1$1" /><label for="T0_T8_T25_T1_1">Molecular
            Biology</label><input id="T0_T8_T25_T1_10" type="checkbox" name="T0$T8$T25$T1$10" /><label
                for="T0_T8_T25_T1_10">New Technology Alerts</label><br />
        <input id="T0_T8_T25_T1_2" type="checkbox" name="T0$T8$T25$T1$2" /><label for="T0_T8_T25_T1_2">Immunology</label><input
            id="T0_T8_T25_T1_11" type="checkbox" name="T0$T8$T25$T1$11" /><label for="T0_T8_T25_T1_11">Proteomics</label><br />
        <input id="T0_T8_T25_T1_3" type="checkbox" name="T0$T8$T25$T1$3" /><label for="T0_T8_T25_T1_3">Neuroscience</label><input
            id="T0_T8_T25_T1_12" type="checkbox" name="T0$T8$T25$T1$12" /><label for="T0_T8_T25_T1_12">Mass
                Spectrometry</label><br />
        <input id="T0_T8_T25_T1_4" type="checkbox" name="T0$T8$T25$T1$4" /><label for="T0_T8_T25_T1_4">Cell
            Biology</label><input id="T0_T8_T25_T1_13" type="checkbox" name="T0$T8$T25$T1$13" /><label
                for="T0_T8_T25_T1_13">Lab Automation</label><br />
        <input id="T0_T8_T25_T1_5" type="checkbox" name="T0$T8$T25$T1$5" /><label for="T0_T8_T25_T1_5">Cancer</label><input
            id="T0_T8_T25_T1_14" type="checkbox" name="T0$T8$T25$T1$14" /><label for="T0_T8_T25_T1_14">Pharmaceutical
                News</label><br />
        <input id="T0_T8_T25_T1_6" type="checkbox" name="T0$T8$T25$T1$6" /><label for="T0_T8_T25_T1_6">Microbiology</label><input
            id="T0_T8_T25_T1_15" type="checkbox" name="T0$T8$T25$T1$15" /><label for="T0_T8_T25_T1_15">Cell
                Signaling</label><br />
        <input id="T0_T8_T25_T1_7" type="checkbox" name="T0$T8$T25$T1$7" /><label for="T0_T8_T25_T1_7">Genomics</label><input
            id="T0_T8_T25_T1_16" type="checkbox" name="T0$T8$T25$T1$16" /><label for="T0_T8_T25_T1_16">Bioprocess</label><br />
        <input id="T0_T8_T25_T1_8" type="checkbox" name="T0$T8$T25$T1$8" /><label for="T0_T8_T25_T1_8">Drug
            Discovery</label><input id="T0_T8_T25_T1_17" type="checkbox" name="T0$T8$T25$T1$17" /><label
                for="T0_T8_T25_T1_17">Plant Biology</label></span> <span id="T0_T8_T25_T2" style="color: Red;
                    display: none;"></span><a href="http://www.biocompare.com/" id='selectAll' class="button buttonGeneral"
                        onclick="return false;">Select All</a>
</div>

and

<script type="text/javascript">
var Page_ValidationSummaries = new Array(document.getElementById("T0_T8_T25_T0"));
var Page_Validators = new Array(document.getElementById("T0_T5_T5"), document.getElementById("T0_T8_T25_T2"), document.getElementById("T0_T8_T25_T4"), document.getElementById("T0_T8_T25_T5"));
</script>

<script type="text/javascript">
var T0_T5_T5 = document.all ? document.all["T0_T5_T5"] : document.getElementById("T0_T5_T5");
T0_T5_T5.controltovalidate = "T0_T5_T6";
T0_T5_T5.errormessage = "Please enter a search word";
T0_T5_T5.validationGroup = "grpSiteSearch";
T0_T5_T5.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
T0_T5_T5.initialvalue = "";
var T0_T8_T25_T0 = document.all ? document.all["T0_T8_T25_T0"] : document.getElementById("T0_T8_T25_T0");
T0_T8_T25_T0.validationGroup = "vgNLSignUp";
var T0_T8_T25_T2 = document.all ? document.all["T0_T8_T25_T2"] : document.getElementById("T0_T8_T25_T2");
T0_T8_T25_T2.errormessage = "Please select atleast one Newsletter Interest";
T0_T8_T25_T2.display = "None";
T0_T8_T25_T2.validationGroup = "vgNLSignUp";
T0_T8_T25_T2.evaluationfunction = "CustomValidatorEvaluateIsValid";
T0_T8_T25_T2.clientvalidationfunction = "validateCheckBox";
var T0_T8_T25_T4 = document.all ? document.all["T0_T8_T25_T4"] : document.getElementById("T0_T8_T25_T4");
T0_T8_T25_T4.controltovalidate = "T0_T8_T25_T6";
T0_T8_T25_T4.focusOnError = "t";
T0_T8_T25_T4.errormessage = "Please enter your email address";
T0_T8_T25_T4.display = "None";
T0_T8_T25_T4.validationGroup = "vgNLSignUp";
T0_T8_T25_T4.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
T0_T8_T25_T4.initialvalue = "";
var T0_T8_T25_T5 = document.all ? document.all["T0_T8_T25_T5"] : document.getElementById("T0_T8_T25_T5");
T0_T8_T25_T5.controltovalidate = "T0_T8_T25_T6";
T0_T8_T25_T5.focusOnError = "t";
T0_T8_T25_T5.errormessage = "Invalid E-mail address";
T0_T8_T25_T5.display = "None";
T0_T8_T25_T5.validationGroup = "vgNLSignUp";
T0_T8_T25_T5.evaluationfunction = "RegularExpressionValidatorEvaluateIsValid";
T0_T8_T25_T5.validationexpression = "^([\w-]+(?:\.[\w-]+)*(?:[\+]){0,1})@((?:[\w-]+\.)*\w[\w-]{0,66})\.([A-Za-z]{2,6}(?:\.[A-Za-z]{2})?)$";
</script>

As you can see, this approach really shorten the id value and is definitely reducing the total html size.

It’s public that ASP.NET 4.0 will bring some improvements on the generation of client IDs, but I still not seeing the ability to control how the ClientID are generated – “Hope is the last one to die”.

Good luck Jeff !!!

NunoGomesControlToolkit – Improving Web Apps performance

A few weeks ago I told you about a control toolkit I was making.

I decided to call him NunoGomesControlToolkit and is intended to improve web apps performance by decreasing total page size. This page size reduction is achieved by decreasing control ClientID size.

This control toolkit can be applied to any existing ASP.NET 2.0 Web Aplication by using the tagmapping configuration facility.

To obtain maximum redution it’s also recommended to extend webforms, masterpages and usercontrols not from regular Page, MasterPage and UserControl controls from ASP.NET framework but instead use the corresponding control from NunoGomesControlToolkit.

TagMapping is only used for markup interpretation and therefore all dynamic created controls are not mapped. To override this limitation its also included in this toolkit the DynamicControlBuilder class. Use this class to allow tagmapping over dynamic created controls.

As I promise, the control toolkit is now available at code.msdn.microsoft.com.[EDIT] Migrated to CodePlex.

I’m currently applying the NunoGomesControlToolkit to the BlogEngine.NET 1.3 version, and as soon as I test it I will make it available.