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.

특성

예제

다음 예제에서는 마스터 페이지의 콘텐츠 페이지 내에 있는 웹 사용자 정의 컨트롤을 보여 줍니다.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. 텍스트 값은 클라이언트 스크립트를 통해 설정 되며,이 값을 설정 하기 위해 웹 페이지가 서버에 다시 게시 하지 않아도 됩니다.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 컨트롤의 속성 값을 알아야 합니다 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. 그러나 사용자 정의 컨트롤은 웹 페이지의 아무 곳에 나 배치할 수 있으므로 컨트롤을 포함 하는 명명 컨테이너를 미리 알 수 없습니다.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",
                                 "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>

설명

웹 서버 컨트롤이 HTML 요소로 렌더링 되 면 id html 요소의 특성이 속성의 값으로 설정 됩니다 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값은 메서드를 사용 하 여 클라이언트 스크립트의 HTML 요소에 액세스 하는 데 주로 사용 됩니다 document.getElementById .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 스타일 규칙은 span 특성 값이 인 모든 요소를 선택 하 id ProductIDLabelbackground-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 DescriptionDescription
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를 사용 하 여 웹 프로젝트를 이전 버전에서 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 웹 서버 컨트롤 식별을 참조하세요.For more information, see ASP.NET Web Server Control Identification.

적용 대상

추가 정보