CSS/jQuery Friendly Control IDs

Most of you might have heard about the changes to the way in which the “ID” attribute will be rendered and the overall emphasis on cleaner markup in ASP .NET 4.0 . But if you are like me - still stuck with ASP .net 3.5 – there are ways to escape from horrible control ids like ctl00_ContentPlaceholder1_ListView1_ctrl0_Label1.

The value of the ID attribute that you see in the final HTML markup is picked up from the ClientID property of a control. So, in effect, you can inherit any control in ASP .net and override the ClientID property and return any value you want and this will show up in the final markup.

#An Example - “Friendlier” HiddenField

Talk is cheap. Show me the code - Linus Torvalds

Okay Linus, whatever you say! Here is the code

public class FriendlyHiddenField:HiddenField
{
    public override string ClientID
    {
        get
        {
            return ID;
        }
    }
}

Here, I create a “FriendlyHiddenField” that inherits from HiddenField, but overrides the ClientID property, and returns the value of the ID property of the control. So if you have a HiddenField like so,

<asp:FriendlyHiddenField ID="MyHiddenField" runat="server" >

The rendered HTML would be

<input type="hidden" id="MyHiddenField" />

You can do the same for any control in ASP .NET and this should give you fine-grained control over your client side identifiers.

comments powered by Disqus