다음을 통해 공유

Control.ClientID 속성

  • 참조

정의

네임스페이스:
System.Web.UI
어셈블리:
System.Web.dll

ASP.NET에서 생성하는 HTML 태그의 컨트롤 ID를 가져옵니다.

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입니다.

특성
BrowsableAttribute

예제

다음 예제에서는 마스터 페이지의 콘텐츠 페이지 내에 있는 웹 사용자 컨트롤을 보여 줍니다. 사용자 컨트롤에는 DropDownList 컨트롤과 컨트롤이 Label 포함됩니다. 컨트롤에 Label 표시되는 텍스트는 사용자가 컨트롤에서 DropDownList 선택하는 값에 따라 결정됩니다. 이 값을 설정하기 위해 웹 페이지가 서버에 다시 게시할 필요가 없도록 텍스트 값은 클라이언트 스크립트를 통해 설정됩니다. 클라이언트 스크립트에서 컨트롤에 대해 렌더링되는 HTML 요소에 대한 참조를 Label 얻으려면 컨트롤의 ClientID 속성 값을 알고 있어야 합니다. 그러나 사용자 컨트롤은 웹 페이지의 아무 곳에나 배치할 수 있으므로 컨트롤을 포함할 명명 컨테이너를 미리 알 수 없습니다. 값이 ClientID 값과 ID 동일한지 확인하기 위해 코드는 값을 Static로 설정합니다ClientIDMode.

다음 예제에서는 사용자 컨트롤을 보여줍니다.

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

다음 예제에서는 사용자 컨트롤을 포함하는 콘텐츠 페이지를 보여 줍니다.

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

다음 예제에서는 콘텐츠 페이지가 포함된 마스터 페이지를 보여 줍니다.

<%@ 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 요소로 렌더링되면 HTML 요소 id 의 특성이 속성 값 ClientID 으로 설정됩니다. 값은 ClientID 종종 메서드를 사용하여 클라이언트 스크립트의 HTML 요소에 액세스하는 document.getElementById 데 사용됩니다. ID는 CSS 규칙에서 스타일을 지정할 요소를 지정하는 데도 자주 사용됩니다. 예를 들어 다음 CSS 스타일 규칙은 특성 값 ProductIDLabel 이 인 id 모든 span 요소를 선택하고 해당 background-color 특성을 white로 설정합니다.

span#ProductIDLabel { background-color: white; }

ASP.NET 속성 값을 생성하는 방법에 대한 여러 알고리즘을 ClientID 제공합니다. 속성을 설정하여 컨트롤에 사용할 알고리즘을 ClientIDMode 선택합니다. 알고리즘은 다음 표에 ClientIDMode 나열된 열거형 값으로 식별됩니다.

값 Description
AutoID 컨트롤의 ClientID 값과 각 부모 명명 컨테이너의 ID 값을 연결하여 ID 값이 생성됩니다. 컨트롤의 여러 인스턴스가 렌더링되는 데이터 바인딩 시나리오에서는 컨트롤의 ID 값 앞에 증분 값이 삽입됩니다. 각 세그먼트는 밑줄 문자(_)로 구분됩니다. 이 알고리즘은 ASP.NET 4 이전 버전의 ASP.NET 사용되었습니다.
Static ClientID 값은 ID 속성의 값으로 설정되어 있습니다. 명명 컨테이너인 컨트롤은 해당 컨트롤에 포함된 모든 컨트롤에 대한 명명 컨테이너 계층의 최상위 컨테이너로 사용됩니다.
Predictable 이 알고리즘은 데이터 바인딩된 컨트롤에 있는 컨트롤에 사용됩니다. 컨트롤의 ClientID 값과 부모 명명 컨테이너의 ClientID 값을 연결하여 ID 값이 생성됩니다. 컨트롤이 여러 행을 생성하는 데이터 바인딩된 컨트롤일 경우 ClientIDRowSuffix 속성에 지정된 데이터 필드의 값이 끝에 추가됩니다. GridView 컨트롤의 경우 여러 데이터 필드가 지정될 수 있습니다. 속성이 ClientIDRowSuffix 비어 있으면 데이터 필드 값 대신 끝에 순차 번호가 추가됩니다. 각 세그먼트는 밑줄 문자(_)로 구분됩니다.
Inherit 컨트롤은 해당 ClientIDMode 컨트롤의 NamingContainer 설정을 상속합니다.

페이지의 기본값 ClientIDMode 은 입니다 Predictable. 컨트롤의 ClientIDMode 기본값은 입니다 Inherit. 컨트롤의 기본값은 이므로 Inherit기본 생성 모드는 입니다 Predictable. 그러나 Visual Studio를 사용하여 웹 프로젝트를 이전 버전에서 ASP.NET 4로 변환하는 경우 Visual Studio는 Web.config 파일에서 사이트 기본값을 AutoID 자동으로 로 설정합니다.

자세한 내용은 ASP.NET 웹 서버 컨트롤 식별을 참조하세요.

적용 대상

추가 정보