이전의 ASP.NET 3.5버전까지는, 컨트롤들이 렌더링되는 경우에 컨트롤의 명명 컨테이너에 기초를 둔 명명 규칙에 의해 컨트롤의 ClientID가 생성되었습니다. 이러한 방식으로 생성되는 컨트롤의 ClientID를 개발자는 예상할 수가 없기에 자바스크립트와 같은 클라이언트 측 스크립트를 사용하여 어떠한 클라이언트 측 로직 처리를 하려는 경우에는 상당히 곤혹스러운 일이 아닐 수가 없었습니다.
예를 들어 보겠습니다. <그림 1>은 GridView 컨트롤과 SqlDataSource 컨트롤을 이용하여 Product 테이블을 화면에 보여주고 있습니다. 3번째 행은 TempleteField를 이용하여 Label 컨트롤을 통해 ProductID를 출력하고 있습니다.
<그림 1> Product 테이블의 정보를 보여주는 페이지
소스 보기를 통해 GridView 컨트롤과 TempleteField에 존재하는 Label의 ClientID는 다음과 같이 지정된 것을 확인할 수 있습니다.
<그림 2> 소스 보기 화면
이와 같은 식으로, 컨트롤의 ClientID가 지정되기 때문에 자바스크립트를 이용하여 어떠한 로직 처리를 하기 위해서는 다음과 같은 표현식을 사용해야만 했습니다.
<script type="text/javascript">
function window.onload() { var tblName = document.getElementById("<%=GridView1.ClientID%>");
// Do Something
}
</script>
ASP.NET 4에서는 이러한 불편을 덜어주는 ClientIDMode라는 새로운 속성이 페이지 및 컨트롤에 추가되었습니다. ClientIDMode를 사용하게 되면, 페이지에 있는 컨트롤들 혹은 개별 컨트롤에 대한 ClientID의 생성 방법을 지정할 수 있습니다. ClientIDMode는 AutoID, Static, Predictable, Inherit라는 4가지 설정을 제공하고 있으며, 필요에 따라 페이지 지시자 또는 개별 컨트롤에 원하는 ClientIDMode를 지정하면 됩니다.
AutoID는 기존의 ClientID 생성 방식과 동일하게 ClientID가 지정되는 방식입니다. 그렇기 때문에 ClientIDMode를 AutoID로 지정하게 되면, <그림 2>와 동일한 결과가 발생됩니다.
Static은 말 그대로 컨트롤의 ID에 지정된 ID를 그대로 ClientID로 사용하는 방식입니다. <그림 1>에서 ProductID를 화면에 표시하고 있는 Label 컨트롤의 ID는 "lblProductID"입니다. 그러므로, ClientIDMode를 Static으로 설정하게 되면, <그림 3>와 같은 결과가 나타나게 됩니다.
<그림 3> ClientID가 Static으로 설정된 소스 보기
<그림 3>에서 보여지는 것과 같이, 컨트롤의 ID로 설정한 값이 그대로 ClientID로 설정되므로, 이 Static 설정은 페이지에서 유일한 컨트롤(현재 페이지에서는 GridView 컨트롤)인 경우에 사용하면 유용합니다.
Inherit은 ClientIDMode의 기본값으로써, 현재 컨트롤이 부모 컨트롤을 가지고 있는 경우에는 부모 컨트롤의 ClientID가 현재 컨트롤의 ClientID에 추가되는 방식입니다. <그림 1>에서와 같이 데이터 바인딩 컨트롤을 사용하는 경우에는 ClientID값을 구분해주기 위해 Label 컨트롤의 ClinetID에 0부터 자동으로 증가하는 값이 추가된 것을 확인할 수 있습니다. ClientIDMode를 Inherit로 설정한 결과는 <그림 4>와 같습니다.
<그림 4> ClientID가 Inherit로 설정된 소스 보기
마지막으로 Predictable은 말 그대로 개발자가 컨트롤의 ClientID가 어떠한 식으로 생성되는지를 예상할 수 있다는 뜻이며, 실제로도 그렇게 ClientID가 생성됩니다. Predictable은 거의 Inherit와 유사하게 ClientID가 생성됩니다.(<그림 4> 참조)
하지만, <그림 5>에서 볼 수 있는 바와 같이, Label 컨트롤의 ClientID값에 충돌을 막기 위한 자동 증가값(0부터 시작되는)이 포함되기 때문에 클라이언트 측에서의 로직 처리가 곤란할 수도 있습니다. 그렇기 때문에, ASP.NET 4에서 데이터 바인딩 컨트롤에 새롭게 추가된 ClientIDRowSuffix라는 속성과 같이 사용하면, 완전하게 Label 컨트롤의 ID값을 개발자가 예상할 수 있게 됩니다. ClientIDMode를 Predictable로, ClientIDRowSuffix를 ProductID로 설정한 후 소스 보기를 하면, <그림 5>과 같은 결과가 나오게 됩니다.
<그림 5> ClientID가 Predictable로 설정된 소스 보기
Note
데이터 바인딩 컨트롤을 사용하는 경우에는, ClientIDMode를 Predictable로 설정하는 것이 좋습니다. Inherit와 거의 동일한 결과를 가지고 오지만, ClientIDRowSuffix 속성을 이용하여 개발자가 좀 더 세밀하게 ClientID를 생성시킬 수 있기 때문입니다. 또한, ClientIDRowSuffix 속성에 설정할 수 있는 값은 해당 데이터 바인딩 컨트롤과 바인딩된 데이터 소스의 컬럼명이어야 합니다. 그 외의 값이 입력되면 오류가 발생합니다.
이상으로, ClientIDMode에 대해서 알아보았습니다. 다음 포스트에서 뵙도록 하겠습니다.
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.