FormView의 템플릿 (C#) 사용Using the FormView's Templates (C#)

Scott Mitchellby Scott Mitchell

샘플 앱 다운로드 또는 PDF 다운로드Download Sample App or Download PDF

DetailsView와 달리 FormView는 필드로 구성 되지 않습니다.Unlike the DetailsView, the FormView is not composed of fields. 대신, FormView는 템플릿을 사용 하 여 렌더링 됩니다.Instead, the FormView is rendered using templates. 이 자습서에서는 FormView 컨트롤을 사용 하 여 데이터의 감소 된 표시를 제공 하는 방법을 살펴보겠습니다.In this tutorial we'll examine using the FormView control to present a less rigid display of data.

소개Introduction

마지막 두 자습서에서는 템플릿 필드를 사용 하 여 GridView 및 DetailsView 컨트롤의 출력을 사용자 지정 하는 방법을 살펴보았습니다.In the last two tutorials we saw how to customize the GridView and DetailsView controls' outputs using TemplateFields. 템플릿 필드를 사용 하면 특정 필드의 내용이 고도로 사용자 지정 될 수 있지만, GridView와 DetailsView의 끝에는 모두 boxy, 그리드 모양의 모양이 있습니다.TemplateFields allow for the contents for a specific field to be highly customized, but in the end both the GridView and DetailsView have a rather boxy, grid-like appearance. 대부분의 경우에는 표 형태의 레이아웃을 사용할 때 유용 하지만, 더 많은 유체를 사용할 경우에는 더 이상 필요 하지 않습니다.For many scenarios such a grid-like layout is ideal, but at times a more fluid, less rigid display is needed. 단일 레코드를 표시 하는 경우 FormView 컨트롤을 사용 하 여 유체 레이아웃을 사용할 수 있습니다.When displaying a single record, such a fluid layout is possible using the FormView control.

DetailsView와 달리 FormView는 필드로 구성 되지 않습니다.Unlike the DetailsView, the FormView is not composed of fields. BoundField 또는 Templatefield로 변환를 FormView에 추가할 수 없습니다.You can't add a BoundField or TemplateField to a FormView. 대신, FormView는 템플릿을 사용 하 여 렌더링 됩니다.Instead, the FormView is rendered using templates. FormView는 단일 Templatefield로 변환를 포함 하는 DetailsView 컨트롤로 생각 하면 됩니다.Think of the FormView as a DetailsView control that contains a single TemplateField. FormView는 다음 템플릿을 지원 합니다.The FormView supports the following templates:

  • FormView에 표시 되는 특정 레코드를 렌더링 하는 데 사용 ItemTemplateItemTemplate used to render the particular record displayed in the FormView
  • 선택적 머리글 행을 지정 하는 데 사용 HeaderTemplateHeaderTemplate used to specify an optional header row
  • 선택적 바닥글 행을 지정 하는 데 사용 FooterTemplateFooterTemplate used to specify an optional footer row
  • FormView의 DataSource에 레코드가 없는 경우 EmptyDataTemplate 컨트롤의 태그 렌더링을 위한 ItemTemplate 대신 EmptyDataTemplate 사용 됩니다.EmptyDataTemplate when the FormView's DataSource lacks any records, the EmptyDataTemplate is used in place of the ItemTemplate for rendering the control's markup
  • PagerTemplate를 사용 하 여 페이징이 활성화 된 FormViews의 페이징 인터페이스를 사용자 지정할 수 있습니다.PagerTemplate can be used to customize the paging interface for FormViews that have paging enabled
  • EditItemTemplate / 편집 인터페이스를 사용자 지정 하거나 이러한 기능을 지 원하는 FormViews의 인터페이스를 삽입 하는 데 사용 InsertItemTemplateEditItemTemplate / InsertItemTemplate used to customize the editing interface or inserting interface for FormViews that support such functionality

이 자습서에서는 FormView 컨트롤을 사용 하 여 보다 엄격한 제품 표시를 제공 하는 방법을 살펴보겠습니다.In this tutorial we'll examine using the FormView control to present a less rigid display of products. 이름, 범주, 공급자 등에 대 한 필드를 포함 하는 대신 FormView의 ItemTemplate 헤더 요소와 <table>의 조합을 사용 하 여 이러한 값을 표시 합니다 (그림 1 참조).Rather than having fields for the name, category, supplier, and so on, the FormView's ItemTemplate will show these values using a combination of a header element and a <table> (see Figure 1).

DetailsView에 표시 된 표 형태의 레이아웃에서 FormView 나누기를 합니다.The FormView Breaks Out of the Grid-Like Layout Seen in the DetailsView

그림 1: FormView는 DetailsView에 표시 된 표 형태의 레이아웃에서 분리 됩니다 (전체 크기 이미지를 보려면 클릭).Figure 1: The FormView Breaks Out of the Grid-Like Layout Seen in the DetailsView (Click to view full-size image)

1 단계: FormView에 데이터 바인딩Step 1: Binding the Data to the FormView

FormView.aspx 페이지를 열고 도구 상자에서 FormView를 디자이너로 끌어 옵니다.Open the FormView.aspx page and drag a FormView from the Toolbox onto the Designer. FormView를 처음 추가 하는 경우에는 ItemTemplate 필요 함을 나타내는 회색 상자로 표시 됩니다.When first adding the FormView it appears as a gray box, instructing us that an ItemTemplate is needed.

ItemTemplate을 제공할 때까지 디자이너에서 FormView를 렌더링할 수 없습니다.The FormView Cannot be Rendered in the Designer Until an ItemTemplate is Provided

그림 2: ItemTemplate 제공 될 때까지 디자이너에서 FormView를 렌더링할 수 없음 (전체 크기 이미지를 보려면 클릭)Figure 2: The FormView Cannot be Rendered in the Designer Until an ItemTemplate is Provided (Click to view full-size image)

ItemTemplate는 직접 만들 수 있으며 (선언적 구문을 통해) 디자이너를 통해 FormView를 데이터 소스 컨트롤에 바인딩하여 자동으로 만들 수 있습니다.The ItemTemplate can be created by hand (through the declarative syntax) or can be auto-created by binding the FormView to a data source control through the Designer. 이 자동 생성 ItemTemplate에는 각 필드의 이름과 Text 속성이 필드의 값에 바인딩되는 레이블 컨트롤을 나열 하는 HTML이 포함 되어 있습니다.This auto-created ItemTemplate contains HTML that lists the name of each field and a Label control whose Text property is bound to the field's value. 또한이 방법은 InsertItemTemplateEditItemTemplate를 자동으로 만들며, 둘 다 데이터 소스 컨트롤에서 반환 하는 각 데이터 필드에 대 한 입력 컨트롤로 채워집니다.This approach also auto-creates an InsertItemTemplate and EditItemTemplate, both of which are populated with input controls for each of the data fields returned by the data source control.

템플릿을 자동으로 만들려면 FormView의 스마트 태그에서 ProductsBLL 클래스의 GetProducts() 메서드를 호출 하는 새 ObjectDataSource 컨트롤을 추가 합니다.If you want to auto-create the template, from the FormView's smart tag add a new ObjectDataSource control that invokes the ProductsBLL class's GetProducts() method. 그러면 ItemTemplate, InsertItemTemplateEditItemTemplate를 사용 하 여 FormView가 만들어집니다.This will create a FormView with an ItemTemplate, InsertItemTemplate, and EditItemTemplate. 편집 이나 삽입을 지 원하는 FormView를 만드는 데 관심이 없으므로 원본 뷰에서 InsertItemTemplateEditItemTemplate를 제거 합니다.From the Source view, remove the InsertItemTemplate and EditItemTemplate since we're not interested in creating a FormView that supports editing or inserting yet. 그런 다음 작업을 수행할 수 있는 깨끗 한 슬레이트를 갖도록 ItemTemplate 내에서 태그를 지웁니다.Next, clear out the markup within the ItemTemplate so that we have a clean slate to work from.

ItemTemplate를 수동으로 빌드하는 경우 도구 상자에서 Designer로 끌어와 ObjectDataSource를 추가 하 고 구성할 수 있습니다.If you'd rather build up the ItemTemplate manually, you can add and configure the ObjectDataSource by dragging it from the Toolbox onto the Designer. 그러나 디자이너에서 FormView의 데이터 원본을 설정 하지 마십시오.However, don't set the FormView's data source from the Designer. 대신 원본 뷰로 이동 하 여 FormView의 DataSourceID 속성을 ObjectDataSource의 ID 값으로 수동으로 설정 합니다.Instead, go to the Source view and manually set the FormView's DataSourceID property to the ID value of the ObjectDataSource. 다음으로 ItemTemplate를 수동으로 추가 합니다.Next, manually add the ItemTemplate.

이 시점에서 수행 하는 방법에 관계 없이 FormView의 선언 태그는 다음과 같습니다.Regardless of what approach you decided to take, at this point your FormView's declarative markup should look like:

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

    </ItemTemplate>
</asp:FormView>

잠시 시간을 사용 하 여 FormView의 스마트 태그에서 페이징 사용 확인란을 선택 합니다. 이렇게 하면 FormView의 선언적 구문에 AllowPaging="True" 특성이 추가 됩니다.Take a moment to check the Enable Paging checkbox in the FormView's smart tag; this will add the AllowPaging="True" attribute to the FormView's declarative syntax. 또한 EnableViewState 속성을 False로 설정 합니다.Also, set the EnableViewState property to False.

2 단계:ItemTemplate태그 정의Step 2: Defining theItemTemplate's Markup

FormView가 ObjectDataSource 컨트롤에 바인딩되고 페이징을 지원 하도록 구성 된 상태에서 ItemTemplate에 대 한 콘텐츠를 지정할 준비가 되었습니다.With the FormView bound to the ObjectDataSource control and configured to support paging we're ready to specify the content for the ItemTemplate. 이 자습서에서는 제품 이름이 <h3> 제목에 표시 되어 있습니다.For this tutorial, let's have the product's name displayed in an <h3> heading. 다음에는 HTML <table>를 사용 하 여 첫 번째 및 세 번째 열에 속성 이름을 나열 하 고 두 번째 및 네 번째 열에 값을 나열 하는 네 열 테이블에 나머지 제품 속성을 표시 해 보겠습니다.Following that, let's use an HTML <table> to display the remaining product properties in a four-column table where the first and third columns list the property names and the second and fourth list their values.

이 태그는 디자이너에서 FormView의 템플릿 편집 인터페이스를 통해 입력 하거나 선언적 구문을 통해 수동으로 입력할 수 있습니다.This markup can be entered in through the FormView's template editing interface in the Designer or entered manually through the declarative syntax. 템플릿으로 작업 하는 경우 일반적으로 선언적 구문으로 직접 작업 하는 것이 더 빠르지만, 가장 편안한 기술을 자유롭게 사용할 수 있습니다.When working with templates I typically find it quicker to work directly with the declarative syntax, but feel free to use whatever technique you're most comfortable with.

다음 태그는 ItemTemplate의 구조가 완료 된 후의 FormView 선언 태그를 보여 줍니다.The following markup shows the FormView declarative markup after the ItemTemplate's structure has been completed:

<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") %>은 템플릿의 출력에 직접 삽입 될 수 있습니다.Notice that the databinding syntax - <%# Eval("ProductName") %>, for example can be injected directly into the template's output. 즉, 레이블 컨트롤의 Text 속성에 할당할 필요가 없습니다.That is, it need not be assigned to a Label control's Text property. 예를 들어 <h3><%# Eval("ProductName") %></h3>를 사용 하 여 <h3> 요소에 표시 되는 ProductName 값이 있습니다 .이 값은 Chai가 <h3>Chai</h3>으로 렌더링 합니다.For example, we have the ProductName value displayed in an <h3> element using <h3><%# Eval("ProductName") %></h3>, which for the product Chai will render as <h3>Chai</h3>.

ProductPropertyLabelProductPropertyValue CSS 클래스는 <table>에서 product 속성 이름 및 값의 스타일을 지정 하는 데 사용 됩니다.The ProductPropertyLabel and ProductPropertyValue CSS classes are used for specifying the style of the product property names and values in the <table>. 이러한 CSS 클래스는 Styles.css 정의 되며 속성 이름이 굵게 표시 되 고 오른쪽에 맞춰집니다. 속성 값에 오른쪽 안쪽 여백이 추가 됩니다.These CSS classes are defined in Styles.css and cause the property names to be bold and right-aligned and add a right padding to the property values.

FormView에서 사용할 수 있는 CheckBoxFields 없기 때문에 Discontinued 값을 checkbox로 표시 하기 위해 자체 CheckBox 컨트롤을 추가 해야 합니다.Since there are no CheckBoxFields available with the FormView, in order to show the Discontinued value as a checkbox we must add our own CheckBox control. Enabled 속성이 False로 설정 되어 읽기 전용으로 설정 되어 있고 CheckBox의 Checked 속성이 Discontinued 데이터 필드의 값에 바인딩되어 있습니다.The Enabled property is set to False, making it read-only, and the CheckBox's Checked property is bound to the value of the Discontinued data field.

ItemTemplate 완료 되 면 제품 정보가 훨씬 더 많은 유체로 표시 됩니다.With the ItemTemplate complete, the product information is displayed in a much more fluid manner. 마지막 자습서의 DetailsView 출력 (그림 3)을이 자습서의 FormView에서 생성 한 출력과 비교 합니다 (그림 4).Compare the DetailsView output from the last tutorial (Figure 3) with the output generated by the FormView in this tutorial (Figure 4).

고정 DetailsView 출력 The Rigid DetailsView Output

그림 3: 고정 DetailsView 출력 (전체 크기 이미지를 보려면 클릭)Figure 3: The Rigid DetailsView Output (Click to view full-size image)

유체 FormView 출력 The Fluid FormView Output

그림 4: 유체 FormView 출력 (전체 크기 이미지를 보려면 클릭)Figure 4: The Fluid FormView Output (Click to view full-size image)

요약Summary

GridView 및 DetailsView 컨트롤은 템플릿 필드를 사용 하 여 출력을 사용자 지정할 수 있지만, 둘 다 표 형태의 데이터를 표시 합니다.While the GridView and DetailsView controls can have their output customized using TemplateFields, both still present their data in a grid-like, boxy format. 이러한 경우에는 감소 하는 레이아웃을 사용 하 여 단일 레코드를 표시 해야 하는 경우에는 FormView를 선택 하는 것이 좋습니다.For those times when a single record needs to be shown using a less rigid layout, the FormView is an ideal choice. DetailsView과 마찬가지로 FormView는 DataSource에서 단일 레코드를 렌더링 하지만 DetailsView와는 달리 템플릿으로 구성 되며 필드를 지원 하지 않습니다.Like the DetailsView, the FormView renders a single record from its DataSource, but unlike the DetailsView it is composed just of templates and does not support fields.

이 자습서에서 살펴본 것 처럼 FormView는 단일 레코드를 표시할 때 보다 유연한 레이아웃을 허용 합니다.As we saw in this tutorial, the FormView allows for a more flexible layout when displaying a single record. 이후 자습서에서는 양식 보기와 동일한 수준의 유연성을 제공 하지만 여러 레코드 (예: GridView)를 표시할 수 있는 DataList 및 Repeater 컨트롤을 살펴보겠습니다.In future tutorials we'll examine the DataList and Repeater controls, which provide the same level of flexibility as the FormsView, but are able to display multiple records (like the GridView).

행복 한 프로그래밍Happy Programming!

저자 정보About the Author

Scott Mitchell(7 개의 ASP/ASP. NET books 및 4GuysFromRolla.com창립자)은 1998부터 Microsoft 웹 기술을 사용 하 여 작업 했습니다.Scott Mitchell, author of seven ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies since 1998. Scott은 독립 컨설턴트, 강사 및 기록기로 작동 합니다.Scott works as an independent consultant, trainer, and writer. 최신 책은 24 시간 이내에 ASP.NET 2.0을 sams teach yourself것입니다.His latest book is Sams Teach Yourself ASP.NET 2.0 in 24 Hours. mitchell@4GuysFromRolla.com에 도달할 수 있습니다 .He can be reached at mitchell@4GuysFromRolla.com. 또는 블로그를 통해 http://ScottOnWriting.NET에서 찾을 수 있습니다.or via his blog, which can be found at http://ScottOnWriting.NET.

특별히 감사 합니다.Special Thanks To

이 자습서 시리즈는 많은 유용한 검토자가 검토 했습니다.This tutorial series was reviewed by many helpful reviewers. 이 자습서에 대 한 잠재 고객 검토자가 E.R.Lead reviewer for this tutorial was E.R. Gilmore.Gilmore. 예정 된 MSDN 문서를 검토 하는 데 관심이 있나요?Interested in reviewing my upcoming MSDN articles? 그렇다면mitchell@4GuysFromRolla.com에서 줄을 삭제 합니다.If so, drop me a line at mitchell@4GuysFromRolla.com.