Removing "ctl" prefix on HTML id attributes (code included) RRS feed

  • Question

  • User354449168 posted

    It's always bugged me that ASP.NET adds "ctlXXX_" to my HTML element id attributes.  It's particularly irritating because some elements I've defined CSS styles specifically for them, and for ASP.NET to do so breaks that styling.  I put in some time this afternoon to write some code to eliminate that behavior.  This little snippet implements a derived class, ExtendedUserControl which catches the RenderControl method and uses a Regular Expression to replace the misshapen ID tag.  Using the RegEx enables underscores ("_") to still be used in id tag names, as it only grabs the ctlXXX_ instances.

    How to use this:

    1. Create a new class in your App_Code folder called "ExtendedUserControl.cs"
    2. Copy and paste the code from below into this new class.
    3. Create a new "Web User Control"
    4. Change the UserControl inheritance to ExtendedUserControl
      1. For VB.NET:  Change "Inherits System.Web.UI.UserControl" to "Inherits ExtendedUserControl"
      1. For C#.NET:  Change " : System.Web.UI.UserControl" to " : ExtendedUserControl"


     That's it.  Happy coding.  (Tested with .NET framework 2.0)


    1    using System;
    2 using System.IO;
    3 using System.Text.RegularExpressions;
    4 using System.Data;
    5 using System.Configuration;
    6 using System.Web;
    7 using System.Web.Security;
    8 using System.Web.UI;
    9 using System.Web.UI.HtmlControls;
    10 using System.Web.UI.WebControls;
    11 using System.Web.UI.WebControls.WebParts;
    12 13 /// <summary>
    14 /// Extended User Control that doesn't botch the HTML id attribute.
    15 /// </summary>
    16 17 public partial class ExtendedUserControl : System.Web.UI.UserControl
    18 {
    19 public override void RenderControl(HtmlTextWriter writer)
    20 {
    21 // Render the control, placing the output in a string 22 StringWriter sw = new StringWriter(new System.Text.StringBuilder(),
    23 System.Globalization.CultureInfo.InvariantCulture);
    24 HtmlTextWriter htw = new HtmlTextWriter(sw);
    25 base.RenderControl(htw);
    26 string chtml = sw.ToString();
    27 sw.Close();
    28 29 // Match HTML id attributes that start with 'ctl' 30 Regex r = new Regex(@"\sid=""ctl[0-9]*_[A-Za-z][A-Za-z0-9]*""");
    31 32 // Remove ASP.NET's adjusted id tag prefix 33 foreach (Match m in r.Matches(chtml))
    34 {
    35 //this.Response.Write(Regex.Replace(m.Value, @"ctl[A-Za-z0-9]*_", "") + "<br/>"); 36 chtml = chtml.Replace(m.Value, Regex.Replace(m.Value, @"ctl[A-Za-z0-9]*_", ""));
    37 }
    38 39 this.Response.Write(chtml);
    40 }
    41 }


    Tuesday, March 25, 2008 9:16 PM

All replies

  • User-1827083345 posted


    The main problem with this is that it will probably completely break AJAX.

    The IDs are necessary for the framework to understand where things are in the control hierarchy,

    The ctl00 originates from a server control for which you haven't specified an ID. It must be at the top of your control tree. Are you using a Master Page? You might have to specify IDs for your page placeholders. Then, you can target your CSS rule at #PageID_MyControl.

    What bugs me about the IDs (and hence my search which found this post!) is the fact that they are added to so many elements unneccesarily. Unless really complex AJAX things are going on, I rarely need the IDs at all (in my application they're far too complex and changeable to use in .css - so I mostly just use classes, except for a few top-level elements with IDs). For a lot of Javascript behaviour I'm also using classes as flags for the Javascript functions, so the IDs are still unnessesary; apart from my UpdatePanels, and any form elements.

    I'm looking into a way to use a modified HtmlTextWriter to eliminate unwanted IDs from being written out at all. I'll post if I have any luck.


    Thursday, July 10, 2008 10:40 AM
  • User1262994189 posted

     you dont have to write so much code... javascript requires rendered names of elements on the page.

    basically you can add attritubes from the code page of asp.net. use ClientID to add attritubes and call

    for example 

    TextBox1.Attributes.Add("onkeydown", "javafunction(" + TextBox1.ClientID + ")" );

    asp.net will replace the id witt the newly created one


    Friday, August 1, 2008 5:54 AM