In ASP.net all controls are assigned a Unique Identifier (ID) so they can be referenced within your C# or VB code with ease. Most of use would, at least at first, assume we can use those very same ID’s in our JavaScript to manipulate those controls client side as well. Unfortunately not!

This is because ASP.net pages are made up of 10’s possibly 100’s of controls and any of those controls might be found embedded within other controls and its really hard to come up with unique ID’s for 100+ controls specially when you don’t the names used in 3rd party controls or the controls that come built into ASP.net. In order to handle these situations and in order to guarantee that each and every control has a unique ID within the HTML markup that gets generated .Net uses what are known as Naming Containers.

Naming Containers define a unique Namespace for all control ID’s within itself. There can be multiple Naming Containers on a page each with their own unique id, and each of these can then contain controls each with a unique id. But what is cool about it all is the unique ID’s can be reused across all the Naming Containers on a page. So a control named txtName can exist in more than one Naming container, but it has to remain unique within each of the containers.

Because of this Namespacing there becomes a need to guarantee that each control has a unique name in the rendered HTML. In order to accomplish this ASP.net pre-pends each unique control ID with each of its preceding Naming Containers up the chain. When you look for your control ID’s within the rendered markup you will see something like this ‘dnn_ctr8143_CrudImage_fuImage’.

This of course makes it very difficult to get a hold of your controls from within JavaScript. As long as your JavaScript is being rendered with the page by ASP.net there is a solution. You simply need to add a tag to your JavaScript on in your page or control markup which will give you the id of the control as it will appear within the final rendered markup. Or if you are adding scripts dynamically from within your C# or VB you can use a property of the control to get the id. The methods are as follows:

Within ASP.net Markup

Hide this content!
<div onclick="HideControl();return false;">