Bewerken

Share via

Control.ClientID Property

  • Reference

Definition

Namespace:
System.Web.UI
Assembly:
System.Web.dll

Gets the control ID for HTML markup that is generated by ASP.NET.

public:
 virtual property System::String ^ ClientID { System::String ^ get(); };
[System.ComponentModel.Browsable(false)]
public virtual string ClientID { get; }
[<System.ComponentModel.Browsable(false)>]
member this.ClientID : string
Public Overridable ReadOnly Property ClientID As String

Property Value

String

The control ID for HTML markup that is generated by ASP.NET.

Attributes
BrowsableAttribute

Examples

The following examples show a Web user control that is inside a content page for a master page. The user control contains a DropDownList control and a Label control. The text that is displayed in the Label control is determined by the value that the user selects from the DropDownList control. The text value is set through client script so that the Web page does not have to post back to the server in order to set this value. To get a reference to the HTML element that is rendered for the Label control in client script, you must know the value of the control's ClientID property. However, because the user control can be put anywhere in a Web page, it is impossible to know in advance which naming containers will contain the controls. To make sure that the ClientID value will be the same as the ID value, the code sets the ClientIDMode value to Static.

The following example shows the user control.

<%@ 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>

The following example shows the content page that contains the user control.

<%@ Page Title="" MasterPageFile="~/Seasons.master" AutoEventWireup="true" %>

<%@ Register Src="Seasons.ascx" TagName="Seasons" TagPrefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
  <uc1:Seasons ID="Seasons1" runat="server" />
</asp:Content>

The following example shows the master page that contains the content page.

<%@ Master AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Remarks

When a Web server control is rendered as an HTML element, the id attribute of the HTML element is set to the value of the ClientID property. The ClientID value is often used to access the HTML element in client script by using the document.getElementById method. The ID is also often used in CSS rules to specify elements to style. For example, the following CSS style rule selects all span elements that have the id attribute value of ProductIDLabel and sets their background-color attribute to white:

span#ProductIDLabel { background-color: white; }

ASP.NET provides multiple algorithms for how to generate the ClientID property value. You select which algorithm to use for a control by setting its ClientIDMode property. The algorithms are identified by the ClientIDMode enumeration values that are listed in the following table.

Value Description
AutoID The ClientID value is generated by concatenating the ID values of each parent naming container with the ID value of the control. In data-binding scenarios where multiple instances of a control are rendered, an incrementing value is inserted in front of the control's ID value. Each segment is separated by an underscore character (_). This algorithm was used in versions of ASP.NET earlier than ASP.NET 4.
Static The ClientID value is set to the value of the ID property. If the control is a naming container, the control is used as the top of the hierarchy of naming containers for any controls that it contains.
Predictable This algorithm is used for controls that are in data-bound controls. The ClientID value is generated by concatenating the ClientID value of the parent naming container with the ID value of the control. If the control is a data-bound control that generates multiple rows, the value of the data field specified in the ClientIDRowSuffix property is added at the end. For the GridView control, multiple data fields can be specified. If the ClientIDRowSuffix property is blank, a sequential number is added at the end instead of a data-field value. Each segment is separated by an underscore character (_).
Inherit The control inherits the ClientIDMode setting of its NamingContainer control.

The default value of ClientIDMode for a page is Predictable. The default value of ClientIDMode for a control is Inherit. Because the default for controls is Inherit, the default generation mode is Predictable. (However, if you use Visual Studio to convert a Web project to ASP.NET 4 from an earlier version, Visual Studio automatically sets the site default to AutoID in the Web.config file.)

For more information, see ASP.NET Web Server Control Identification.

Applies to

See also