Mar2009
29

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

by nmgomes

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:

  • ASP.NET Controls - Improving automatic ID generation : Introduction ( Part 1)
  • ASP.NET Controls - Improving automatic ID generation : Concept ( Part 2)
  • ASP.NET Controls - Improving automatic ID generation - Architectural Changes ( Part 3)
  • ASP.NET Controls - Improving automatic ID generation : The ShortIDs Naming Provider (Part 4)

    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 !!!

  • Filed in: ASP.NET