DetailsView 컨트롤에서 TemplateFields 사용(C#)

아티클
07/16/2024

GridView에서 사용할 수 있는 동일한 TemplateFields 기능도 DetailsView 컨트롤에서 사용할 수 있습니다. 이 자습서에서는 TemplateFields가 포함된 DetailsView를 사용하여 한 번에 하나의 제품을 표시합니다.

소개

TemplateField는 BoundField, CheckBoxField, HyperLinkField 및 기타 데이터 필드 컨트롤보다 더 높은 수준의 데이터 렌더링 유연성을 제공합니다. 이전 자습서에서는 GridView에서 TemplateField를 사용하여 다음을 살펴보았습니다.

한 열에 여러 데이터 필드 값을 표시합니다. 특히 필드와 LastName 필드가 모두 FirstName 하나의 GridView 열로 결합되었습니다.
대체 웹 컨트롤을 사용하여 데이터 필드 값을 표시합니다. 일정 컨트롤을 사용하여 값을 표시하는 HiredDate 방법을 알아보았습니다.
기본 데이터를 기반으로 상태 정보를 표시합니다. Employees 테이블에는 직원이 근무한 일 수를 반환하는 열이 없지만 TemplateField 및 서식 지정 방법을 사용하여 이전 자습서의 GridView 예제에서 이러한 정보를 표시할 수 있었습니다.

GridView에서 사용할 수 있는 동일한 TemplateFields 기능도 DetailsView 컨트롤에서 사용할 수 있습니다. 이 자습서에서는 두 개의 TemplateField가 포함된 DetailsView를 사용하여 한 번에 하나의 제품을 표시합니다. 첫 번째 TemplateField는 , UnitsInStock및 UnitsOnOrder 데이터 필드를 하나의 DetailsView 행으로 결합UnitPrice합니다. 두 번째 TemplateField는 필드 값을 Discontinued 표시하지만 서식 지정 메서드를 사용하여 "YES"(있는 경우 Discontinued true)를 표시하고, 그렇지 않으면 "NO"를 표시합니다.

그림 1: 디스플레이를 사용자 지정하는 데 사용되는 두 개의 TemplateFields(전체 크기 이미지를 보려면 클릭)

그럼 시작하겠습니다.

1단계: DetailsView에 데이터 바인딩

이전 자습서에서 설명한 것처럼 TemplateFields로 작업할 때는 BoundFields만 포함된 DetailsView 컨트롤을 만든 다음 새 TemplateFields를 추가하거나 필요에 따라 기존 BoundFields를 TemplateFields로 변환하는 것이 가장 쉬운 경우가 많습니다. 따라서 디자이너를 통해 페이지에 DetailsView를 추가하고 제품 목록을 반환하는 ObjectDataSource에 바인딩하여 이 자습서를 시작합니다. 이러한 단계에서는 각 제품의 부울이 아닌 값 필드에 대한 BoundFields가 있는 DetailsView와 하나의 부울 값 필드(중단됨)에 대한 CheckBoxField를 만듭니다.

DetailsViewTemplateField.aspx 페이지를 열고 도구 상자에서 디자이너로 DetailsView를 끕니다. DetailsView의 스마트 태그에서 클래스 GetProducts() 의 메서드를 호출하는 새 ObjectDataSource 컨트롤을 ProductsBLL 추가하도록 선택합니다.

그림 2: 메서드를 호출 GetProducts() 하는 새 ObjectDataSource 컨트롤 추가(전체 크기 이미지를 보려면 클릭)

이 보고서의 경우 , SupplierID및 CategoryIDReorderLevel BoundFields를 제거ProductID합니다. 다음으로, BoundFields와 SupplierName BoundFields가 CategoryName BoundField 바로 다음에 표시되도록 바운드 필드의 순서를 ProductName 다시 지정합니다. 원하는 대로 BoundFields의 HeaderText 속성 및 서식 속성을 자유롭게 조정할 수 있습니다. GridView와 마찬가지로 필드 대화 상자(DetailsView의 스마트 태그에서 필드 편집 링크를 클릭하여 액세스할 수 있음) 또는 선언적 구문을 통해 이러한 BoundField 수준 편집을 수행할 수 있습니다. 마지막으로 DetailsView Height 컨트롤이 표시된 데이터에 따라 확장될 수 있도록 DetailsView 및 Width 속성 값을 지우고 스마트 태그에서 페이징 사용 확인란을 선택합니다.

이러한 변경 후 DetailsView 컨트롤의 선언적 태그는 다음과 유사하게 표시됩니다.

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" AllowPaging="True"
    EnableViewState="False">
    <Fields>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
          ReadOnly="True" SortExpression="SupplierName" />
        <asp:BoundField DataField="QuantityPerUnit"
          HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price"
          SortExpression="UnitPrice" />
        <asp:BoundField DataField="UnitsInStock"
          HeaderText="Units In Stock" SortExpression="UnitsInStock" />
        <asp:BoundField DataField="UnitsOnOrder"
          HeaderText="Units On Order" SortExpression="UnitsOnOrder" />
        <asp:CheckBoxField DataField="Discontinued"
          HeaderText="Discontinued" SortExpression="Discontinued" />
    </Fields>
</asp:DetailsView>

잠시 브라우저를 통해 페이지를 봅니다. 이 시점에서 제품의 이름, 범주, 공급자, 가격, 재고 단위, 주문 단위 및 중단 상태를 보여 주는 행이 있는 단일 제품 목록(Chai)이 표시됩니다.

그림 3: 일련의 BoundFields를 사용하여 제품의 세부 정보가 표시됩니다(전체 크기 이미지를 보려면 클릭).

2단계: 주문 가격, 재고 단위 및 단위를 한 행으로 결합

DetailsView에는 , UnitsInStock및 필드에 대한 행이 UnitPrice있습니다UnitsOnOrder. 새 TemplateField를 추가하거나 기존 UnitPriceUnitsInStock템플릿 필드 및 BoundFields 중 하나를 TemplateField로 변환하여 이러한 데이터 필드를 TemplateField와 UnitsOnOrder 단일 행으로 결합할 수 있습니다. 개인적으로 기존 BoundFields를 변환하는 것을 선호하지만 새 TemplateField를 추가하여 연습해 보겠습니다.

먼저 DetailsView의 스마트 태그에서 필드 편집 링크를 클릭하여 필드 대화 상자를 표시합니다. 다음으로, 새 TemplateField를 추가하고 해당 HeaderText 속성을 "가격 및 인벤토리"로 설정하고 새 TemplateField를 이동하여 BoundField 위에 UnitPrice 배치합니다.

그림 4: DetailsView 컨트롤에 새 TemplateField 추가(전체 크기 이미지를 보려면 클릭)

이 새 TemplateField는 현재 , UnitsInStock및 UnitsOnOrder BoundFields에 UnitPrice표시되는 값을 포함하므로 제거해 보겠습니다.

이 단계의 마지막 작업은 Price 및 Inventory TemplateField에 대한 태그를 정의하는 ItemTemplate 것입니다. 이 태그는 디자이너에서 DetailsView의 템플릿 편집 인터페이스를 통해 또는 컨트롤의 선언적 구문을 통해 직접 수행할 수 있습니다. GridView와 마찬가지로 스마트 태그에서 템플릿 편집 링크를 클릭하여 DetailsView의 템플릿 편집 인터페이스에 액세스할 수 있습니다. 여기에서 드롭다운 목록에서 편집할 템플릿을 선택한 다음 도구 상자에서 웹 컨트롤을 추가할 수 있습니다.

이 자습서에서는 먼저 Price and Inventory TemplateField에 ItemTemplate레이블 컨트롤을 추가합니다. 다음으로 레이블 웹 컨트롤의 스마트 태그에서 DataBindings 편집 링크를 클릭하고 해당 속성을 UnitPrice 필드에 바인딩 Text 합니다.

그림 5: 레이블의 Text 속성을 UnitPrice 데이터 필드에 바인딩(전체 크기 이미지를 보려면 클릭)

가격을 통화로 서식 지정

이 추가와 함께 레이블 웹 컨트롤 가격 및 인벤토리 TemplateField는 이제 선택한 제품의 가격만 표시합니다. 그림 6은 브라우저를 통해 볼 때 지금까지 진행 상황의 스크린샷을 보여줍니다.

그림 6: 가격 및 인벤토리 템플릿 필드에 가격 표시(전체 크기 이미지를 보려면 클릭)

제품의 가격은 통화 형식이 지정되지 않습니다. BoundField를 사용하면 속성과 속성을 false .로 설정 HtmlEncode 하여 서식을 DataFormatString 지정할 수 있습니다{0:formatSpecifier}. 그러나 TemplateField의 경우 데이터 바인딩 구문 또는 애플리케이션 코드 내의 어딘가에 정의된 서식 지정 메서드(예: ASP.NET 페이지의 코드 숨김 클래스)를 사용하여 서식 지정 명령을 지정해야 합니다.

레이블 웹 컨트롤에 사용되는 데이터 바인딩 구문의 서식을 지정하려면 레이블의 스마트 태그에서 DataBindings 편집 링크를 클릭하여 DataBindings 대화 상자로 돌아갑니다. 서식 드롭다운 목록에서 직접 서식 지정 지침을 입력하거나 정의된 형식 문자열 중 하나를 선택할 수 있습니다. BoundField의 DataFormatString 속성과 마찬가지로 서식은 .를 사용하여 {0:formatSpecifier}지정됩니다.

필드의 UnitPrice 경우 적절한 드롭다운 목록 값을 선택하거나 직접 입력하여 지정된 통화 서식을 {0:C} 사용합니다.

그림 7: 가격을 통화로 서식 지정(전체 크기 이미지를 보려면 클릭)

선언적으로 형식 지정 사양은 두 번째 매개 변수로 또는 Eval 메서드로 Bind 표시됩니다. 디자이너를 통해 만들어진 설정은 선언적 태그에서 다음과 같은 데이터 바인딩 식을 생성합니다.

<asp:Label ID="Label1" runat="server" Text='<%# Eval("UnitPrice", "{0:C}") %>'/>

TemplateField에 나머지 데이터 필드 추가

이 시점에서 가격 및 인벤토리 템플릿 필드에 데이터 필드를 표시하고 서식 UnitPrice 을 지정했지만 여전히 필드와 UnitsOnOrder 필드를 표시 UnitsInStock 해야 합니다. 가격 이하의 줄과 괄호로 표시해 보겠습니다. 디자이너의 템플릿 편집 인터페이스에서 템플릿 내에 커서를 배치하고 표시할 텍스트를 입력하기만 하면 이러한 태그를 추가할 수 있습니다. 또는 이 태그를 선언적 구문에 직접 입력할 수 있습니다.

가격 및 인벤토리 템플릿 필드에 다음과 같은 가격 및 인벤토리 정보가 표시되도록 정적 태그, 레이블 웹 컨트롤 및 데이터 바인딩 구문을 추가합니다.

UnitPrice
(재고/ 주문 시: UnitsInStock / UnitsOnOrder)

이 작업을 수행한 후 DetailsView의 선언적 태그는 다음과 유사하게 표시됩니다.

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" AllowPaging="True"
    EnableViewState="False">
    <Fields>
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName"
          HeaderText="Supplier" ReadOnly="True"
          SortExpression="SupplierName" />
        <asp:BoundField DataField="QuantityPerUnit"
          HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
        <asp:TemplateField HeaderText="Price and Inventory">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                  Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:Label>
                <br />
                <strong>
                (In Stock / On Order: </strong>
                <asp:Label ID="Label2" runat="server"
                  Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                <strong>/</strong>
                <asp:Label ID="Label3" runat="server"
                  Text='<%# Eval("UnitsOnOrder") %>'>
                </asp:Label><strong>)</strong>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:CheckBoxField DataField="Discontinued"
           HeaderText="Discontinued" SortExpression="Discontinued" />
    </Fields>
</asp:DetailsView>

이러한 변경 내용으로 가격 및 인벤토리 정보를 단일 DetailsView 행으로 통합했습니다.

그림 8: 가격 및 인벤토리 정보가 단일 행에 표시됩니다(전체 크기 이미지를 보려면 클릭).

3단계: 중단된 필드 정보 사용자 지정

Products 테이블의 Discontinued 열은 제품이 중단되었는지 여부를 나타내는 비트 값입니다. DetailsView(또는 GridView)를 데이터 소스 컨트롤에 바인딩할 때 부울 값 필드(예: Discontinued부울 값 필드)는 CheckBoxFields로 구현되는 반면, 부울이 아닌 값 필드(예: ProductIDProductName등)는 BoundFields로 구현됩니다. CheckBoxField는 데이터 필드의 값이 True이고 그렇지 않으면 선택 취소된 경우 선택된 비활성화된 확인란으로 렌더링됩니다.

CheckBoxField를 표시하는 대신 제품이 중단되었는지 여부를 나타내는 텍스트를 표시할 수 있습니다. 이렇게 하려면 DetailsView에서 CheckBoxField를 제거한 다음 속성이 DataField 설정된 BoundField를 추가할 수 있습니다 Discontinued. 잠시 시간을 내어 이 작업을 수행합니다. 이 변경 후 DetailsView는 중단된 제품의 경우 "True", 여전히 활성 상태인 제품의 경우 "False"라는 텍스트를 표시합니다.

그림 9: 문자열 True 및 False는 중단된 상태를 표시하는 데 사용됩니다(전체 크기 이미지를 보려면 클릭).

문자열 "True" 또는 "False"를 사용하지 않고 대신 "YES" 및 "NO"를 사용하려고 한다고 상상해 보십시오. 이러한 사용자 지정은 TemplateField 및 서식 지정 방법을 사용하여 수행할 수 있습니다. 서식 지정 메서드는 여러 입력 매개 변수를 사용할 수 있지만 템플릿에 삽입하려면 HTML(문자열)을 반환해야 합니다.

부울을 입력 매개 변수로 수락하고 문자열을 반환하는 페이지의 DisplayDiscontinuedAsYESorNO 코드 숨김 클래스에 서식 지정 메서드 DetailsViewTemplateField.aspx 를 추가합니다. 이전 자습서에서 설명한 대로 템플릿에서 액세스할 수 있도록 이 메서드를 표시 protected 하거나 public 표시해야 합니다.

protected string DisplayDiscontinuedAsYESorNO(bool discontinued)
{
    if (discontinued)
        return "YES";
    else
        return "NO";
}

이 메서드는 입력 매개 변수(discontinued)를 확인하고 "YES"이면 true"YES"를 반환하고, 그렇지 않으면 "NO"를 반환합니다.

참고 항목

이전 자습서에서 검사한 서식 지정 방법에서 s를 포함 NULL 할 수 있는 데이터 필드를 전달했기 때문에 '의 HiredDate 속성에 액세스EmployeesRow하기 전에 직원의 HiredDate 속성 값에 데이터베이스 NULL 값이 있는지 확인해야 했습니다. 열에 데이터베이스 NULL 값을 할당할 수 없으므로 여기에서 Discontinued 는 이러한 검사가 필요하지 않습니다. 또한 이 때문에 메서드는 인스턴스 또는 형식의 매개 변수를 수락하지 않고도 부울 입력 매개 변수를 ProductsRow 수락할 수 있습니다 object.

이 서식 지정 메서드가 완료되면 TemplateField에서 ItemTemplate호출하기만 하면 됩니다. TemplateField를 만들려면 BoundField를 Discontinued 제거하고 새 TemplateField를 추가하거나 BoundField를 Discontinued TemplateField로 변환합니다. 그런 다음 선언적 태그 보기에서 현재 ProductRow 인스턴스 Discontinued 의 속성 값을 전달하여 메서드를 호출 DisplayDiscontinuedAsYESorNO 하는 ItemTemplate만 포함되도록 TemplateField를 편집합니다. 메서드를 통해 Eval 액세스할 수 있습니다. 특히 TemplateField의 태그는 다음과 같습니다.

<asp:TemplateField HeaderText="Discontinued" SortExpression="Discontinued">
    <ItemTemplate>
        <%# DisplayDiscontinuedAsYESorNO((bool)
          Eval("Discontinued")) %>
    </ItemTemplate>
</asp:TemplateField>

이렇게 하면 DisplayDiscontinuedAsYESorNO DetailsView를 렌더링할 때 메서드가 호출되고 인스턴스의 Discontinued 값이 ProductRow 전달됩니다. 메서드는 Eval 형식 값을 반환하지만 메서드는 DisplayDiscontinuedAsYESorNO 형식objectbool의 입력 매개 변수를 예상하므로 메서드 반환 값을 .로 캐스팅 Eval 합니다bool. 그러면 메서드는 DisplayDiscontinuedAsYESorNO 받는 값에 따라 "YES" 또는 "NO"를 반환합니다. 반환된 값은 이 DetailsView 행에 표시되는 값입니다(그림 10 참조).

그림 10: YES 또는 NO 값이 중단된 행에 표시됩니다(전체 크기 이미지를 보려면 클릭).

요약

DetailsView 컨트롤의 TemplateField를 사용하면 다른 필드 컨트롤에서 사용할 수 있는 것보다 더 높은 수준의 유연성으로 데이터를 표시할 수 있으며 다음과 같은 경우에 적합합니다.

여러 데이터 필드를 하나의 GridView 열에 표시해야 합니다.
데이터는 일반 텍스트가 아닌 웹 컨트롤을 사용하여 가장 잘 표현됩니다.
출력은 메타데이터 표시 또는 데이터 다시 포맷과 같은 기본 데이터에 따라 달라집니다.

TemplateFields는 DetailsView의 기본 데이터 렌더링에 더 많은 유연성을 허용하지만, 각 필드가 HTML <table>에서 행으로 렌더링되므로 DetailsView 출력은 여전히 약간 상자처럼 느껴집니다.

FormView 컨트롤은 렌더링된 출력을 구성하는 데 더 많은 유연성을 제공합니다. FormView에는 필드가 아니라 일련의 템플릿(ItemTemplate, EditItemTemplate, HeaderTemplate등)만 포함됩니다. 다음 자습서에서는 FormView를 사용하여 렌더링된 레이아웃을 훨씬 더 많이 제어하는 방법을 살펴보겠습니다.

행복한 프로그래밍!

작성자 정보

7개의 ASP/ASP.NET 책의 저자이자 4GuysFromRolla.com 창립자인 Scott Mitchell은 1998년부터 Microsoft 웹 기술을 연구해 왔습니다. Scott은 독립 컨설턴트, 트레이너 및 작가로 일합니다. 그의 최신 책은 샘스 티치 자신 ASP.NET 24 시간에 2.0입니다. 그는 에서 mitchell@4GuysFromRolla.com찾을 http://ScottOnWriting.NET수있는 자신의 블로그를 통해 도달 할 수 있습니다 .

특별 감사

이 자습서 시리즈는 많은 유용한 검토자가 검토했습니다. 이 자습서의 수석 검토자는 Dan Jagers였습니다. 예정된 MSDN 문서를 검토하는 데 관심이 있으신가요? 그렇다면 선을 놓습니다 mitchell@4GuysFromRolla.com.

이전 다음

다음을 통해 공유