GridView 컨트롤에서 TemplateFields 사용(C#)
작성자 : Scott Mitchell
유연성을 제공하기 위해 GridView는 템플릿을 사용하여 렌더링되는 TemplateField를 제공합니다. 템플릿에는 정적 HTML, 웹 컨트롤 및 데이터 바인딩 구문이 혼합되어 포함될 수 있습니다. 이 자습서에서는 TemplateField를 사용하여 GridView 컨트롤을 사용하여 더 높은 수준의 사용자 지정을 달성하는 방법을 살펴보겠습니다.
소개
GridView는 데이터를 표시하는 방법과 함께 렌더링된 출력에 포함할 의 속성을 DataSource 나타내는 필드 집합으로 구성됩니다. 가장 간단한 필드 형식은 데이터 값을 텍스트로 표시하는 BoundField입니다. 다른 필드 형식은 대체 HTML 요소를 사용하여 데이터를 표시합니다. 예를 들어 CheckBoxField는 선택한 상태가 지정된 데이터 필드의 값에 따라 달라지는 확인란으로 렌더링됩니다. ImageField는 이미지 원본이 지정된 데이터 필드를 기반으로 하는 이미지를 렌더링합니다. HyperLinkField 및 ButtonField 필드 형식을 사용하여 기본 데이터 필드 값에 따라 상태가 달라지는 하이퍼링크 및 단추를 렌더링할 수 있습니다.
CheckBoxField, ImageField, HyperLinkField 및 ButtonField 필드 형식은 데이터의 대체 보기를 허용하지만 서식과 관련하여 여전히 상당히 제한적입니다. CheckBoxField는 단일 확인란만 표시할 수 있는 반면 ImageField는 단일 이미지만 표시할 수 있습니다. 특정 필드에 서로 다른 데이터 필드 값을 기반으로 일부 텍스트, 확인란 및 이미지를 표시해야 하는 경우 어떻게 해야 할까요? 또는 CheckBox, Image, HyperLink 또는 Button 이외의 웹 컨트롤을 사용하여 데이터를 표시하려면 어떻게 해야 할까요? 또한 BoundField는 디스플레이를 단일 데이터 필드로 제한합니다. 단일 GridView 열에 두 개 이상의 데이터 필드 값을 표시하려면 어떻게 해야 하나요?
이러한 수준의 유연성을 수용하기 위해 GridView는 템플릿을 사용하여 렌더링되는 TemplateField를 제공합니다. 템플릿에는 정적 HTML, 웹 컨트롤 및 데이터 바인딩 구문이 혼합되어 포함될 수 있습니다. 또한 TemplateField에는 다양한 상황에 맞게 렌더링을 사용자 지정하는 데 사용할 수 있는 다양한 템플릿이 있습니다. 예를 들어 는 ItemTemplate 기본적으로 각 행에 대한 셀을 렌더링하는 데 사용되지만 템플릿을 EditItemTemplate 사용하여 데이터를 편집할 때 인터페이스를 사용자 지정할 수 있습니다.
이 자습서에서는 TemplateField를 사용하여 GridView 컨트롤을 사용하여 더 높은 수준의 사용자 지정을 달성하는 방법을 살펴보겠습니다. 이전 자습서에서는 및 RowDataBound 이벤트 처리기를 사용하여 DataBound 기본 데이터를 기반으로 서식을 사용자 지정하는 방법을 알아보았습니다. 기본 데이터를 기반으로 서식을 사용자 지정하는 또 다른 방법은 템플릿 내에서 서식 메서드를 호출하는 것입니다. 이 자습서에서도 이 기술을 살펴보겠습니다.
이 자습서에서는 TemplateFields를 사용하여 직원 목록의 모양을 사용자 지정합니다. 특히 모든 직원을 나열하지만 한 열에 직원의 이름과 성, 일정 컨트롤의 고용 날짜 및 회사에서 근무한 일 수를 나타내는 상태 열을 표시합니다.
그림 1: 세 개의 TemplateFields가 디스플레이를 사용자 지정하는 데 사용됩니다(전체 크기 이미지를 보려면 클릭).
1단계: GridView에 데이터 바인딩
TemplateFields를 사용하여 모양을 사용자 지정해야 하는 보고 시나리오에서는 먼저 BoundFields만 포함된 GridView 컨트롤을 만든 다음, 필요에 따라 새 TemplateFields를 추가하거나 기존 BoundFields를 TemplateFields로 변환하는 것이 가장 쉽습니다. 따라서 Designer 통해 페이지에 GridView를 추가하고 직원 목록을 반환하는 ObjectDataSource에 바인딩하여 이 자습서를 시작하겠습니다. 이러한 단계는 각 직원 필드에 대해 BoundFields를 사용하여 GridView를 만듭니다.
GridViewTemplateField.aspx 페이지를 열고 Toolbox에서 Designer GridView를 끌어옵니다. GridView의 스마트 태그에서 클래스 GetEmployees() 의 메서드를 호출하는 새 ObjectDataSource 컨트롤을 EmployeesBLL 추가하도록 선택합니다.
그림 2: 메서드를 호출 GetEmployees() 하는 새 ObjectDataSource 컨트롤 추가(전체 크기 이미지를 보려면 클릭)
이 방식으로 GridView를 바인딩하면 각 직원 속성에 대한 BoundField가 자동으로 추가됩니다. EmployeeID, , FirstNameLastName, Title, HireDate, ReportsTo및 Country. 이 보고서의 경우 , ReportsTo또는 Country 속성을 표시하는 데 EmployeeID신경 쓰지 맙시다. 이러한 BoundFields를 제거하려면 다음을 수행할 수 있습니다.
- 필드 대화 상자를 사용하여 GridView의 스마트 태그에서 열 편집 링크를 클릭하여 이 대화 상자를 표시합니다. 다음으로 왼쪽 아래 목록에서 BoundFields를 선택하고 빨간색 X 단추를 클릭하여 BoundField를 제거합니다.
- 원본 뷰에서 GridView의 선언적 구문을 직접 편집하고 제거하려는 BoundField에 대한 요소를 삭제
<asp:BoundField>합니다.
, ReportsTo및 Country BoundFields를 EmployeeID제거한 후 GridView의 태그는 다음과 같이 표시됩니다.
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="EmployeeID"
DataSourceID="ObjectDataSource1">
<Columns>
<asp:BoundField DataField="LastName" HeaderText="LastName"
SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName"
SortExpression="FirstName" />
<asp:BoundField DataField="Title" HeaderText="Title"
SortExpression="Title" />
<asp:BoundField DataField="HireDate" HeaderText="HireDate"
SortExpression="HireDate" />
</Columns>
</asp:GridView>
잠시 시간을 내어 브라우저에서 진행 상황을 봅니다. 이 시점에서 각 직원에 대한 레코드와 4개의 열이 있는 테이블이 표시됩니다. 하나는 직원의 성, 하나는 이름, 하나는 직위, 다른 하나는 고용 날짜입니다.
그림 3: LastName각 직원에 대해 , FirstName, Title및 HireDate 필드가 표시됩니다(전체 크기 이미지를 보려면 클릭).
2단계: 단일 열에 이름 및 성 표시
현재 각 직원의 이름과 성은 별도의 열에 표시됩니다. 대신 단일 열로 결합하는 것이 좋을 수 있습니다. 이 작업을 수행하려면 TemplateField를 사용해야 합니다. 새 TemplateField를 추가하고, 필요한 태그 및 데이터 바인딩 구문을 추가한 다음, 및 LastName BoundFields를 삭제 FirstName 하거나, BoundField를 TemplateField로 변환 FirstName 하고, TemplateField를 편집하여 값을 포함하고LastName, BoundField를 LastName 제거할 수 있습니다.
두 방법 모두 동일한 결과를 제공하지만, 변환이 Web 컨트롤 및 EditItemTemplate 데이터 바인딩 구문을 사용하여 BoundField의 모양과 기능을 모방 ItemTemplate 하기 때문에 가능하면 BoundFields를 TemplateFields로 변환하는 것을 좋아합니다. 이점은 변환 프로세스가 일부 작업을 수행했기 때문에 TemplateField에서 더 적은 작업을 수행해야 한다는 것입니다.
기존 BoundField를 TemplateField로 변환하려면 GridView의 스마트 태그에서 열 편집 링크를 클릭하여 필드 대화 상자를 표시합니다. 왼쪽 아래 모서리의 목록에서 변환할 BoundField를 선택한 다음 오른쪽 아래 모서리에 있는 "이 필드를 TemplateField로 변환" 링크를 클릭합니다.
그림 4: 필드 대화 상자에서 BoundField를 템플릿 필드로 변환(전체 크기 이미지를 보려면 클릭)
계속해서 BoundField를 FirstName TemplateField로 변환합니다. 이 변경 후에는 Designer 지각 차이가 없습니다. BoundField를 TemplateField로 변환하면 BoundField의 모양과 느낌을 유지하는 TemplateField가 만들어지기 때문입니다. Designer 이 시점에서 시각적 차이가 없음에도 불구하고 이 변환 프로세스는 BoundField의 선언적 구문인 <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> 를 다음 TemplateField 구문으로 대체했습니다.
<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"
Text='<%# Bind("FirstName") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server"
Text='<%# Bind("FirstName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
보듯이 TemplateField는 속성이 데이터 필드의 FirstName 값으로 설정된 Label Text 과 속성이 데이터 필드 EditItemTemplate 로 설정된 TextBox 컨트롤이 있는 Text 두 개의 템플릿 ItemTemplate 으로 FirstName 구성됩니다. 데이터 바인딩 구문 - - <%# Bind("fieldName") %> 데이터 필드 fieldName 가 지정된 웹 컨트롤 속성에 바인딩되어 있음을 나타냅니다.
이 TemplateField에 LastName 데이터 필드 값을 추가하려면 에 다른 Label Web 컨트롤을 ItemTemplate 추가하고 해당 Text 속성을 에 바인딩해야 합니다 LastName. 이 작업은 직접 또는 Designer 통해 수행할 수 있습니다. 직접 수행하려면 에 적절한 선언적 구문을 추가하기 ItemTemplate만 하면 됩니다.
<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"
Text='<%# Bind("FirstName") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server"
Text='<%# Bind("FirstName") %>'></asp:Label>
<asp:Label ID="Label2" runat="server"
Text='<%# Bind("LastName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
Designer 통해 추가하려면 GridView의 스마트 태그에서 템플릿 편집 링크를 클릭합니다. 그러면 GridView의 템플릿 편집 인터페이스가 표시됩니다. 이 인터페이스의 스마트 태그에는 GridView의 템플릿 목록이 있습니다. 이 시점에서는 TemplateField가 하나뿐이므로 드롭다운 목록에 나열된 템플릿은 및 PagerTemplate와 EmptyDataTemplate 함께 TemplateField에 대한 FirstName 템플릿뿐입니다. EmptyDataTemplate 지정한 경우 GridView에 바인딩된 데이터에 결과가 없는 경우 GridViewPagerTemplate의 출력을 렌더링하는 데 템플릿이 사용됩니다. 지정된 경우 는 페이징을 지원하는 GridView에 대한 페이징 인터페이스를 렌더링하는 데 사용됩니다.
그림 5: GridView의 템플릿은 Designer 통해 편집할 수 있습니다(전체 크기 이미지를 보려면 클릭).
또한 TemplateField에 를 LastName 표시하려면 GridView의 템플릿 편집 인터페이스에 있는 TemplateField ItemTemplate 로 레이블 컨트롤을 도구 상자에서 끌어옵니다FirstName.FirstName
그림 6: TemplateField의 ItemTemplate에 FirstName 레이블 웹 컨트롤 추가(전체 크기 이미지를 보려면 클릭)
이때 TemplateField에 추가된 레이블 웹 컨트롤의 Text 속성이 "Label"으로 설정됩니다. 이 속성이 대신 데이터 필드의 LastName 값에 바인딩되도록 이 값을 변경해야 합니다. 이렇게 하려면 레이블 컨트롤의 스마트 태그를 클릭하고 DataBindings 편집 옵션을 선택합니다.
그림 7: 레이블의 스마트 태그에서 DataBindings 편집 옵션을 선택합니다(전체 크기 이미지를 보려면 클릭).
그러면 DataBindings 대화 상자가 표시됩니다. 여기에서 왼쪽 목록에서 데이터 바인딩에 참여할 속성을 선택하고 오른쪽 드롭다운 목록에서 데이터를 바인딩할 필드를 선택할 수 있습니다. 왼쪽 LastName 에서 Text 속성을 선택하고 오른쪽에서 필드를 선택하고 확인을 클릭합니다.
그림 8: 속성을 LastName 데이터 필드에 바인딩 Text 합니다(전체 크기 이미지를 보려면 클릭).
참고
DataBindings 대화 상자를 사용하면 양방향 데이터 바인딩을 수행할지 여부를 나타낼 수 있습니다. 이 항목을 선택하지 않은 상태로 두면 데이터 바인딩 구문 <%# Eval("LastName")%> 이 대신 <%# Bind("LastName")%>사용됩니다. 이 자습서에서는 두 방법 중 하나를 사용하는 것이 좋습니다. 양방향 데이터 바인딩은 데이터를 삽입하고 편집할 때 중요합니다. 그러나 단순히 데이터를 표시하기 위해 두 방법 중 하나가 똑같이 잘 작동합니다. 이후 자습서에서는 양방향 데이터 바인딩에 대해 자세히 설명합니다.
잠시 시간을 내어 브라우저를 통해 이 페이지를 봅니다. 볼 수 있듯이 GridView에는 여전히 4개의 열이 포함됩니다. 그러나 이제 열에 FirstName 및 LastName 데이터 필드 값이 FirstName모두 나열됩니다.
그림 9: 및 LastName 값이 모두 FirstName 단일 열에 표시됩니다(전체 크기 이미지를 보려면 클릭).
이 첫 번째 단계를 완료하려면 BoundField를 LastName 제거하고 TemplateField의 HeaderText 속성 이름을 "이름"으로 바꿉니다FirstName. 이러한 변경 후 GridView의 선언적 태그는 다음과 같이 표시됩니다.
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="EmployeeID"
DataSourceID="ObjectDataSource1">
<Columns>
<asp:TemplateField HeaderText="Name" SortExpression="FirstName">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"
Text='<%# Bind("FirstName") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server"
Text='<%# Bind("FirstName") %>'></asp:Label>
<asp:Label ID="Label2" runat="server"
Text='<%# Eval("LastName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Title" HeaderText="Title"
SortExpression="Title" />
<asp:BoundField DataField="HireDate" HeaderText="HireDate"
SortExpression="HireDate" />
</Columns>
</asp:GridView>
그림 10: 각 직원의 이름과 성은 한 열에 표시됩니다(전체 크기 이미지를 보려면 클릭).
3단계: 일정 컨트롤을 사용하여 필드 표시HiredDate
GridView에서 데이터 필드 값을 텍스트로 표시하는 것은 BoundField를 사용하는 것만큼 간단합니다. 그러나 특정 시나리오의 경우 데이터는 텍스트 대신 특정 웹 컨트롤을 사용하여 가장 잘 표현됩니다. 이러한 데이터 표시 사용자 지정은 TemplateFields에서 가능합니다. 예를 들어 직원의 고용 날짜를 텍스트로 표시하는 대신 고용 날짜가 강조 표시된 일정( 일정 컨트롤 사용)을 표시할 수 있습니다.
이를 위해 먼저 BoundField를 HiredDate TemplateField로 변환합니다. GridView의 스마트 태그로 이동하여 열 편집 링크를 클릭하여 필드 대화 상자를 표시합니다. BoundField를 HiredDate 선택하고 "이 필드를 TemplateField로 변환"을 클릭합니다.
그림 11: BoundField를 HiredDate TemplateField로 변환(전체 크기 이미지를 보려면 클릭)
2단계에서 확인한 것처럼 BoundField는 및 를 포함하는 ItemTemplate TemplateField로 바꾸고 속성이 Text 데이터 바인딩 구문을 <%# Bind("HiredDate")%>사용하여 값에 HiredDate 바인딩된 Label 및 TextBox로 바뀝 EditItemTemplate 니다.
텍스트를 일정 컨트롤로 바꾸려면 레이블을 제거하고 일정 컨트롤을 추가하여 템플릿을 편집합니다. Designer GridView의 스마트 태그에서 템플릿 편집을 선택하고 드롭다운 목록에서 TemplateField를 ItemTemplate 선택합니다HireDate. 그런 다음 레이블 컨트롤을 삭제하고 도구 상자에서 템플릿 편집 인터페이스로 일정 컨트롤을 끌어옵니다.
그림 12: TemplateField에 ItemTemplate 일정 컨트롤 HireDate 추가(전체 크기 이미지를 보려면 클릭)
이 시점에서 GridView의 각 행에는 TemplateField에 일정 컨트롤이 HiredDate 포함됩니다. 그러나 직원의 실제 HiredDate 값은 일정 컨트롤의 아무 곳에도 설정되지 않으므로 각 일정 컨트롤이 기본적으로 현재 월과 날짜를 표시합니다. 이 문제를 해결하려면 각 직원의 HiredDate 일정을 일정 컨트롤의 SelectedDate 및 VisibleDate 속성에 할당해야 합니다.
일정 컨트롤의 스마트 태그에서 DataBindings 편집을 선택합니다. 다음으로 데이터 필드에 및 VisibleDate 속성을 HiredDate 모두 SelectedDate 바인딩합니다.
그림 13: 및 VisibleDate 속성을 HiredDate 데이터 필드에 바인딩 SelectedDate 합니다(전체 크기 이미지를 보려면 클릭).
참고
일정 컨트롤의 선택한 날짜가 반드시 표시될 필요는 없습니다. 예를 들어 달력에는 선택한 날짜로 1999년 8월 1일이 있지만 현재 월과 연도가 표시될 수 있습니다. 선택한 날짜와 표시된 날짜는 일정 컨트롤의 SelectedDate 및 VisibleDate 속성에 의해 지정됩니다. 둘 다 직원을 HiredDate 선택하고 표시되는지 확인하려면 이러한 두 속성을 HireDate 모두 데이터 필드에 바인딩해야 합니다.
브라우저에서 페이지를 볼 때 이제 일정에 직원 고용 날짜의 월이 표시되고 해당 특정 날짜가 선택됩니다.
그림 14: 직원의 HiredDate 일정 컨트롤에 표시됩니다(전체 크기 이미지를 보려면 클릭).
참고
지금까지 본 모든 예제와 달리 이 자습서에서는 이 GridView에 대한 속성을 로 false 설정 EnableViewState하지 않았습니다. 이 결정의 이유는 일정 컨트롤의 날짜를 클릭하면 포스트백이 발생하고 일정의 선택한 날짜를 방금 클릭한 날짜로 설정하기 때문입니다. 그러나 GridView의 뷰 상태가 비활성화된 경우 각 포스트백에서 GridView의 데이터는 기본 데이터 원본으로 다시 설정되므로 일정의 선택한 날짜가 직원의 HireDate로 다시 설정되고 사용자가 선택한 날짜를 덮어씁니다.
이 자습서에서는 사용자가 직원의 를 업데이트할 수 없으므로 이에 대한 설명입니다 HireDate. 날짜를 선택할 수 없도록 일정 컨트롤을 구성하는 것이 가장 좋습니다. 이 자습서에서는 특정 기능을 제공하려면 경우에 따라 뷰 상태를 사용하도록 설정해야 한다는 것을 보여 줍니다.
4단계: 직원이 회사에서 근무한 일 수 표시
지금까지 TemplateFields의 두 가지 애플리케이션을 확인했습니다.
- 두 개 이상의 데이터 필드 값을 하나의 열로 결합
- 텍스트 대신 웹 컨트롤을 사용하여 데이터 필드 값 표현
TemplateFields의 세 번째 사용은 GridView의 기본 데이터에 대한 메타데이터를 표시하는 것입니다. 예를 들어 직원의 고용 날짜를 표시하는 것 외에도 근무한 총 일 수를 표시하는 열을 사용할 수도 있습니다.
그러나 템플릿 필드의 또 다른 사용은 기본 데이터가 데이터베이스에 저장된 형식과는 다르게 웹 페이지 보고서에 표시되어야 하는 시나리오에서 발생합니다. Employees 테이블에 Gender 문자를 M 저장하거나 F 직원의 성별을 나타내는 필드가 있다고 상상해 보십시오. 이 정보를 웹 페이지에 표시할 때 성별을 "M" 또는 "F"가 아닌 "남성" 또는 "여성"으로 표시할 수 있습니다.
이러한 두 시나리오는 템플릿에서 호출되는 ASP.NET 페이지의 코드 숨김 클래스(또는 메서드로 구현된 별도의 클래스 라이브러리)에서 서식 메서드를 static 만들어 처리할 수 있습니다. 이러한 서식 지정 메서드는 앞에서 본 것과 동일한 데이터 바인딩 구문을 사용하여 템플릿에서 호출됩니다. 서식 지정 메서드는 임의의 수의 매개 변수를 사용할 수 있지만 문자열을 반환해야 합니다. 반환된 이 문자열은 템플릿에 삽입되는 HTML입니다.
이 개념을 설명하기 위해 직원이 근무한 총 일 수를 나열하는 열을 표시하도록 자습서를 보강해 보겠습니다. 이 서식 지정 메서드는 개체에 Northwind.EmployeesRow 소요되며 직원이 문자열로 고용된 일 수를 반환합니다. 이 메서드는 ASP.NET 페이지의 코드 숨김 클래스에 추가할 수 있지만 템플릿에서 액세스할 수 있으려면 또는 public 로 protected 표시되어야 합니다.
protected string DisplayDaysOnJob(Northwind.EmployeesRow employee)
{
// Make sure HiredDate is not null... if so, return "Unknown"
if (employee.IsHireDateNull())
return "Unknown";
else
{
// Returns the number of days between the current
// date/time and HireDate
TimeSpan ts = DateTime.Now.Subtract(employee.HireDate);
return ts.Days.ToString("#,##0");
}
}
필드에 데이터베이스 값이 HiredDate 포함될 NULL 수 있으므로 먼저 계산을 진행하기 전에 값이 아닌지 NULL 확인해야 합니다. 값이 이 HiredDateNULL면 문자열 "Unknown"을 반환합니다. 가 아닌 NULL경우 현재 시간과 값의 차이를 계산하고 HiredDate 일 수를 반환합니다.
이 메서드를 활용하려면 데이터 바인딩 구문을 사용하여 GridView의 TemplateField에서 호출해야 합니다. 먼저 GridView의 스마트 태그에서 열 편집 링크를 클릭하고 새 TemplateField를 추가하여 GridView에 새 TemplateField를 추가합니다.
그림 15: GridView에 새 템플릿 필드 추가(전체 크기 이미지를 보려면 클릭)
이 새 TemplateField의 HeaderText 속성을 "작업일"로 설정하고 해당 ItemStyle속성을 Center로 HorizontalAlign 설정합니다. 템플릿에서 메서드를 DisplayDaysOnJob 호출하려면 을 ItemTemplate 추가하고 다음 데이터 바인딩 구문을 사용합니다.
<%# DisplayDaysOnJob((Northwind.EmployeesRow)
((System.Data.DataRowView) Container.DataItem).Row) %>
Container.DataItem 는 에 DataRowView 바인딩된 레코드에 DataSource 해당하는 개체를 반환합니다 GridViewRow. 해당 Row 속성은 메서드에 전달되는 강력한 형식 Northwind.EmployeesRow의 를 반환합니다 DisplayDaysOnJob . 이 데이터 바인딩 구문은 아래 선언적 구문과 같이 에 ItemTemplate 직접 표시되거나 Label Web 컨트롤의 속성에 Text 할당할 수 있습니다.
참고
또는 instance 전달하는 EmployeesRow 대신 를 사용하여 <%# DisplayDaysOnJob(Eval("HireDate")) %>값을 전달할 HireDate 수 있습니다. 그러나 메서드는 Eval 를 object반환하므로 대신 형식object의 입력 매개 변수를 허용하도록 메서드 서명을 변경 DisplayDaysOnJob 해야 합니다. 테이블의 열에 값이 Eval("HireDate") 포함될 수 있으므로 HireDate 맹목적으로 호출 DateTime 을 로 캐스팅할 Employees 수 NULL 없습니다. 따라서 메서드에 대한 DisplayDaysOnJob 입력 매개 변수로 를 object 수락하고 검사 데이터베이스 NULL 값(을 사용하여 Convert.IsDBNull(objectToCheck)수행할 수 있음)이 있는지 확인하고 그에 따라 진행해야 합니다.
이러한 미묘한 차이로 인해 전체 instance 통과 EmployeesRow 하기로 결정했습니다. 다음 자습서에서는 입력 매개 변수를 서식 지정 메서드에 전달하기 위한 구문을 사용하는 Eval("columnName") 보다 적합한 예제를 살펴보겠습니다.
다음은 TemplateField가 추가되고 메서드가 에서 ItemTemplate호출된 후 GridView에 DisplayDaysOnJob 대한 선언적 구문을 보여줍니다.
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="EmployeeID"
DataSourceID="ObjectDataSource1">
<Columns>
<asp:TemplateField HeaderText="Name" SortExpression="FirstName">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"
Text='<%# Bind("FirstName") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server"
Text='<%# Bind("FirstName") %>'></asp:Label>
<asp:Label ID="Label2" runat="server"
Text='<%# Eval("LastName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Title" HeaderText="Title"
SortExpression="Title" />
<asp:TemplateField HeaderText="HireDate"
SortExpression="HireDate">
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server"
Text='<%# Bind("HireDate") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Calendar ID="Calendar1" runat="server"
SelectedDate='<%# Bind("HireDate") %>'
VisibleDate='<%# Eval("HireDate") %>'>
</asp:Calendar>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Days On The Job">
<ItemTemplate>
<%# DisplayDaysOnJob((Northwind.EmployeesRow)
((System.Data.DataRowView) Container.DataItem).Row) %>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
</Columns>
</asp:GridView>
그림 16은 브라우저를 통해 볼 때 완료된 자습서를 보여줍니다.
그림 16: 직원이 작업 중이었던 일수가 표시됩니다(전체 크기 이미지를 보려면 클릭).
요약
GridView 컨트롤의 TemplateField를 사용하면 다른 필드 컨트롤에서 사용할 수 있는 것보다 더 높은 수준의 유연성으로 데이터를 표시할 수 있습니다. TemplateFields는 다음 상황에 이상적입니다.
- 여러 데이터 필드를 하나의 GridView 열에 표시해야 합니다.
- 데이터는 일반 텍스트가 아닌 웹 컨트롤을 사용하여 가장 잘 표현됩니다.
- 출력은 메타데이터 표시 또는 데이터 다시 포맷과 같은 기본 데이터에 따라 달라집니다.
데이터 표시를 사용자 지정하는 것 외에도 TemplateFields는 향후 자습서에서 볼 수 있듯이 데이터를 편집하고 삽입하는 데 사용되는 사용자 인터페이스를 사용자 지정하는 데도 사용됩니다.
다음 두 자습서에서는 DetailsView에서 TemplateFields 사용을 살펴보는 것부터 시작하여 템플릿을 계속 탐색합니다. 그런 다음 필드 대신 템플릿을 사용하여 데이터의 레이아웃과 구조에 더 큰 유연성을 제공하는 FormView로 전환합니다.
행복한 프로그래밍!
저자 정보
7개의 ASP/ASP.NET 책의 저자이자 4GuysFromRolla.com 창립자인 Scott Mitchell은 1998년부터 Microsoft 웹 기술을 연구해 왔습니다. Scott은 독립 컨설턴트, 트레이너 및 작가로 일합니다. 그의 최신 책은 샘스 자신을 가르친다 ASP.NET 2.0 24 시간. 그는 에서 찾을 수있는 그의 블로그를 통해 또는 에 mitchell@4GuysFromRolla.comhttp://ScottOnWriting.NET도달 할 수 있습니다.
특별 감사
이 자습서 시리즈는 많은 유용한 검토자가 검토했습니다. 이 자습서의 수석 검토자는 Dan Jagers였습니다. 예정된 MSDN 문서를 검토하는 데 관심이 있으신가요? 그렇다면 에 줄을 놓습니다 mitchell@4GuysFromRolla.com.
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기