DetailsView 컨트롤에서 TemplateFields 사용(VB)

  • 아티클

작성자 : Scott Mitchell

PDF 다운로드

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

소개

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

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

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

두 개의 TemplateFields가 디스플레이를 사용자 지정하는 데 사용됩니다.

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

그럼 시작하겠습니다.

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

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

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

GetProducts() 메서드를 호출하는 새 ObjectDataSource 컨트롤 추가

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

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

일련의 BoundFields를 사용하여 제품의 세부 정보가 표시됩니다.

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

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

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

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

DetailsView 컨트롤에 새 TemplateField 추가

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

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

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

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

레이블의 텍스트 속성을 UnitPrice 데이터 필드에 바인딩

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

가격을 통화로 서식 지정

이 추가를 사용하면 레이블 웹 컨트롤 가격 및 인벤토리 템플릿 필드에 선택한 제품의 가격만 표시됩니다. 그림 6은 브라우저를 통해 볼 때 지금까지 진행 상황의 스크린샷을 보여줍니다.

가격 및 인벤토리 템플릿필드에서 가격을 표시합니다.

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

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

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

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

가격을 통화로 서식 지정

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

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

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

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

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

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

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로 구현되는 반면, , ProductName등과 같은 ProductID부울이 아닌 값 필드는 BoundFields로 구현됩니다. CheckBoxField는 데이터 필드의 값이 True이고 그렇지 않으면 선택 취소되어 있는지 확인하는 비활성화된 확인란으로 렌더링됩니다.

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

문자열 True 및 False는 중단된 상태를 표시하는 데 사용됩니다.

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

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

개체를 입력 매개 변수로 수락 Northwind.ProductsRow 하고 문자열을 반환하는 라는 DisplayDiscontinuedAsYESorNO 페이지의 코드 숨김 클래스에 서식 메서드 DetailsViewTemplateField.aspx 를 추가합니다. 이전 자습서에서 설명한 대로 이 메서드는 템플릿에서 액세스할 수 있도록 또는 Public 로 Protected 표시되어야 합니다.

Protected Function DisplayDiscontinuedAsYESorNO(discontinued As Boolean) As String
    If discontinued Then
        Return "YES"
    Else
        Return "NO"
    End If
End Function

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

참고

이전 자습서에서 검사한 서식 지정 방법에서 를 포함 NULL 할 수 있는 데이터 필드를 전달했기 때문에 직원의 HiredDate 속성 값에 데이터베이스 NULL 값이 있는 경우 의 속성에 액세스 EmployeesRowHiredDate 하기 전에 검사 합니다. 열에 데이터베이스 NULL 값이 할당될 수 없으므로 이러한 검사 필요하지 Discontinued 않습니다. 또한 메서드가 형식의 instance 또는 매개 변수를 수락하지 않고 부울 입력 매개 변수Object를 수락 ProductsRow 할 수 있는 이유입니다.

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

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

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

YES 또는 NO 값이 이제 중단된 행에 표시됩니다.

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

요약

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

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

TemplateFields를 사용하면 DetailsView의 기본 데이터를 더 유연하게 렌더링할 수 있지만, 각 필드가 HTML <table>에서 행으로 렌더링될 때 DetailsView 출력은 여전히 약간 상자처럼 느껴집니다.

FormView 컨트롤은 렌더링된 출력을 보다 유연하게 구성할 수 있습니다. FormView에는 필드가 아니라 일련의 템플릿(ItemTemplate, , EditItemTemplateHeaderTemplate등)이 포함되어 있습니다. 다음 자습서에서는 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.

이전다음