Where does ASP.Net get its rendered IDs from?

Question

Hi,

I've inherited a project with some nasty JavaScript that depends on hard coded object ids.
i.e. There are lots of places where it does things like this

var magazine = document.getElementById('repModuleDisplay__ctl3_chkCats_0');

When the page renders in my UAT environment, the HTML looks like this, and everything works OK.

<input id="repModuleDisplay__ctl3_chkCats_0" 
    type="checkbox" name="repModuleDisplay:_ctl3:chkCats:0"  
    ... etc

However, when I put it on my Production environment, the HTML is suddenly rending like this:

<input id="repModuleDisplay_ctl03_chkCats_0" 
    type="checkbox" name="repModuleDisplay$ctl03$chkCats$0" 
    ... etc

The difference in ids means that the JavaScript can't find the Element, and fails.

In an ideal world, I'd scrap the buggy JavaScript and do it again properly, but for a quick fix, I'd like to know what is causing the difference in rendering between the two environments.

Does anyone have any ideas?

Thanks, Neil

Answer 1

Use .NET4 and set the ClientIDMode property on your controls that you want to use with js.

EG;

  <asp:TextBox ID="txtComment" runat="server" CssClass="myClass"
    ClientIDMode="Static" MaxLength="1024"></asp:TextBox>

Answer 2

You must use clientID for asp.net control.

'<%=mycontrol.ClientID %>'

Answer 3

The quickest and easiest fix I can think of -- and it's probably not particularly quick or easy if the code is all over the place -- is to use the actual ClientID property of the control instead of trying to guess what the generated id might be:

// i've assumed that the control is named chkCats
var magazine = document.getElementById('<%= chkCats.ClientID %>');

Answer 4

This link gives you a brief description of how ASP.NET creates the ids, and all the other posters have recommended the right solution of using the control's ClientID.

If you want to steer clear of the ASP style tags, then another option is to emit some js to your page during the PreRender:

StringBuilder sb = new StringBuilder();
sb.AppendLine(string.Format("var myTextBox = document.getElementById('{0}');", MyTextBox.ClientID));
if (!Page.ClientScript.IsClientScriptBlockRegistered(this.GetType(), "myElementDefinitions"))
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "myElementDefinitions", sb.ToString());

and then in your javascript code you just refer to it with the name myTextBox. This option may not suit you, depends upon your code and how often you are using ASP tags to reference the same control id.