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 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
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_'>
var objCrtlPrefix = document.getElementById("ctrlPrefix");
prefix = objCrtlPrefix.value;
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:
var prefix = getCrtlPrefix();
var objCrtl = document.getElementById(prefix + ctrlName);
alert ( "Prefix: " + prefix + " - value: " + objCrtl.value);
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:
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.