FormView의 템플릿 사용(C#)

  • 아티클

작성자 : Scott Mitchell

PDF 다운로드

DetailsView와 달리 FormView는 필드로 구성되지 않습니다. 대신 FormView는 템플릿을 사용하여 렌더링됩니다. 이 자습서에서는 FormView 컨트롤을 사용하여 덜 엄격한 데이터 표시를 제공하는 방법을 살펴보겠습니다.

소개

지난 두 자습서에서는 TemplateFields를 사용하여 GridView 및 DetailsView 컨트롤의 출력을 사용자 지정하는 방법을 알아보았습니다. TemplateFields를 사용하면 특정 필드의 콘텐츠를 고도로 사용자 지정할 수 있지만, 결국 GridView와 DetailsView는 모두 그리드와 같은 모양으로 표시됩니다. 많은 시나리오에서 그리드와 같은 레이아웃이 이상적이지만 때로는 더 유동적이며 덜 단단한 디스플레이가 필요합니다. 단일 레코드를 표시할 때 FormView 컨트롤을 사용하여 이러한 유동 레이아웃을 사용할 수 있습니다.

DetailsView와 달리 FormView는 필드로 구성되지 않습니다. BoundField 또는 TemplateField를 FormView에 추가할 수 없습니다. 대신 FormView는 템플릿을 사용하여 렌더링됩니다. FormView를 단일 TemplateField를 포함하는 DetailsView 컨트롤로 간주합니다. FormView는 다음 템플릿을 지원합니다.

  • ItemTemplate FormView에 표시된 특정 레코드를 렌더링하는 데 사용됩니다.
  • HeaderTemplate 선택적 헤더 행을 지정하는 데 사용됩니다.
  • FooterTemplate 선택적 바닥글 행을 지정하는 데 사용됩니다.
  • EmptyDataTemplate FormView의 DataSource 레코드 EmptyDataTemplate 가 없는 경우 는 대신 컨트롤의 태그를 렌더링하는 데 사용됩니다 ItemTemplate .
  • PagerTemplate 페이징을 사용하도록 설정된 FormView의 페이징 인터페이스를 사용자 지정하는 데 사용할 수 있습니다.
  • EditItemTemplate / InsertItemTemplate 이러한 기능을 지원하는 FormViews에 대한 편집 인터페이스 또는 삽입 인터페이스를 사용자 지정하는 데 사용됩니다.

이 자습서에서는 FormView 컨트롤을 사용하여 덜 엄격한 제품 표시를 제공하는 방법을 살펴봅니다. FormView ItemTemplate 는 이름, 범주, 공급자 등에 대한 필드가 있는 대신 헤더 요소와 <table> 의 조합을 사용하여 이러한 값을 표시합니다(그림 1 참조).

FormView가 DetailsView에 표시된 Grid-Like 레이아웃에서 중단됩니다.

그림 1: FormView가 DetailsView에 표시된 Grid-Like 레이아웃에서 나뉩니다(전체 크기 이미지를 보려면 클릭).

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

FormView.aspx 페이지를 열고 FormView를 도구 상자에서 Designer 끌어옵니다. FormView를 처음 추가할 때 회색 상자로 표시되어 가 필요함을 ItemTemplate 알려 줍니다.

ItemTemplate이 제공될 때까지 Designer FormView를 렌더링할 수 없습니다.

그림 2: FormView는 Designer 제공될 때까지 ItemTemplate 렌더링할 수 없습니다(전체 크기 이미지를 보려면 클릭).

는 ItemTemplate 선언적 구문을 통해 직접 만들거나 Designer 통해 FormView를 데이터 소스 컨트롤에 바인딩하여 자동으로 만들 수 있습니다. 이 자동 생성 ItemTemplate 에는 각 필드의 이름과 속성이 필드 값에 바인딩된 Text Label 컨트롤을 나열하는 HTML이 포함되어 있습니다. 또한 이 방법은 및 EditItemTemplate를 InsertItemTemplate 자동으로 만듭니다. 둘 다 데이터 소스 컨트롤에서 반환하는 각 데이터 필드에 대한 입력 컨트롤로 채워집니다.

템플릿을 자동으로 만들려는 경우 FormView의 스마트 태그에서 클래스 GetProducts() 의 메서드를 호출하는 새 ObjectDataSource 컨트롤을 ProductsBLL 추가합니다. 그러면 , InsertItemTemplate및 EditItemTemplate가 있는 FormView가 ItemTemplate만들어질 것입니다. 원본 보기에서 및 EditItemTemplate 를 InsertItemTemplate 제거합니다. 아직 편집 또는 삽입을 지원하는 FormView를 만드는 데 관심이 없으므로 를 제거합니다. 다음으로, 작업할 클린 슬레이트가 있도록 내 ItemTemplate 의 태그를 지웁니다.

를 수동으로 빌드 ItemTemplate 하려는 경우 도구 상자에서 Designer 끌어 ObjectDataSource를 추가하고 구성할 수 있습니다. 그러나 Designer FormView의 데이터 원본을 설정하지 마세요. 대신 원본 보기로 이동하여 FormView의 DataSourceID 속성을 ObjectDataSource 값으로 ID 수동으로 설정합니다. 다음으로, 를 수동으로 추가합니다 ItemTemplate.

어떤 접근 방식을 취하든 이 시점에서 FormView의 선언적 태그는 다음과 같이 표시됩니다.

<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1">
    <ItemTemplate>

    </ItemTemplate>
</asp:FormView>

잠시 시간을 내어 FormView의 스마트 태그에서 페이징 사용 확인란을 검사. 그러면 FormView의 선언적 구문에 특성이 추가 AllowPaging="True" 됩니다. 또한 속성을 False로 설정합니다 EnableViewState .

2단계: 태그 정의ItemTemplate

FormView가 ObjectDataSource 컨트롤에 바인딩되고 페이징을 지원하도록 구성된 경우 에 대한 ItemTemplate콘텐츠를 지정할 준비가 된 것입니다. 이 자습서에서는 제품 이름을 제목에 <h3> 표시해 보겠습니다. 그런 다음 HTML <table> 을 사용하여 첫 번째 및 세 번째 열에 속성 이름이 나열되고 두 번째와 네 번째 열이 해당 값을 나열하는 4열 테이블에 나머지 제품 속성을 표시해 보겠습니다.

이 태그는 Designer FormView의 템플릿 편집 인터페이스를 통해 에 입력하거나 선언적 구문을 통해 수동으로 입력할 수 있습니다. 템플릿으로 작업할 때 일반적으로 선언적 구문을 사용하여 직접 작업하는 것이 더 빠르지만 가장 익숙한 기술을 자유롭게 사용할 수 있습니다.

다음 태그는 의 구조가 완료된 후 FormView 선언적 태그를 ItemTemplate보여 줍니다.

<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1"
    AllowPaging="True" EnableViewState="False">
    <ItemTemplate>
        <hr />
        <h3><%# Eval("ProductName") %></h3>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("CategoryName") %></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("SupplierName")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Price:</td>
                <td class="ProductPropertyValue"><%# Eval("UnitPrice",
                  "{0:C}") %></td>
                <td class="ProductPropertyLabel">Units In Stock:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("UnitsInStock")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Units On Order:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("UnitsOnOrder") %></td>
                <td class="ProductPropertyLabel">Reorder Level:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("ReorderLevel")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit</td>
                <td class="ProductPropertyValue">
                  <%# Eval("QuantityPerUnit") %></td>
                <td class="ProductPropertyLabel">Discontinued:</td>
                <td class="ProductPropertyValue">
                    <asp:CheckBox runat="server" Enabled="false"
                      Checked='<%# Eval("Discontinued") %>' />
                </td>
            </tr>
        </table>
        <hr />
    </ItemTemplate>
</asp:FormView>

예를 들어 데이터 바인딩 구문 ( ) <%# Eval("ProductName") %>을 템플릿의 출력에 직접 삽입할 수 있습니다. 즉, 레이블 컨트롤의 Text 속성에 할당할 필요가 없습니다. 예를 들어 ProductName 를 사용하여 <h3><%# Eval("ProductName") %></h3>요소에 <h3> 표시되는 값이 있습니다. 이 값은 제품 Chai가 로 <h3>Chai</h3>렌더링합니다.

ProductPropertyLabel 및 ProductPropertyValue CSS 클래스는 에서 제품 속성 이름 및 값<table>의 스타일을 지정하는 데 사용됩니다. 이러한 CSS 클래스는 에 Styles.css 정의되어 속성 이름이 굵게 정렬되고 오른쪽 맞춤되고 속성 값에 오른쪽 안쪽 여백을 추가합니다.

FormView에서 사용할 수 있는 CheckBoxFields가 없으므로 값을 확인란으로 표시 Discontinued 하려면 자체 CheckBox 컨트롤을 추가해야 합니다. 속성은 Enabled False로 설정되어 읽기 전용이며 CheckBox의 Checked 속성은 데이터 필드 값 Discontinued 에 바인딩됩니다.

완료하면 ItemTemplate 제품 정보가 훨씬 더 유동적인 방식으로 표시됩니다. 마지막 자습서(그림 3)의 DetailsView 출력을 이 자습서의 FormView에서 생성된 출력과 비교합니다(그림 4).

엄격한 세부 정보View 출력

그림 3: 엄격한 세부 정보 보기 출력(전체 크기 이미지를 보려면 클릭)

Fluid FormView 출력

그림 4: Fluid FormView 출력(전체 크기 이미지를 보려면 클릭)

요약

GridView 및 DetailsView 컨트롤은 TemplateFields를 사용하여 출력을 사용자 지정할 수 있지만 둘 다 여전히 그리드와 같은 상자 형식으로 데이터를 표시합니다. 덜 엄격한 레이아웃을 사용하여 단일 레코드를 표시해야 하는 경우 FormView가 이상적인 선택입니다. DetailsView와 마찬가지로 FormView는 에서 단일 레코드를 DataSource렌더링하지만 DetailsView와 달리 템플릿으로만 구성되며 필드를 지원하지 않습니다.

이 자습서에서 보았듯이 FormView를 사용하면 단일 레코드를 표시할 때 보다 유연한 레이아웃을 사용할 수 있습니다. 이후 자습서에서는 FormsView와 동일한 수준의 유연성을 제공하지만 여러 레코드(예: GridView)를 표시할 수 있는 DataList 및 Repeater 컨트롤을 살펴보겠습니다.

행복한 프로그래밍!

저자 정보

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

특별 감사

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

이전다음