JavaScript: Locate Controls in HTML Markup

In 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 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 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 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 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 Markup

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

Dynamically C#

btnHide.OnClientClick("HideControl(" + pnlContent.ClientID + ");return false;");

Published by

Tim Clark

Experienced Business Owner, Chief Information Officer, Vice President, Chief Software Architect, Application Architect, Project Manager, Software Developer, Senior Web Developer, Graphic Designer & 3D Modeler, University Instructor, University Program Chair, Academic Director. Specialties: Ruby, Ruby on Rails, JavaScript, JQuery, AJAX, Node.js, React.js, Angular.js, MySQL, PostgreSQL, MongoDB, SQL Server, Responsive Design, HTML5, XHTML, CSS3, C#,, Project Management, System Design/Architecture, Web Design, Web Development, Adobe CS6 (Photoshop, Illustrator)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s