March 2009 – Nuno Gomes /* Code Adventures */

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">
//<![CDATA[
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">
//<![CDATA[
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 !!!

Month: March 2009

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