Control.ClientID プロパティ


ASP.NET によって生成される HTML マークアップのコントロール ID を取得します。Gets the control ID for HTML markup that is generated by ASP.NET.

 virtual property System::String ^ ClientID { System::String ^ get(); };
public virtual string ClientID { get; }
member this.ClientID : string
Public Overridable ReadOnly Property ClientID As 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 コントロールに表示されるテキストは、ユーザーが DropDownList コントロールから選択した値によって決まります。The text that is displayed in the Label control is determined by the value that the user selects from the DropDownList control. テキスト値はクライアントスクリプトによって設定されるため、この値を設定するために Web ページがサーバーにポストバックする必要はありません。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. クライアントスクリプトの Label コントロールに対して表示される HTML 要素への参照を取得するには、コントロールの ClientID プロパティの値を把握している必要があります。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. ただし、ユーザーコントロールは Web ページ内の任意の場所に配置できるため、どの名前付けコンテナーにコントロールが格納されるかを事前に把握することはできません。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 値を Staticに設定します。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",

  function DisplaySport(x) {
      = seasonalSports[x];

<asp:DropDownList ID="DropDownList1" runat="server" 
  <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>
<br />
<asp:Label ID="SelectedSport" runat="server" ClientIDMode="Static">

次の例は、ユーザーコントロールを含むコンテンツページを示しています。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 ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
  <uc1:Seasons ID="Seasons1" runat="server" />

次の例は、コンテンツページを含むマスターページを示しています。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" "">

<html xmlns="">
<head runat="server">
    <asp:ContentPlaceHolder id="head" runat="server">
    <form id="form1" runat="server">
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">


Web サーバーコントロールが HTML 要素として表示される場合、HTML 要素の id 属性は ClientID プロパティの値に設定されます。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. ClientID 値は、多くの場合、document.getElementById メソッドを使用してクライアントスクリプトの HTML 要素にアクセスするために使用されます。The 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 スタイルルールでは、ProductIDLabelid 属性値を持つすべての span 要素が選択され、それらの background-color 属性が whiteに設定されます。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 には、ClientID プロパティ値を生成する方法について、複数のアルゴリズムが用意されています。ASP.NET provides multiple algorithms for how to generate the ClientID property value. コントロールに使用するアルゴリズムを選択するには、その ClientIDMode プロパティを設定します。You 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 コントロールは、ClientIDMode コントロールの NamingContainer 設定を継承します。The control inherits the ClientIDMode setting of its NamingContainer control.

ページの ClientIDMode の既定値は Predictableです。The default value of ClientIDMode for a page is Predictable. コントロールの ClientIDMode の既定値は Inheritです。The default value of ClientIDMode for a control is Inherit. コントロールの既定値は Inheritので、既定の生成モードは Predictableです。Because the default for controls is Inherit, the default generation mode is Predictable. (ただし、Visual Studio を使用して、Web プロジェクトを以前のバージョンの ASP.NET 4 に変換すると、Visual Studio によって、サイトの既定値が web.config ファイルの AutoID に自動的に設定されます)。(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.