Click here to Skip to main content
15,860,859 members
Articles / Web Development / HTML

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 245K   524   21   22
A method to resolve the client IDs of controls in containers.

Sample image

Introduction

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.NET
<asp:TextBox ID="mytext" Runat="server"></asp:TextBox>

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

ASP.NET
<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:

ASP.NET
<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.

Solution

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:

ASP.NET
<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:

C#
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:

ASP.NET
<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:

JavaScript
//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:

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

   if (objCrtl)
       alert ( "Prefix: " + prefix + " - value: " + objCrtl.value);
   else
       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:

ASP.NET
<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:

ASP.NET
<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.

History

  • 01-30-2007: Initial version.

License

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


Written By
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

 
GeneralMultiple controls with the same name Pin
Sean Feldman2-Mar-07 7:02
Sean Feldman2-Mar-07 7:02 
GeneralRe: Multiple controls with the same name Pin
ozkary2-Mar-07 8:45
ozkary2-Mar-07 8:45 
GeneralRe: Multiple controls with the same name Pin
Sean Feldman2-Mar-07 10:08
Sean Feldman2-Mar-07 10:08 
GeneralRe: Multiple controls with the same name Pin
ozkary5-Mar-07 4:18
ozkary5-Mar-07 4:18 
IC,

Yes, for templated controls this solution too will work because a collection of controls can be found. The Javascript needs to be modified to allow you to iterate thru all the items (same name) in the collection.

Yes, I am planning to extend this approach into a server control, so we could just drop it in a form, and it can resolve control names regardless of the levels of containment.

Your feedback is useful to see other area of improvements.

thanks.

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.