Click here to Skip to main content
15,074,668 members
Articles / Web Development / HTML
Posted 1 Feb 2007


21 bookmarked

ASP.NET: How to Resolve Client ID

Rate me:
Please Sign up or sign in to vote.
3.60/5 (15 votes)
1 Feb 2007CPOL4 min read
A method to resolve the client IDs of controls in containers.

Sample image


The ASP.NET framework was designed to manage web controls in an ASPX page using code-behind. If you need to validate a control on the client side, you only need to associate that control with validation controls. All of this works great until we have the need to create JavaScript to manage some of these controls on the client side. The issue is that when you add a control, the ID you provide to this control during design time is not the same ID the page renders at run time. For example, create a new web project and add a new ASPX page, and add a TextBox at design time as follows:

<asp:TextBox ID="mytext" Runat="server"></asp:TextBox>

Run the page and view its source. This is what it looks like:

<Input name="mytext" type="text" id="mytext" />

As you can see, there is no problem here because the control is contained on the page. But what happens when the control is contained on a user control or if you are using master pages (ASP.NET 2.0)? Let's take a look by adding a user control to the project. Call it mycontrol.ascx. Now move the TextBox from the ASPX file to the ASCX file. Make a reference to this user control on the ASPX file. Set the ID of this control to myControl. Display the page on a browser and view its source. This is what it looks like:

<Input name="myControl:mytext" type="text" id="myControl_mytext" />

The control ID now has a prefix with the name of its container. In the case of master pages, all ASPX pages associated to a master page are within a container, and there could be multiple levels of containment. So if you use client-side JavaScript to read and manipulate these controls, how do you resolve the actual client side control ID without hard coding this value in your JavaScript.? There are different approaches to solve this. In this article, I provide one possible solution which uses the ASP.NET framework technologies already available. This solution works for all versions of the framework.


The key to this approach is to create a client side control which is not altered by the server side processing. One the user control, add a hidden input field. Set the value of the input field to a literal server side control. This should look as follows:

<input type=hidden id="ctrlPrefix" name="ctrlPrefix" 
   value='<asp:Literal Runat="server" ID=ctrlPrefix></asp:Literal>'>

An important note to remember is that the hidden input field must be placed on the container. This is important because this is what is used to resolve the container name. On the code behind of the control, add the following code to the Page_Load event:

string []elm =ctrlPrefix.ClientID.Split('_');       
ctrlPrefix.Text = ctrlPrefix.ClientID.Replace(elm[elm.Length - 1],"");

We first get an array of strings from the control client ID. This has the name of the control and its container separated by an underscore. You could also use the control's ClientId property, but you need to remember to add the underscore. The second line just removes the string in the last element of the array from the control's ClientId. This returns the entire prefix including the underscore. Compile the changes and view the page on a browser. This is what it looks like:

<input name="myControl:mytext" type="text" id="myControl_mytext" />
<input type=hidden id="ctrlPrefix" name="ctrlPrefix" value='myControl_'>

There is now a hidden input field with the prefix of all the server side controls. Now, we can move on to the JavaScript which handles the controls. Add a JavaScript file. Call it mycontrol.js. Add this function to the file:

//returns the container prefix as all controls have that on their ids
function getCrtlPrefix()
   var prefix;
   var objCrtlPrefix = document.getElementById("ctrlPrefix");

   if (objCrtlPrefix)
       prefix = objCrtlPrefix.value;

   return prefix;

This function reads the value in the hidden input field and returns it. We need to add one more function to test the solution. Add the following function:

function readValue(ctrlName)
   var prefix = getCrtlPrefix();
   var objCrtl = document.getElementById(prefix + ctrlName);

   if (objCrtl)
       alert ( "Prefix: " + prefix + " - value: " + objCrtl.value);
       alert("not found!");

This function displays the value from the text box. We should notice the call to the getCtrlPrefix function made. The name of the control is appended to this string. This resolves the entire client ID. Move to the user control file and add a button on it. This button is used to call the readValue function. Add the following to the ASCX page:

<input type=button value="Read Value" onclick="javascript:readValue('mytext')">

This HTML button fires the function. Now, add the reference to the JavaScript file by adding the following to your control:

<script language="JavaScript" src="mycontrol.js"></script>

Reload the page, enter something on the text box, and press the button. A message box should display the prefix value and the value that was entered on the text box.

Points of Interest

I hope this article can help some of you work around the way the .NET Framework works and can allow you to continue doing your happy client scripting.


  • 01-30-2007: Initial version.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Architect OG-BITechnologies
United States United States
Software engineer, author & speaker who enjoys mentoring, learning, speaking and sharing with others about software development technologies. Microsoft MVP.

My Blog

Comments and Discussions

GeneralAltenate one Pin
sarathmns4-Oct-07 1:48
Membersarathmns4-Oct-07 1:48 
GeneralTry this instead [modified] Pin
cmschick17-Mar-07 20:37
Membercmschick17-Mar-07 20:37 
GeneralMultiple controls with the same name Pin
Sean Feldman2-Mar-07 7:02
MemberSean Feldman2-Mar-07 7:02 
GeneralRe: Multiple controls with the same name Pin
ozkary2-Mar-07 8:45
Memberozkary2-Mar-07 8:45 
GeneralRe: Multiple controls with the same name Pin
Sean Feldman2-Mar-07 10:08
MemberSean Feldman2-Mar-07 10:08 
GeneralRe: Multiple controls with the same name Pin
ozkary5-Mar-07 4:18
Memberozkary5-Mar-07 4:18 
GeneralGreat Idea Pin
PeelyBird6-Feb-07 21:32
MemberPeelyBird6-Feb-07 21:32 
GeneralRe: Great Idea Pin
ozkary7-Feb-07 4:36
Memberozkary7-Feb-07 4:36 
GeneralSorry but …. : Pin
aromr6-Feb-07 2:43
Memberaromr6-Feb-07 2:43 
GeneralRe: Sorry but …. : Pin
ozkary7-Feb-07 4:33
Memberozkary7-Feb-07 4:33 
QuestionLooks good, what about multiple containers? Pin
badgrs1-Feb-07 22:34
Memberbadgrs1-Feb-07 22:34 
This looks like a really good idea to me, quite a simple solution to a common problem. However what about when you have multiple containers? Some of my pages go three to four containers deep. This is a good start but you'd need to think carefully about how to extend it for this problem.
AnswerRe: Looks good, what about multiple containers? Pin
ozkary2-Feb-07 3:59
Memberozkary2-Feb-07 3:59 
GeneralRe: Looks good, what about multiple containers? Pin
badgrs2-Feb-07 6:03
Memberbadgrs2-Feb-07 6:03 
Generalthis.UniqueID Pin
Dewey1-Feb-07 22:22
MemberDewey1-Feb-07 22:22 
GeneralRe: this.UniqueID Pin
ozkary2-Feb-07 3:52
Memberozkary2-Feb-07 3:52 
GeneralRe: Possibly Great Idea Pin
Dewey1-Feb-07 22:16
MemberDewey1-Feb-07 22:16 
GeneralRe: Possibly Great Idea Pin
ozkary2-Feb-07 4:01
Memberozkary2-Feb-07 4:01 
QuestionUhmm Pin
Esteban Felipe1-Feb-07 13:49
MemberEsteban Felipe1-Feb-07 13:49 
AnswerRe: Uhmm Pin
Steven Berkovitz1-Feb-07 13:58
MemberSteven Berkovitz1-Feb-07 13:58 
GeneralRe: Uhmm Pin
dapoussin2-Feb-07 4:10
Memberdapoussin2-Feb-07 4:10 
GeneralFindControl Pin
Steven Berkovitz1-Feb-07 13:17
MemberSteven Berkovitz1-Feb-07 13:17 
GeneralRe: FindControl Pin
Dewey1-Feb-07 22:22
MemberDewey1-Feb-07 22:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.