연습: ASP.NET 데이터 바인딩된 컨트롤에서 동적 데이터 사용

이 연습에서는 스캐폴딩이나 부분적인 스캐폴딩 요소를 사용하지 않고 데이터 바인딩된 컨트롤에 Dynamic Data 기능을 통합하는 방법을 보여 줍니다. 이 방법은 기존 웹 사이트의 데이터 바인딩된 컨트롤에 동적 동작을 추가하려는 경우에 유용합니다.

ObjectDataSource 컨트롤을 사용하여 데이터베이스에 액세스하고 Dynamic Data 기능을 활용할 수도 있습니다. 이 컨트롤은 스캐폴딩을 사용하는 Data Dynamic 웹 사이트에서 사용되는 LinqDataSource 컨트롤 및 EntityDataSource 컨트롤을 대신합니다. 이 연습에서는 AdventureWorks 샘플 데이터베이스의 특정 테이블에 있는 데이터를 노출하기 위해 ObjectDataSource 컨트롤과 상호 작용하는 사용자 지정 비즈니스 클래스를 만들어 보겠습니다.

이 항목에서는 다음 작업에 대해 설명합니다.

  • GridView 데이터 바인딩된 컨트롤에서 Dynamic Data 사용

  • ObjectDataSource 컨트롤을 사용하여 내부 데이터베이스와 상호 작용

  • GridView 컨트롤에 지정한 테이블을 표시하고 사용자가 테이블의 행을 업데이트할 수 있도록 하기

이 항목에는 다음과 같은 단원이 포함되어 있습니다.

이 항목의 예제를 완료하려면 다음이 필요합니다.

이 기능을 보여 주는 비디오를 참조하십시오(동적 데이터 사용 보기).

이 항목에 수반되는 Visual Studio 프로젝트 및 소스 코드는 Enabling Dynamic Data에서 다운로드할 수 있습니다.

우선 Dynamic Data 전용 웹 응용 프로그램이 아닌 ASP.NET 웹 사이트를 만듭니다.

ASP.NET 웹 응용 프로그램을 만들려면

  1. Visual Studio를 시작합니다.

  2. 파일 메뉴에서 새로 만들기를 클릭한 다음 프로젝트를 클릭합니다.

    새 프로젝트 대화 상자가 표시됩니다.

  3. 설치된 템플릿의 왼쪽 창에서 Visual Basic 또는 Visual C#을 선택한 다음 오른쪽 창에서 Web Form을 선택합니다.

  4. 설치된 템플릿에서 ASP.NET 웹 응용 프로그램을 선택합니다.

  5. 위치 상자에 웹 응용 프로그램을 보관할 폴더의 이름을 입력합니다. 예를 들어 폴더 이름으로 C:\WebApplications\EnableDynamicData를 입력합니다.

  6. 확인을 클릭합니다.

다음 단계에서는 데이터베이스를 추가합니다.

웹 응용 프로그램에 데이터베이스를 추가하려면

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

  2. 기존 항목 추가 대화 상자에서 AdventureWorksLT 데이터베이스 파일(AdventureWorksLT.mdf)이 저장되어 있는 위치를 입력한 다음 추가를 클릭합니다.

    이렇게 하면 데이터베이스 파일의 복사본이 프로젝트에 만들어집니다. 자세한 내용은 방법: .MDF 파일을 사용하여 AdventureWorksLT 데이터베이스에 연결을 참조하십시오.

이제 데이터베이스 테이블을 나타내는 클래스를 포함하는 데이터 모델을 만들 수 있습니다. Dynamic Data는 이러한 클래스를 사용하여 데이터베이스와 상호 작용합니다. 이 연습에서는 LINQ-to-SQL 데이터 모델을 사용합니다. 그러나 ADO.NET Entity Framework 데이터 모델을 사용할 수도 있습니다. 이 연습에서 다루지는 않지만 데이터 모델링 도구를 사용하지 않고 수동으로 이러한 클래스를 직접 만들 수도 있습니다.

데이터 모델을 만들려면

  1. 솔루션 탐색기에서 프로젝트 이름을 마우스 오른쪽 단추로 클릭하고 추가를 클릭합니다.

  2. 새 항목을 선택하여 클릭합니다.

  3. 설치된 템플릿의 왼쪽 창에서 데이터를 선택합니다.

  4. 가운데 창에서 LINQ to SQL 클래스를 클릭합니다.

  5. 이름 상자에서 데이터베이스 모델 이름으로 AdventureWorksLT.dbml을 입력합니다.

  6. 추가를 클릭합니다.

    개체 관계형 디자이너가 표시됩니다. 자세한 내용은 O/R 디자이너(개체 관계형 디자이너)를 참조하십시오.

  7. 개체 관계형 디자이너에서 서버 탐색기 링크를 클릭합니다.

  8. 서버 탐색기데이터 연결에서 AdventureWorksLT_Data.mdf 노드를 확장한 다음 테이블 노드를 확장합니다.

  9. 모든 테이블을 선택한 후 개체 관계형 디자이너 창으로 끌어 놓습니다.

  10. 표시된 다이어그램에서 SalesOrdersDetail 테이블의 모든 열을 선택합니다.

  11. 해당 속성 창에서 업데이트 확인 속성을 사용 안 함으로 설정합니다.

  12. 서버 탐색기를 닫습니다.

  13. AdventureWorksLT.dbml 파일을 저장한 다음 닫습니다.

    이제 AdventureWorksLT 데이터베이스를 나타내는 데이터 모델이 만들어졌습니다.

다음 단계에서는 응용 프로그램에서 데이터베이스 정보를 액세스하고 처리할 수 있도록 하는 코드를 작성합니다. Dynamic Data 웹 응용 프로그램에서는 이 논리가 자동으로 생성됩니다. 하지만 이 연습에서는 ObjectDataSource 컨트롤을 통해 사용하기 위해 이 코드를 작성하는 방법을 보여 줍니다. 이 연습에서 사용자 지정 논리는 SalesOrderDetail 테이블에 포함되어 있는 데이터 필드를 나열하고 수정하는 메서드로 구성됩니다.

지정한 테이블에 액세스하기 위한 사용자 지정 논리를 만들려면

  1. 솔루션 탐색기에서 프로젝트 이름을 마우스 오른쪽 단추로 클릭하고 추가를 클릭합니다.

  2. 새 항목을 선택하여 클릭합니다.

  3. 설치된 템플릿의 왼쪽 창에서 코드를 클릭합니다.

  4. 가운데 창에서 코드 파일을 클릭합니다.

  5. 이름 상자에 ProcessingOrderDetails.vb 또는 ProcessingOrderDetails.cs를 입력한 다음 추가를 클릭합니다.

  6. 다음 코드를 새 클래스에 복사하여 파일에 있는 기존 코드를 바꿉니다.

    Imports System
    Imports System.Collections.Generic
    Imports System.Linq
    Imports System.Web
    
    Namespace EnableDynamicData
      Public Class ProcessingOrderDetails
        Public Function GetSalesOrderDetails() As IEnumerable( _
          Of SalesOrderDetail)
          Using db As New AdventureWorksLTDataContext()
            Return db.SalesOrderDetails.ToList()
          End Using
        End Function
    
        Public Sub Update(ByVal p As SalesOrderDetail)
          Using db As New AdventureWorksLTDataContext()
            db.SalesOrderDetails.Attach(p, True)
            db.SubmitChanges()
          End Using
        End Sub
      End Class
    End Namespace
    

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace EnableDynamicData
    {
      public class ProcessingOrderDetails
      {
        public IEnumerable<SalesOrderDetail> GetSalesOrderDetails()
        {
          using (AdventureWorksLTDataContext db = 
             new AdventureWorksLTDataContext())
          {
            return db.SalesOrderDetails.ToList();
           }
        }
    
        public void Update(SalesOrderDetail p)
        {
          using (AdventureWorksLTDataContext db = 
            new AdventureWorksLTDataContext())
            {
              db.SalesOrderDetails.Attach(p, true);
              db.SubmitChanges();
            }
        }
      }
    }
    

    이 클래스에는 다음 메서드가 들어 있습니다.

    • GetSalesOrderDetails. 이 메서드는 SalesOrderDetail 테이블의 데이터 행을 반환합니다. 데이터베이스 컨텍스트 개체를 인스턴스화한 다음 SalesOrderDetails 클래스를 사용하여 행 컬렉션을 가져옵니다.

    • Update. 이 메서드는 SalesOrderDetail 테이블의 열 값을 변경합니다. 데이터베이스 컨텍스트 개체를 인스턴스화한 다음 SalesOrderDetail 테이블에서 이루어진 변경 내용을 데이터베이스에 전송합니다.

  7. 파일을 저장한 후 닫습니다.

  8. 빌드 메뉴에서 EnableDynamicData 빌드(또는 웹 응용 프로그램에 사용된 이름)를 클릭하여 솔루션을 빌드합니다.

    이렇게 하면 다음 절차에서 사용할 비즈니스 개체가 만들어집니다.

이 단원에서는 데이터베이스 스키마 또는 사용자 지정 메타데이터로부터 유추된 유효성 검사 및 페이지 템플릿 등과 같은 기능을 사용할 수 있도록 데이터 바인딩된 컨트롤을 구성하는 방법을 보여 줍니다. Dynamic Data를 사용하도록 설정만 하면 응용 프로그램에서 이러한 기능을 사용할 수 있습니다. 컨트롤은 SalesOrderDetail 테이블에 들어 있는 값을 표시하고 변경하는 데 사용됩니다.

첫 번째 단계에서는 데이터베이스와 상호 작용하도록 데이터 소스 컨트롤을 구성합니다.

웹 페이지 및 데이터 소스 컨트롤을 추가하려면

  1. 솔루션 탐색기에서 프로젝트 이름을 마우스 오른쪽 단추로 클릭하고 추가를 클릭합니다.

  2. 새 항목을 클릭합니다.

  3. 설치된 템플릿의 왼쪽 창에서 을 클릭합니다.

  4. 가운데 창에서 Web Form을 클릭합니다.

  5. 이름 상자에 EnableDynamicData.aspx를 입력한 다음 추가를 클릭합니다.

  6. 디자인 뷰로 전환합니다.

  7. 도구 상자데이터 그룹에서 ObjectDataSource 컨트롤을 페이지로 끌어옵니다.

  8. ObjectDataSource 작업 메뉴에서 데이터 소스 구성을 클릭합니다.

    비즈니스 개체 선택 대화 상자가 표시됩니다.

  9. 비즈니스 개체 선택 목록에서 이전 절차에서 만든 ProcessingOrderDetails 클래스를 선택합니다.

  10. 다음을 클릭합니다.

    데이터 메서드 정의 대화 상자가 표시됩니다.

  11. 선택 탭 창의 메서드 선택 목록에서 GetSalesOrderDetails 메서드를 선택합니다.

  12. 업데이트 탭을 클릭합니다.

  13. 업데이트 탭 창의 메서드 선택 목록에서 Update 메서드를 선택합니다.

  14. 마침을 클릭합니다.

    데이터 모델을 통해 데이터베이스와 상호 작용하는 ProcessingOrderDetails 클래스를 사용하도록 데이터 소스 컨트롤을 구성해 보았습니다.

다음 단계에서는 데이터 바인딩된 컨트롤을 만들고 이 컨트롤에 대해 Dynamic Data를 사용하도록 설정합니다. 그러면 컨트롤에서 Dynamic Data 기능을 사용하여 데이터 표시 및 편집을 위한 UI를 만들 수 있습니다.

Dynamic Data 기능을 사용하도록 데이터 바인딩된 컨트롤을 구성하려면

  1. 도구 상자데이터 그룹에서 GridView 컨트롤을 페이지로 끌어옵니다.

  2. 데이터 소스 선택 목록의 GridView 작업 메뉴에서 ObjectDataSource1를 선택합니다.

    이것은 이전 절차에서 만든 ObjectDataSource 컨트롤의 ID입니다.

  3. 페이징, 편집 및 선택을 사용하도록 설정합니다.

  4. 소스 뷰로 전환합니다.

  5. GridView 컨트롤의 Columns 요소에서 자동으로 생성된 모든 DataBoundField 컨트롤을 삭제합니다. CommandField 요소는 남겨 둡니다.

  6. 다음 예제와 같이 AutoGenerateColumns 특성을 true로 설정하여 열 자동 생성을 사용하도록 설정합니다.

    <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
      DataSourceID="ObjectDataSource1" AutoGenerateColumns="True" >
        <Columns>
          <asp:CommandField 
            ShowEditButton="True" ShowSelectButton="True" /> 
        </Columns>
    </asp:GridView>
    
  7. EnableDynamicData.aspx 파일을 저장하고 닫습니다.

  8. EnableDynamicData.aspx.vb 또는 EnableDynamicData.aspx.cs 클래스 파일을 엽니다.

  9. 다음 예제와 같이 System.Web.DynamicData 네임스페이스에 대한 참조를 추가합니다.

    Imports System.Web.DynamicData
    

    using System.Web.DynamicData
    
  10. 다음 예제와 같이 Page_Init 메서드에서 GridView 컨트롤에 대해 Dynamic Data를 사용하도록 설정합니다.

    Private Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
        GridView1.EnableDynamicData(GetType(SalesOrderDetail))
    End Sub
    

    protected void Page_Init()
      {
        GridView1.EnableDynamicData(typeof(SalesOrderDetail));
      }
    
  11. 파일을 저장한 후 닫습니다.

  12. 응용 프로그램을 다시 빌드합니다.

이 단원에서는 다음을 확인함으로써 GridView 컨트롤에 Dynamic Data 기능이 통합되었는지 테스트하는 방법을 보여 줍니다.

  • 사용자 지정 비즈니스 논리가 데이터베이스와 제대로 상호 작용하는지 확인합니다.

  • 데이터 필드에 이루어진 변경 내용에 대해 Dynamic Data 유효성 검사가 수행됩니다.

  • Dynamic Data는 데이터베이스 스키마 메타데이터로부터 유추한 정보를 기준으로 오류 메시지를 생성합니다.

Dynamic Data 기능을 테스트하려면

  1. 솔루션 탐색기에서 EnableDynamicData.aspx 페이지를 마우스 오른쪽 단추로 클릭한 다음 브라우저에서 보기를 클릭합니다.

    선택한 열이 있는 SalesOrderDetail 테이블을 보여 주는 페이지가 브라우저에 표시됩니다.

  2. 올바른 SalesOrderDetails 데이터 필드가 표시되는지 확인합니다.

  3. 아무 행에서 편집을 클릭하고 UnitPrice 열에 숫자가 아닌 값을 입력합니다.

  4. 같은 행에서 업데이트를 클릭합니다.

    UnitPrice 필드는 10진수 값이어야 함을 경고하는 오류 메시지가 표시됩니다. 편집에 사용되는 UI는 Dynamic Data 기본 템플릿을 기준으로 한 것입니다.

  5. 같은 행에서 취소를 클릭합니다.

  6. 아무 행에서 편집을 클릭한 다음 OrderQty 열을 데이터베이스에서 허용하는 최대 정수 값(32767) 이하의 값으로 변경합니다.

  7. 같은 행에서 업데이트를 클릭합니다.

    Dynamic Data가 데이터베이스를 업데이트합니다. 유효한 값을 입력했기 때문에 데이터가 Dynamic Data 유효성 검사를 통과합니다.

  8. 아무 행에서 편집을 클릭한 다음 OrderQty 열을 데이터베이스에서 허용하는 최대 정수 값(32767) 이상의 값으로 변경합니다.

  9. 같은 행에서 업데이트를 클릭합니다.

    유효한 값을 입력하라는 오류 메시지가 나타납니다.

  10. 같은 행에서 취소를 클릭합니다.

    이것은 Dynamic Data 기능이 GridView 컨트롤과 통합되었으며 데이터베이스 스키마에서 가져온 메타데이터 정보를 사용함을 보여 줍니다. 유효성 검사는 해당 응용 프로그램이 Dynamic Data에서 상속받은 기능의 일부입니다.

  11. 브라우저를 닫습니다.

이 연습 단원에서는 데이터베이스 스키마에 사용자 지정 정보(메타데이터)를 추가합니다. Dynamic Data는 데이터 필드를 처리할 때 이 메타데이터를 사용합니다. 예를 들어 데이터 필드에 대해 데이터베이스에서 허용하는 것과 다른 값 범위를 지정할 수 있습니다. 이 연습에서는 UnitPrice 값(데이터베이스에서 필수 필드가 아님)이 필요한 사용자 지정 정보를 추가하고 OrderQty 값에 대한 범위를 설정해 보겠습니다.

사용자 지정 메타데이터를 제공하려면

  1. 솔루션 탐색기에서 프로젝트 이름을 마우스 오른쪽 단추로 클릭한 다음 참조 추가를 선택하여 클릭합니다.

    참조 추가 대화 상자가 표시됩니다.

  2. .NET 탭을 클릭합니다.

  3. 목록에서 System.ComponentModel.DataAnnotations를 선택합니다.

  4. 확인을 클릭합니다.

  5. EnableDynamicData.aspx.vb 또는 EnableDynamicData.aspx.cs 파일을 엽니다.

  6. 다음 코드를 파일에 복사하여 파일에 있는 기존 코드를 바꿉니다.

    Imports System.ComponentModel.DataAnnotations
    
    Namespace EnableDynamicData
      <MetadataType(GetType(SalesOrderDetailMetadata))> _
      Partial Public Class SalesOrderDetail
        Public Class SalesOrderDetailMetadata
          Private privateUnitPrice As String
          <Required()> _
          Public Property UnitPrice() As String
            Get
              Return privateUnitPrice
            End Get
            Set(ByVal value As String)
              privateUnitPrice = value
            End Set
          End Property
    
          Private privateOrderQty As Decimal
            <Range(0, 100)> _
            Public Property OrderQty() As Decimal
              Get
                Return privateOrderQty
              End Get
              Set(ByVal value As Decimal)
                privateOrderQty = value
              End Set
            End Property
        End Class
      End Class
    
    End Namespace
    

    using System.ComponentModel.DataAnnotations;
    
    namespace EnableDynamicData
    {
      [MetadataType(typeof(SalesOrderDetailMetadata))]
      public partial class SalesOrderDetail
      {
        public class SalesOrderDetailMetadata
        {
          [Required]
          public string UnitPrice { get; set; }
    
          [Range(0, 100)]
          public decimal OrderQty { get; set; }
    
        }
      }
    
         
    }
    

    이 코드는 SalesOrderDetail이라는 partial 클래스를 만들고 그 안에 SalesOrderDetailMetadata라는 클래스를 만듭니다.

    이러한 클래스는 데이터 모델을 확장하여 다음 작업을 수행할 수 있도록 합니다.

    • UnitPrice data 필드에 메타데이터를 추가하여 null 값을 사용하지 못하도록 금지합니다. AdventureWorks 데이터베이스에서는 UnitPrice 데이터 필드에 null 값이 허용됩니다. 사용자가 null 값을 입력하려고 시도하면 Dynamic Data에서 오류 메시지를 나타냅니다.

    • OrderQty 데이터 필드에 메타데이터를 추가하여 허용되는 범위를 설정합니다. AdventureWorks 데이터베이스에는 OrderQty 데이터 필드에 범위 한도가 없습니다. 사용자가 허용되는 범위 밖의 값을 입력하려고 시도하면 Dynamic Data에서 오류 메시지를 나타냅니다.

    이러한 방식으로 partial 클래스를 사용하면 데이터 모델을 직접 변경하지 않고도 데이터 모델의 동작을 수정할 수 있는 유연한 방법을 제공할 수 있습니다.

  7. 파일을 저장한 후 닫습니다.

이 단원에서는 사용자가 제공한 메타데이터를 기준으로 Dynamic Data가 유효성 검사를 수행하는지 테스트하는 방법을 보여 줍니다. 다음을 테스트합니다.

  • Dynamic Data에서 데이터 필드에 이루어진 변경 내용에 대해 사용자 지정 메타데이터를 기준으로 올바른 유효성 검사를 수행하는가

  • Dynamic Data가 사용자 지정 메타데이터 정보로부터 유추한 정보를 기준으로 오류 메시지를 생성하는가

사용자 지정 Dynamic Data 유효성 검사를 테스트하려면

  1. 솔루션 탐색기에서 EnableDynamicData.aspx 페이지를 마우스 오른쪽 단추로 클릭한 다음 브라우저에서 보기를 선택합니다.

    선택한 열이 있는 SalesOrderDetails 테이블을 보여 주는 페이지가 브라우저에 표시됩니다.

  2. 아무 행에서 편집을 클릭하고 UnitPrice 열 값을 지웁니다.

  3. 같은 행에서 업데이트를 클릭합니다.

    UnitPrice 필드는 필수 필드임을 경고하는 오류 메시지가 표시됩니다. 이것은 Dynamic Data 유효성 검사가 GridView 컨트롤과 통합되었으며 사용자가 제공한 사용자 지정 메타데이터 정보를 사용함을 보여 줍니다.

  4. 같은 행에서 취소를 클릭합니다.

  5. 아무 행에서 편집을 클릭한 다음 OrderQty 열을 허용되는 범위의 값(예: 25)으로 변경합니다.

  6. 같은 행에서 업데이트를 클릭합니다.

    Dynamic Data가 데이터베이스를 업데이트합니다. 유효한 값을 입력했기 때문에 데이터가 유효성 검사를 통과합니다.

  7. 아무 행에서 편집을 클릭한 다음 OrderQty 열에 대해 허용되는 범위를 벗어난 값(예: 250)을 입력합니다.

  8. 같은 행에서 업데이트를 클릭합니다.

    이 데이터 필드 값은 0-100 사이여야 함을 나타내는 오류 메시지가 표시됩니다. 이것은 Dynamic Data 유효성 검사가 사용자 지정 메타데이터 정보를 사용하여 GridView 컨트롤과 통합되었음을 보여 줍니다.

  9. 같은 행에서 취소를 클릭합니다.

이 연습에서는 ASP.NET 데이터 바인딩된 컨트롤에 Dynamic Data 기능을 추가하는 기본 원리에 대해 살펴봤습니다. 다른 기능을 테스트해 볼 수도 있습니다. 다음과 같은 제안을 따르는 것이 좋습니다.

일반적인 정보를 알아보려면 다음을 수행할 수 있습니다.

표시: