Export (0) Print
Expand All

Control.ClientID Property

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

Namespace:  System.Web.UI
Assembly:  System.Web (in System.Web.dll)

[BrowsableAttribute(false)]
public virtual string ClientID { get; }

Property Value

Type: System.String
The control ID for HTML markup that is generated by ASP.NET.

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.

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>


.NET Framework

Supported in: 4, 3.5, 3.0, 2.0, 1.1, 1.0

Windows 7, Windows Vista SP1 or later, Windows XP SP3, Windows XP SP2 x64 Edition, Windows Server 2008 (Server Core not supported), Windows Server 2008 R2 (Server Core supported with SP1 or later), Windows Server 2003 SP2

The .NET Framework does not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.

Community Additions

ADD
Show:
© 2014 Microsoft