다음을 통해 공유

방법: 데이터 모델의 데이터 필드 모양 및 동작 사용자 지정

  • 아티클

업데이트: 2007년 11월

ASP.NET Dynamic Data에는 데이터 필드의 표시 및 편집을 위한 UI를 렌더링하는 필드 템플릿이 포함되어 있습니다. 기존 필드 템플릿을 변경하거나 새 사용자 지정 필드 템플릿을 만들어 이러한 UI를 사용자 지정할 수 있습니다.

이 항목에서는 다음과 같은 단계에 따라 데이터 필드 모양과 동작을 사용자 지정하는 방법을 설명합니다.

  • 데이터 모델의 데이터 필드에 UIHintAttribute 특성을 적용합니다. 이렇게 하면 Dynamic Data가 특정 사용자 지정 필드 템플릿을 사용하여 데이터 필드를 처리합니다.

  • 데이터 필드의 표시 및 편집을 위한 UI를 렌더링하는 사용자 지정 필드 템플릿을 만듭니다.

이 항목에서 설명하는 것처럼 데이터 계층에서 데이터 필드를 사용자 지정하면 사용자 지정한 내용이 웹 사이트 전체에 적용됩니다. Dynamic Data는 데이터 필드의 내장 형식을 기준으로 선택되는 기본 제공 템플릿 대신 사용자 지정 필드 템플릿을 사용하여 데이터 필드를 표시하고 수정합니다.

사용자 지정을 단일 페이지로 제한할 수도 있습니다. 자세한 내용은 방법: 사용자 지정 페이지 템플릿을 사용하여 개별 테이블의 레이아웃 사용자 지정을 참조하십시오.

데이터 계층에서 데이터 필드를 사용자 지정하려면 몇 가지 단계를 거쳐야 합니다. 이 항목의 절차는 이 과정의 각 단계에 해당합니다.

이 기능의 온라인 예제를 실행해 보십시오.

데이터 모델에 사용자 지정 필드 템플릿 지정

이 단원에서는 사용자 지정 필드 템플릿을 데이터 필드에 연결하는 단계를 설명합니다.

데이터 필드에 특성을 적용하려면

  1. 솔루션 탐색기에서 App_Code 폴더를 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.

  2. Visual Studio에 설치되어 있는템플릿에서 클래스를 클릭합니다.

  3. 이름 상자에서 사용자 지정 필드 템플릿을 사용하여 표시할 데이터가 포함된 데이터베이스 테이블(데이터 모델에 정의된 데이터베이스 테이블)의 이름을 입력합니다.

    파일 이름은 테이블을 나타내는 엔터티 클래스 이름이어야 합니다. 예를 들어 사용자 지정 필드 템플릿이 SalesOrderDetail 테이블의 데이터를 표시할 경우 파일 이름은 SalesOrderDetail.cs 또는 SalesOrderDetail.vb로 지정하고, 클래스 이름은 SalesOrderDetail로 지정합니다. 나중에 사용자가 만드는 이 클래스 파일에 데이터 필드에 특성을 적용할 수 있는 연결된 클래스도 포함합니다.

  4. 클래스 정의를 partial 클래스로 만들려면 해당 클래스 정의에 Visual Basic의 Partial 키워드 또는 Visual C#의 partial 키워드를 추가합니다. Visual C#에서 작업하는 경우 기본 생성자를 삭제합니다.

  5. 다음 예제에서처럼 Visual Basic의 Imports 키워드 또는 Visual C#의 using 키워드를 사용하여 System.Web.DynamicData 및 System.ComponentModel.DataAnnotations 네임스페이스를 가져옵니다.

    using System.Web.DynamicData;
using System.ComponentModel.DataAnnotations;

    Imports System.Web.DynamicData
Imports System.ComponentModel.DataAnnotations

  6. 1-3단계에서 만든 클래스 파일에서 연결된 메타데이터 클래스로 사용할 또 다른 partial 클래스를 만듭니다. 이 클래스에는 원하는 이름을 지정할 수 있습니다.

    다음 예제에서는 SalesOrderDetail 필드의 연결된 메타데이터 클래스를 만드는 방법을 보여 줍니다.

    public partial class SalesOrderDetailMetadata
{

}

    Partial Public Class SalesOrderDetailMetadata

End Class

  7. MetadataTypeAttribute 특성을 데이터 테이블의 partial 클래스 정의에 추가합니다. 특성의 매개 변수에 대해서는 이전 단계에서 만든 메타데이터 클래스의 이름을 지정합니다.

    다음 예제에서는 partial SalesOrderDetail 클래스를 연결된 메타데이터 클래스에 연결하는 특성을 적용하는 방법을 보여 줍니다.

    [MetadataType(typeof(SalesOrderDetailMetadata))]
public partial class SalesOrderDetail 
{

}

    <MetadataType(GetType(SalesOrderDetailMetadata))> _
Partial Public Class SalesOrderDetail 

End Class

  8. 연결된 메타데이터 클래스에서 사용자 지정하려는 데이터 필드와 이름이 일치하는 public 속성을 만듭니다.

  9. 표시 및 편집에 사용할 사용자 지정 필드 템플릿의 이름을 지정하여 속성에 UIHintAttribute 특성을 적용합니다.

    Object 형식은 메타데이터 클래스에서 자리 표시자 형식으로 사용되어 해당 데이터 필드를 나타냅니다. Dynamic Data는 런타임에 데이터 모델에서 실제 형식을 유추합니다.

    public partial class SalesOrderDetailMetadata
{    
    [UIHint("CustomFieldTemplate")]
    public object OrderQty;
}

    Partial Public Class SalesOrderDetailMetadata
    <UIHint("CustomFieldTemplate")> _
    Public OrderQty As Object
End Class

  10. 클래스 파일을 저장하고 닫습니다.

사용자 지정 필드 템플릿 만들기

필드 템플릿은 Dynamic Data가 데이터 필드를 표시 및 편집하기 위한 UI를 렌더링하는 데 사용하는 사용자 정의 컨트롤입니다. 이 단원에서는 데이터 필드의 표시를 위한 UI를 렌더링하는 사용자 지정 필드 템플릿을 만드는 단계에 대해 설명합니다.

표시에 사용할 사용자 지정 필드 템플릿을 만들려면

  1. 솔루션 탐색기에서 DynamicData\FieldTemplates 폴더를 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.

  2. Visual Studio에 설치되어 있는 템플릿에서 Dynamic Data 필드를 클릭합니다.

  3. 이름 상자에 사용자 지정 필드 템플릿의 이름을 입력합니다. 이 이름에는 아직 사용되지 않은 모든 이름을 지정할 수 있습니다. 이때 다른 파일에 코드 입력 상자를 선택해야 합니다.

  4. 추가를 클릭합니다.

    Visual Studio에서는 표시용 필드 템플릿 하나와 편집용 필드 템플릿 하나, 이렇게 두 개의 필드 템플릿을 만듭니다. 예를 들어 입력한 이름이 CustomFieldTemplate.ascx라면 Visual Studio에서 CustomFieldTemplate.ascx 및 CustomFieldTemplate_Edit.ascx를 만듭니다. 첫 번째 템플릿은 데이터 필드 표시를 위한 UI를 렌더링하고 두 번째 템플릿은 데이터 필드 편집을 위한 UI를 렌더링합니다.

  5. 데이터 필드 표시를 사용자 지정하려면 표시 사용자 컨트롤 파일을 열고 사용자 지정을 추가합니다.

    다음 예제에서는 데이터 표시용으로 사용자 지정된 필드 템플릿을 보여 줍니다. 이 예제에서 Dynamic Data 필드 템플릿이 기본적으로 제공하는 Literal 컨트롤은 Text 속성이 현재 필드 값 문자열로 설정된 Label 컨트롤로 대체되었습니다. FieldValueString 속성을 사용하면 데이터 필드의 값에 액세스할 수 있습니다.

    <asp:Label id="Label1"  
  Text='<%# FieldValueString %>'>
</asp:Label>

  6. 사용자 지정에 필요한 경우 표시 필드 템플릿의 코드 숨김 파일을 열고 사용자 지정을 추가합니다.

    다음 예제에서는 이전 단계에서 설명한 태그에 수행한 변경 사항으로 코드를 동기화하는 방법을 보여 줍니다. 이 코드에서 Literal1 식별자는 표시용 UI 사용자 지정을 지원하는 Label1 식별자로 대체되었습니다.

    public override Control DataControl {
  get {return Label1;}
}

    Public Overrides ReadOnly Property DataControl() As Control
  Get
    Return Label1
  End Get
End Property

  7. 필드 템플릿의 OnDataBinding 메서드를 재정의하고 데이터 필드 표시를 사용자 지정하는 코드를 추가합니다.

    다음 예제에서 볼 수 있는 것처럼 메서드에서 컨트롤의 FieldValue 속성에서 현재 데이터 필드 값을 가져와서 표시를 사용자 지정할 수 있습니다.

    protected override void OnDataBinding(EventArgs e)
{

    if (currentQty < min)
    {
      Label1.ForeColor = System.Drawing.Color.Red;
      Label1.Font.Bold = true;
    }
    else
      if (currentQty > max)
      {
        Label1.ForeColor = System.Drawing.Color.Blue;
        Label1.Font.Bold = true;
       }
    }
  }

    Protected Overloads Overrides Sub OnDataBinding( _
ByVal e As EventArgs)

    If currentQty < min Then
      Label1.ForeColor = System.Drawing.Color.Red
      Label1.Font.Bold = True
    ElseIf currentQty > max Then
      Label1.ForeColor = System.Drawing.Color.Blue
      Label1.Font.Bold = True
    End If
  End If
End Sub

다음 절차에서는 데이터 필드의 편집을 위한 UI를 렌더링하는 사용자 지정 필드 템플릿을 만드는 단계에 대해 설명합니다.

편집에 사용할 사용자 지정 필드 템플릿을 만들려면

  1. 이름이 _Edit 접미사로 끝나는 사용자 지정 필드 템플릿을 열고 사용자 지정을 추가합니다.

    다음 예제에서는 사용자가 입력한 데이터가 잘못된 경우 사용자 지정 경고 메시지를 표시하는 CustomValidator 컨트롤(일반 참조)을 추가하는 태그를 보여 줍니다. 예를 들어 데이터 필드 값이 필드 템플릿에 정의된 특정 한도를 벗어나면 메시지가 표시됩니다. 이 예제에서는 유효성 검사기의 Display 속성을 "Dynamic"으로 설정하므로 유효성 검사가 실패하는 경우에만 유효성 검사 컨트롤이 표시됩니다. 이 코드에서는 ControlToValidate 특성을 유효성을 검사할 컨트롤의 ID로 설정합니다. 또한 OnServerValidate 특성을 유효성 검사 이벤트 처리기의 이름으로 설정합니다.

    <asp:CustomValidator id="CustomValidator1"  
  ControlToValidate="TextBox1" Display="Dynamic"
  OnServerValidate="CustomValidation" />

  2. 사용자 정의 컨트롤 파일을 저장하고 닫습니다.

  3. 사용자 지정에 필요한 경우 편집 필드 템플릿의 코드 숨김 파일을 열고 사용자 지정을 추가합니다.

    다음 예제에서는 CustomValidator 컨트롤의 서버 코드를 만드는 방법을 보여 줍니다. 이 코드에서는 사용자가 입력한 값을 몇 가지 임계값과 비교하여 데이터가 허용된 범위를 벗어나면 오류 메시지를 표시합니다.

    protected void CustomValidation(object source, 
   ServerValidateEventArgs args)
{
    // Check if the input is in the allowed range.
    bool result = CheckRange(intUnits);
    // Return result.    
    args.IsValid = result;
}

    Protected Sub CustomValidation( _
  ByVal source As Object, ByVal args As ServerValidateEventArgs)

    'Check if the value is in the allowed range.
     Dim result As Boolean = CheckRange(intUnits)
     'Return result.    
     args.IsValid = result
End Sub

예제

이 예제에서는 데이터 모델을 사용하여 SalesOrderDetail 테이블의 OrderQty 데이터 필드를 표시하고 편집하기 위해 렌더링되는 UI를 사용자 지정하는 방법을 보여 줍니다.

CustomFieldTemplate.ascx 필드 템플릿은 값이 최소 경고 임계값보다 작으면 빨간색 전경색을 사용하여 주문 수량을 표시합니다. 하지만 값이 최대 경고 임계값보다 크면 파란색 전경색을 사용하여 주문 수량을 표시합니다.

CustomFieldTemplate_Edit.ascx 필드 템플릿은 사용자가 입력한 OrderQty 값이 범위 한계에 속하는지 확인합니다. 사용자가 입력한 값이 허용된 범위를 벗어나면 사용자 지정 오류 메시지가 표시됩니다.

<%@ Page Language="VB" 
AutoEventWireup="true" CodeFile="CustomAppearanceBehavior.aspx.vb" 
Inherits="CustomAppearanceBehavior" %>


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title></title>
    <link href="~/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
     <h2>Example: <%=Title%></h2>

     <!-- Enable dynamic behavior. The GridView must be 
     registered with the manager. See code-behind file. -->
    <asp:DynamicDataManager ID="DynamicDataManager1" 
        AutoLoadForeignKeys="true" />


    <form id="form1" >

        <!-- Capture validation exceptions -->
        <asp:DynamicValidator ID="ValidatorID" ControlToValidate="GridView1" 
             /> 

        <asp:GridView ID="GridView1" 
             
            DataSourceID="GridDataSource" 
            AutoGenerateColumns="false"  
            AutoGenerateEditButton="true"
            AllowPaging="true"
            PageSize="10"
            AllowSorting="true">
            <Columns>
                <asp:DynamicField DataField="OrderQty" />
                <asp:DynamicField DataField="UnitPrice" />
                <asp:DynamicField DataField="ModifiedDate" />
            </Columns>
            <EmptyDataTemplate>
                There are currently no items in this table.
            </EmptyDataTemplate>
       </asp:GridView>
    </form>

    <!-- Connect to the database -->
    <asp:LinqDataSource ID="GridDataSource"   
        TableName="SalesOrderDetails" EnableUpdate="true"
        ContextTypeName="AdventureWorksLTDataContext">
    </asp:LinqDataSource>
</body>
</html>

<%@ Page Language="C#" 
AutoEventWireup="true" CodeFile="CustomAppearanceBehavior.aspx.cs" 
Inherits="CustomAppearanceBehavior" %>


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title></title>
    <link href="~/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
     <h2>Example: <%=Title%></h2>

     <!-- Enable dynamic behavior. The GridView must be 
     registered with the manager. See code-behind file. -->
    <asp:DynamicDataManager ID="DynamicDataManager1" 
        AutoLoadForeignKeys="true" />


    <form id="form1" >

        <!-- Capture validation exceptions -->
        <asp:DynamicValidator ID="ValidatorID" ControlToValidate="GridView1" 
             /> 

        <asp:GridView ID="GridView1" 
             
            DataSourceID="GridDataSource" 
            AutoGenerateColumns="false"  
            AutoGenerateEditButton="true"
            AllowPaging="true"
            PageSize="10"
            AllowSorting="true">
            <Columns>
                <asp:DynamicField DataField="OrderQty" />
                <asp:DynamicField DataField="UnitPrice" />
                <asp:DynamicField DataField="ModifiedDate" />
            </Columns>
            <EmptyDataTemplate>
                There are currently no items in this table.
            </EmptyDataTemplate>
       </asp:GridView>
    </form>

    <!-- Connect to the database -->
    <asp:LinqDataSource ID="GridDataSource"   
        TableName="SalesOrderDetails" EnableUpdate="true"
        ContextTypeName="AdventureWorksLTDataContext">
    </asp:LinqDataSource>
</body>
</html>

Imports System
Imports System.Collections
Imports System.Configuration
Imports System.Web.DynamicData

Partial Public Class CustomAppearanceBehavior
    Inherits System.Web.UI.Page
    Protected _table As MetaTable

    Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
        ' Register control with the data manager.
        DynamicDataManager1.RegisterControl(GridView1)
    End Sub

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        ' Get the table entity.
        _table = GridDataSource.GetTable()

        ' Assign title dynamically.
        Title = String.Concat( _
        "Customize Appearance and Behavior of the ", _
        _table.Columns(2).DisplayName, " Data Field")
    End Sub
End Class

using System;
using System.Collections;
using System.Configuration;
using System.Web.DynamicData;

public partial class CustomAppearanceBehavior : System.Web.UI.Page
{
    protected MetaTable _table;

    protected void Page_Init(object sender, EventArgs e)
    {
        // Register control with the data manager.
        DynamicDataManager1.RegisterControl(GridView1);
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        // Get the table entity.
        _table = GridDataSource.GetTable();

        // Assign title dynamically.

        Title = string.Concat("Customize Appearance and Behavior of the ",
            _table.Columns[2].DisplayName, " Data Field");

    }
}

코드 컴파일

예제 코드를 컴파일하려면 다음이 필요합니다.

  • Microsoft Visual Studio 2008 서비스 팩 1 또는 Visual Web Developer 2008 Express Edition 서비스 팩 1

  • AdventureWorksLT 샘플 데이터베이스. SQL Server 샘플 데이터베이스를 다운로드 및 설치하는 방법에 대한 자세한 내용은 CodePlex 사이트의 Microsoft SQL Server Product Samples: Database를 참조하십시오. 실행 중인 SQL Server 버전(Microsoft SQL Server 2005 또는 Microsoft SQL Server 2008)에 맞는 올바른 샘플 데이터베이스 버전을 설치해야 합니다.

  • Dynamic Data 구동 웹 사이트. 이를 통해 데이터베이스의 데이터 컨텍스트를 만드는 것은 물론 사용자 지정할 데이터 필드가 들어 있는 클래스를 만들 수 있습니다. 자세한 내용은 Walkthrough: Creating a New Dynamic Data Web Site using Scaffolding를 참조하십시오.

참고 항목

작업

연습: 기존 웹 사이트에 Dynamic Data 추가

개념

ASP.NET Dynamic Data 필드 템플릿 개요

ASP.NET Dynamic Data 모델 개요

ASP.NET Dynamic Data 개요

참조

FieldTemplateUserControl