ASP.NET: How to Resolve Client ID

Download source code - 11.6 KB

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

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:

<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);
   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:

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