다음을 통해 공유

웹 서버 컨트롤 템플릿

  • 아티클

모든 웹 서버 컨트롤에는 속성을 설정하거나 스타일을 사용하여 조작할 수 있는 기본 모양과 레이아웃이 있습니다. 일부 웹 서버 컨트롤은 템플릿을 통해 모양을 사용자 지정할 수 있습니다.

템플릿이란 컨트롤의 특정 부분에 대한 레이아웃을 구성하는 HTML 요소 및 컨트롤 집합입니다. 예를 들면, DataList 웹 서버 컨트롤에서 HTML 요소와 컨트롤 조합을 사용하여 목록의 각 행에 대한 레이아웃을 만들 수 있습니다. 마찬가지로 DataGrid 웹 서버 컨트롤에는 모눈의 행에 대한 기본 모양이 있습니다. 그러나 각 행마다 서로 다른 템플릿을 정의하고 행이나 선택된 행 등을 바꿔서 모눈의 모양을 사용자 지정할 수 있습니다.

**참고   **템플릿은 스타일과 다른 것입니다. 템플릿은 컨트롤 섹션의 내용(예: DataList 컨트롤의 행 내용)을 정의합니다. 그러나 스타일은 색, 글꼴 등과 같이 요소의 모양을 지정합니다. 스타일은 템플릿 항목에도 적용되고 DataGrid 컨트롤의 글꼴을 설정할 경우와 같이 컨트롤 전체에 적용될 수도 있습니다.

템플릿은 HTML과 포함된 서버 컨트롤로 구성됩니다. 컨트롤이 Web Forms 페이지에서 실행되면 컨트롤 프레임워크가 컨트롤의 기본 HTML 대신 템플릿의 내용을 렌더링합니다.

템플릿을 지원하는 컨트롤

모든 웹 서버 컨트롤이 템플릿을 지원하는 것은 아닙니다. 대부분의 경우 템플릿은 복합 컨트롤에 의해 지원됩니다. Visual Studio에서는 DataGrid, DataList 및 Repeater 웹 서버 컨트롤이 포함됩니다. 실제로 Repeater 컨트롤과 DataList 컨트롤은 템플릿을 지원할 뿐 아니라 해당 출력을 정의하는 템플릿을 반드시 만들어야 합니다. 다른 소스에서 가져온 컨트롤도 템플릿을 지원할 수 있습니다.

각 컨트롤은 머리글, 바닥글, 항목 및 선택한 항목 등 컨트롤의 서로 다른 부분의 레이아웃을 지정하는 다양한 템플릿 집합을 지원합니다. 사용자가 지정하기에 따라 일부 또는 전체 부분에 대해 템플릿을 지정할 수 있습니다. DataGrid 컨트롤에서는 행이 아닌 열에 대한 템플릿을 지정할 수 있습니다.

다음은 템플릿을 지원하는 웹 서버 컨트롤에 대한 요약입니다.

컨트롤 템플릿
Repeater
  • HeaderTemplate
  • FooterTemplate
  • ItemTemplate
  • AlternatingItemTemplate
  • SeparatorTemplate
DataList
  • HeaderTemplate
  • FooterTemplate
  • ItemTemplate
  • AlternatingItemTemplate
  • SeparatorTemplate
  • SelectedItemTemplate
  • EditItemTemplate
DataGrid
  • HeaderTemplate
  • FooterTemplate
  • ItemTemplate(열)
  • EditItemTemplate(열)
  • Pager

템플릿 만들기

Web Forms 디자이너에는 WYSIWYG 방식으로 템플릿의 레이아웃을 지정할 수 있는 기능이 있습니다. 디자인 뷰에서 컨트롤의 템플릿을 나타내는 특수 템플릿 편집 모드를 엽니다. HTML을 입력하고 도구 상자에서 컨트롤을 편집 중인 템플릿으로 직접 끌어 놓습니다.

또한 .aspx 파일에서 템플릿을 직접 만들 수 있습니다. 템플릿은 XML 선언으로 만들어집니다. 다음 예제에서는 DataList 웹 서버 컨트롤의 템플릿을 사용하여 직원 이름, 전화 번호 및 전자 메일 주소 목록을 표시할 수 있는 방법을 보여 줍니다. 직원 정보의 레이아웃은 데이터 바인딩된 컨트롤을 사용하여 ItemTemplate에 지정합니다.

<asp:datalist ID="DataList1" runat="server">
   <HeaderTemplate>
      Employee List
   </HeaderTemplate>
   <ItemTemplate>
      <asp:label id=Label1 runat="server" 
         Text='<%# DataBinder.Eval(Container, "DataItem.EmployeeName")
         %>'></asp:label>
      <asp:label id=Label2 runat="server" 
         Text='<%# DataBinder.Eval(Container, "DataItem.PhoneNumber")
         %>'></asp:label>
      <asp:Hyperlink id=Hyperlink1 runat="server" 
         Text='<%# DataBinder.Eval(Container, "DataItem.Email") %>'
         NavigateURL='<%# DataBinder.Eval(Container, "DataItem.Link") %>'>
      </asp:Hyperlink>
   </ItemTemplate>
</asp:datalist>

참고 항목

웹 서버 컨트롤 템플릿 만들기 | 동적으로 웹 서버 컨트롤 템플릿 만들기 | ASP.NET 서버 컨트롤 | ASP.NET 서버 컨트롤 및 CSS 스타일 | Web Forms 데이터 바인딩 | 동적으로 웹 서버 컨트롤 템플릿 만들기 | 프로그래밍 방식으로 DataGrid 컨트롤에 템플릿 만들기