.NET /asp.net 4: Changes with automatic NAMES of controls?

Question

Hi there,

I just updated an app from .net 2.0 to .net 4.0 and i have noticed the following...

For example i have the following control..

 <input type="hidden" name="ctl00$cphMain$hfdFueraHorarioOficinaConfirmado" 
 id="cphMain_hfdFueraHorarioOficinaConfirmado" value="False" />

and then in javascript i did this before..

 var hfdFueraHorarioOficinaConfirmado=document.getElementById('ctl00_cphMain_hfdFueraHorarioOficinaConfirmado');

but after checking the Id within the html source once it renders and also doing some debugging with firebug etc....

it has changed from

  ctl00_cphMain_hfdFueraHorarioOficinaConfirmado

to

  cphMain_hfdFueraHorarioOficinaConfirmado

can anyone explain why? .... so should i basically do a search and replace and remove the ctl00??????

A little confused

Obviosuly the javascript line with the the ctl00_ infront return NULL because it doesn't exist, but removing this returns the object..

Any help or ideas really appreciated

Thanks

Answer 1

In your script files, you should look at always using the ClientID that you get on the server side (and output as a script variable on the page).

I think that there are also ways of setting how the control naming is done in 4.0, you might be able to pick a setting that solves your problem:

http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx

Answer 2

ASP.Net automatically generates client IDs for server-side controls.

As you've discovered, you must not rely on these automatically generated names staying the same.

In ASP.Net 4.0, you can set the ClientIDMode property to Static. Your ID will then be used untouched as the client-side ID.

In all versions of ASP.Net, you should use the ClientID property instead of hard-coding the ID.

For example: (In the ASPX page)

var hfdFueraHorarioOficinaConfirmado = 
    document.getElementById('<%= hfdFueraHorarioOficinaConfirmado.ClientID %>');

Answer 3

There have been some changes, which look like for the better, but Microsoft have created a compatibility flag you can set to retain backwards compatibility with .NET 3.5 - see this article.

You can set the ClientIDMode property to AutoID in your web.config file to retain the previous behaviour, and override it on individual controls gradually as you start to make changes throughout your code.