Control.ClientID 属性

定义

获取由 ASP.NET 生成的 HTML 标记的控件 ID。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

属性值

String

由 ASP.NET 生成的 HTML 标记的控件 ID。The control ID for HTML markup that is generated by ASP.NET.

属性

示例

下面的示例演示在母版页的内容页内的 Web 用户控件。The following examples show a Web user control that is inside a content page for a master page. 用户控件包含 DropDownList 控件和 Label 控件。The user control contains a DropDownList control and a Label control. 控件中显示的文本由 Label 用户从控件中选择的值确定 DropDownListThe 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. 若要获取对在客户端脚本中为控件呈现的 HTML 元素的引用 Label ,必须知道控件的属性的值 ClientIDTo 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. 为了确保 ClientID 该值与 ID 值相同,代码将 ClientIDMode 值设置为 StaticTo 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>

注解

当 Web 服务器控件呈现为 HTML 元素时, id html 元素的属性将设置为属性的值 ClientIDWhen 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. ClientID该值通常用于通过使用方法访问客户端脚本中的 HTML 元素 document.getElementByIdThe ClientID value is often used to access the HTML element in client script by using the document.getElementById method. 该 ID 还经常用在 CSS 规则中来指定要样式的元素。The ID is also often used in CSS rules to specify elements to style. 例如,以下 CSS 样式规则选择 span id 属性值为的所有元素 ProductIDLabel ,并将其 background-color 属性设置为 whiteFor 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 提供了多个用于生成 ClientID 属性值的算法。ASP.NET provides multiple algorithms for how to generate the ClientID property value. 可以通过设置控件的属性来选择要用于控件的算法 ClientIDModeYou select which algorithm to use for a control by setting its ClientIDMode property. 算法由 ClientIDMode 下表中列出的枚举值标识。The algorithms are identified by the ClientIDMode enumeration values that are listed in the following table.

Value 说明Description
AutoID ClientID 值是通过串联每个父命名容器的 ID 值生成的,这些父命名容器都具有控件的 ID 值。The ClientID value is generated by concatenating the ID values of each parent naming container with the ID value of the control. 在呈现控件的多个实例的数据绑定方案中,将在控件的 ID 值的前面插入递增的值。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 (). 此算法用于早于 ASP.NET 4 的 ASP.NET 版本。This algorithm was used in versions of ASP.NET earlier than ASP.NET 4.
Static ClientID 值设置为 ID 属性的值。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. ClientID 值是通过串联每个父命名容器的 ClientID 值生成的,这些父命名容器都具有控件的ID 值。The ClientID value is generated by concatenating the ClientID value of the parent naming container with the ID value of the control. 如果控件是生成多个行的数据绑定控件,则在末尾添加 ClientIDRowSuffix 属性中指定的数据字段的值。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. 对于 GridView 控件,可以指定多个数据字段。For the GridView control, multiple data fields can be specified. 如果该 ClientIDRowSuffix 属性为空白,则在末尾添加顺序号,而不是数据字段值。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 控件继承其 NamingContainer 控件的 ClientIDMode 设置。The control inherits the ClientIDMode setting of its NamingContainer control.

页的的默认值为 ClientIDMode PredictableThe default value of ClientIDMode for a page is Predictable. 控件的默认值为 ClientIDMode InheritThe default value of ClientIDMode for a control is Inherit. 由于控件的默认值为 Inherit ,因此默认生成模式为 PredictableBecause the default for controls is Inherit, the default generation mode is Predictable. (但是,如果使用 Visual Studio 将 Web 项目从早期版本转换为 ASP.NET 4,则 Visual Studio 会自动将该站点的默认值设置为 AutoID Web.config 文件中。 ) (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.)

有关详细信息,请参阅 ASP.NET Web 服务器控件标识For more information, see ASP.NET Web Server Control Identification.

适用于

另请参阅