ASP.NET 웹 서버 컨트롤 템플릿
업데이트: 2007년 11월
모든 웹 서버 컨트롤에는 속성을 설정하거나 스타일을 사용하여 조작할 수 있는 기본 모양과 레이아웃이 있습니다. 일부 웹 서버 컨트롤은 템플릿을 통해 모양을 사용자 지정할 수 있습니다.
템플릿이란 컨트롤의 특정 부분에 대한 레이아웃을 구성하는 HTML 요소 및 컨트롤 집합입니다. 예를 들면, DataList 웹 서버 컨트롤에서 HTML 요소와 컨트롤 조합을 사용하여 목록의 각 행에 대한 레이아웃을 만들 수 있습니다. 마찬가지로 GridView 웹 서버 컨트롤에는 모눈의 행에 대한 기본 모양이 있습니다. 그러나 개별 열에 대해 서로 다른 템플릿을 정의하여 모눈의 모양을 사용자 지정할 수 있습니다.
.gif "참고") 참고: |
|---|
템플릿과 스타일은 다릅니다. 템플릿은 컨트롤 섹션의 내용(예: DataList 컨트롤의 행 내용)을 정의합니다. 스타일은 색, 글꼴 등과 같은 요소의 모양을 지정합니다. 스타일은 템플릿 항목에도 적용되고 GridView 컨트롤의 글꼴을 설정할 경우와 같이 컨트롤 전체에 적용될 수도 있습니다. |
템플릿은 HTML과 포함된 서버 컨트롤로 구성됩니다. 컨트롤이 ASP.NET 웹 페이지에서 실행되면 컨트롤 인프라가 컨트롤의 기본 HTML 대신 템플릿의 내용을 렌더링합니다.
템플릿을 지원하는 컨트롤
모든 웹 서버 컨트롤이 템플릿을 지원하는 것은 아닙니다. 대부분의 경우 템플릿은 복합 컨트롤에 의해 지원됩니다. 이러한 컨트롤로는 GridView, DataList, Repeater, FormView, DetailsView, Login 등이 있습니다.
각 컨트롤은 머리글, 바닥글, 항목 및 선택한 항목 등 컨트롤의 서로 다른 부분의 레이아웃을 지정하는 다양한 템플릿 집합을 지원합니다. 사용자가 지정하기에 따라 일부 또는 전체 부분에 대해 템플릿을 지정할 수 있습니다. GridView 컨트롤에서는 행이 아닌 열에 대해 템플릿을 지정할 수 있습니다.
다음은 템플릿을 지원하는 웹 서버 컨트롤에 대한 요약입니다.
컨트롤 |
템플릿 |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
템플릿 만들기
.aspx 파일에서 직접 템플릿을 만들 수 있습니다. 템플릿은 XML 선언으로 만들어집니다. 다음 예제에서는 DataList 컨트롤의 템플릿을 사용하여 직원 이름, 전화 번호 및 전자 메일 주소 목록을 표시할 수 있는 방법을 보여 줍니다. 직원 정보의 레이아웃은 데이터 바인딩된 컨트롤을 사용하여 ItemTemplate에 지정합니다.
| 참고: |
|---|
Visual Studio 2005와 같은 비주얼 디자이너를 사용하는 경우 일반적으로 비주얼 도구를 사용하여 템플릿을 만들고 편집할 수 있습니다. 자세한 내용은 방법: 디자이너를 사용하여 웹 서버 컨트롤 템플릿 만들기를 참조하십시오. |
<asp:datalist id="DataList1" >
<HeaderTemplate>
Employee List
</HeaderTemplate>
<ItemTemplate>
<asp:label id="Label1"
Text='<%# DataBinder.Eval(Container, "DataItem.EmployeeName")%>'></asp:label>
<asp:label id="Label2"
Text='<%# DataBinder.Eval(Container, "DataItem.PhoneNumber")%>'></asp:label>
<asp:Hyperlink id="Hyperlink1"
Text='<%# DataBinder.Eval(Container, "DataItem.Email") %>'
NavigateURL='<%# DataBinder.Eval(Container, "DataItem.Link") %>'>
</asp:Hyperlink>
</ItemTemplate>
</asp:datalist>
<asp:datalist id="DataList1" >
<HeaderTemplate>
Employee List
</HeaderTemplate>
<ItemTemplate>
<asp:label id="Label1"
Text='<%# DataBinder.Eval(Container, "DataItem.EmployeeName")%>'></asp:label>
<asp:label id="Label2"
Text='<%# DataBinder.Eval(Container, "DataItem.PhoneNumber")%>'></asp:label>
<asp:Hyperlink id="Hyperlink1"
Text='<%# DataBinder.Eval(Container, "DataItem.Email") %>'
NavigateURL='<%# DataBinder.Eval(Container, "DataItem.Link") %>'>
</asp:Hyperlink>
</ItemTemplate>
</asp:datalist>
템플릿 사용
템플릿 컨트롤에서는 요청 시에만 해당 템플릿 콘텐츠의 인스턴스를 만듭니다. 즉, 페이지 로드 이벤트가 발생할 때 템플릿의 컨트롤 인스턴스가 만들어지지 않을 수도 있습니다. 이 동작은 템플릿 내의 컨트롤을 사용하는 방식에 영향을 줄 수 있습니다. 페이지를 로드하더라도 템플릿 내의 컨트롤 인스턴스가 만들어지리라는 보장이 없습니다.
Visual Studio 2005나 Visual Web Developer의 디자인 뷰에서는 중첩된 템플릿과 중첩된 마스터 파일이 렌더링되지 않습니다. 그러나 웹 브라우저에서는 중첩된 항목이 올바르게 렌더링됩니다.