How to: Access Controls from JavaScript by ID

One way to access a control from client script is to pass the value of the ClientID property of the server control to the document.getElementById method. The ClientID property value is rendered in HTML as the id attribute. To use this method, you must know how the ClientID value is generated. This document explains the algorithms that are available and how to select one.

To access a control from client script

1. Add the control to a Web page or user control.

2. Set the ClientIDMode property of the control to one of the following values:

   • AutoID. Use this value when you already have client script that you want to use and the script assumes that ClientID values will be generated by using the algorithm that was used in the .NET Framework version 3.5 and earlier versions. The value of the ClientID property is generated by concatenating the ClientID property of a control's parent naming container and the ID property of the control. When this algorithm is used in a data-binding scenario, an incrementing value is inserted after the ClientID value of the parent control and before the ID value of the control. Each segment is separated by an underscore (_).

     Note

     If you want to use the AutoID setting you typically do not need to explicitly set the ClientIDMode property. The default value for a Web page is AutoID and the default value for a control in a page is Inherit. Therefore, if you do not set explicitly set the ClientIDMode property of the parent control or the page, a control will automatically inherit the AutoID setting. (There is an exception: for projects converted from ASP.NET 3.5, the default value is set to AutoID.) For more information, see ASP.NET Web Server Control Identification.) For more information, see ASP.NET Web Server Control Identification.

   • Static. Use this value when you want the ClientID property to contain the value that you set for the ID property. This setting can be used in a Web user control to make sure that the ClientID values of controls that the Web user control contains are the same regardless of where in a Web page the user control is located. For more information, see Walkthrough: Making Controls Located in Web User Controls Easier to Access from JavaScript.

   • Predictable. Use this value when the control is inside a data-bound control that has a ClientIDRowSuffix property (for example, ListView or GridView) and you want to be able to access specific instances of the control in client script by using a key value from the database. For more information, see Walkthrough: Making Data-Bound Controls Easier to Access from JavaScript.

   • Inherit. Use this value when you want to use the ClientIDMode value that is set for the control's NamingContainer control.

3. If you have set the ClientIDMode property to Predictable, set the ClientIDRowSuffix property to the name of the data field that you want to use to uniquely identify each instance of the control. For the GridView control, you can enter multiple field names separated by commas.

   If you do not set the ClientIDRowSuffix property, ASP.NET uses a sequential number as the ClientID suffix. This is similar to the algorithm used for AutoID, except that the number is placed at the end of the generated ID instead of before the control's ID. In addition, the sequential number appears without a ctrl prefix (for example, the ClientID would be Container_Control_25 instead of Container_ctrl25_Control).

4. In client script, use the document.getElementById method and pass to it the ClientID value that will be generated by the algorithm you selected.

   The following example shows a user control that contains a Label control with the ClientIDMode property set to Static. The user control also contains client script that accesses the control by its ID. Because the ClientIDMode property is set to Static, this user control can be used in any container control and have the same value for the ClientID property.

   <%@ Control AutoEventWireup="true" %>
   
   <script type="text/javascript">
     var seasonalSports = new Array("None selected",
                                     "Tennis",
                                     "Volleyball",
                                     "Baseball",
                                     "Skiing");
   
     function DisplaySport(x) {
         document.getElementById("SelectedSport").innerHTML
         = seasonalSports[x];
     }    
   </script>
   
   <asp:DropDownList ID="DropDownList1" runat="server" 
                     onchange="DisplaySport(this.selectedIndex);">
     <asp:ListItem Value="Select a season"></asp:ListItem>
     <asp:ListItem Value="Spring"></asp:ListItem>
     <asp:ListItem Value="Summer"></asp:ListItem>
     <asp:ListItem Value="Autumn"></asp:ListItem>
     <asp:ListItem Value="Winter"></asp:ListItem>
   </asp:DropDownList>
   <br />
   <asp:Label ID="SelectedSport" runat="server" ClientIDMode="Static">
   </asp:Label>
   

See Also

Tasks

Walkthrough: Making Data-Bound Controls Easier to Access from JavaScript

Walkthrough: Making Controls Located in Web User Controls Easier to Access from JavaScript

Reference

Control.ClientID

Control.ClientIDMode

System.Web.UI.ClientIDMode

Concepts

ASP.NET Web Server Control Identification