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

BlogEngine.NET – BookShelf Widget

In order to complete my migration from 1.3 to 1.4 version I needed to replace the books control I had with a widget that do the same.

After a fast Google search I found no widget with such functionality.

Armed with lots of confidence I decided to create a new widget, the BookShelf widget, to meet my exact needs:

  • display the book thumbnail image
  • show the book name and book author name

The previous book control has been gently made available by John Dyer, and I simply didn’t worry about the layout, I used the old one with minor changes on binding.

books books_edit

This widget is obviously editable since I want to manage the books in the shelf, so I create an edit interface where its very simple to add, edit and remove books.

As a final note, I can simply reaffirm that work with widgets is very simple and straight forward.

Download, try it, and naturally let me now if it meet your needs too.