연습: WCF 데이터 서비스에 Silverlight 컨트롤 바인딩

업데이트: 2011년 5월

이 연습에서는 데이터 바인딩된 컨트롤이 포함된 Silverlight 응용 프로그램을 만듭니다. 이 컨트롤은 WCF Data Service를 통해 액세스되는 고객 레코드에 바인딩됩니다.

이 연습에서는 다음 작업을 수행합니다.

• AdventureWorksLT 샘플 데이터베이스의 데이터에서 생성되는 엔터티 데이터 모델 만들기

• 엔터티 데이터 모델의 데이터를 Silverlight 응용 프로그램에 노출하는 WCF Data Service 만들기

• 데이터 소스 구성 마법사를 실행하여 데이터 소스 창을 채우는 데이터 서비스에 연결

• 데이터 소스 창에서 Silverlight Designer로 항목을 끌어 데이터 바인딩된 컨트롤 집합 만들기

• 레코드를 앞뒤로 탐색하는 단추 만들기.

  참고

  컴퓨터에서 일부 Visual Studio 사용자 인터페이스 요소에 대해 다음 지침에서 설명한 것과는 다른 이름이나 위치를 표시할 수 있습니다. 설치한 Visual Studio 버전과 사용하는 설정에 따라 이러한 요소가 결정됩니다. 자세한 내용은 설정에 대한 작업을 참조하십시오.

사전 요구 사항

이 연습을 완료하려면 다음 구성 요소가 필요합니다.

• Visual Studio 2010.

• AdventureWorksLT 샘플 데이터베이스가 연결되어 있는 SQL Server 또는 SQL Server Express의 실행 중인 인스턴스에 액세스. AdventureWorksLT 데이터베이스는 CodePlex 웹 사이트에서 다운로드할 수 있습니다.

연습을 완료하려면 다음 개념에 대한 사전 지식이 유용하지만 반드시 필요하지는 않습니다.

• WCF 데이터 서비스. 자세한 내용은 ADO.NET Data Services Framework Overview를 참조하십시오.

• 엔터티 데이터 모델 및 ADO.NET Entity Framework. 자세한 내용은 Entity Data Model 및 Introducing the Entity Framework를 참조하십시오.

• Silverlight Designer 작업. 자세한 내용은 Silverlight Tools를 참조하십시오.

• Silverlight 데이터 바인딩. 자세한 내용은 데이터 바인딩을 참조하십시오.

서비스 프로젝트 만들기

WCF Data Service를 호스트하는 빈 웹 응용 프로그램 프로젝트를 만들어 이 연습을 시작합니다.

서비스 프로젝트를 만들려면

1. 파일 메뉴에서 새로 만들기를 가리킨 다음 프로젝트를 클릭합니다.

2. **Visual C#**이나 Visual Basic을 확장한 다음 웹을 선택합니다.

3. ASP.NET 빈 웹 응용 프로그램 프로젝트 템플릿을 선택합니다.

4. 이름 상자에 AdventureWorksWebApp을 입력한 다음 확인을 클릭합니다.

서비스의 엔터티 데이터 모델 만들기

WCF Data Service를 사용하여 응용 프로그램에 데이터를 노출하려면 해당 서비스에 대한 데이터 모델이 정의되어야 합니다. 이 연습에서는 엔터티 데이터 모델을 만듭니다.

엔터티 데이터 모델을 만들려면

1. 프로젝트 메뉴에서 새 항목 추가를 클릭합니다.

2. 데이터 범주에서 ADO.NET 엔터티 데이터 모델 프로젝트 항목을 선택합니다.

3. 이름을 AdventureWorksDataModel.edmx로 바꾸고 추가를 클릭합니다.

   엔터티 데이터 모델 마법사가 열립니다.

4. 모델 콘텐츠 선택 페이지에서 데이터베이스에서 생성을 클릭하고 다음을 클릭합니다.

5. 데이터 연결 선택 페이지에서 다음 옵션 중 하나를 선택합니다.

   • AdventureWorksLT 샘플 데이터베이스에 대한 데이터 연결이 드롭다운 목록에 표시되면 해당 연결을 선택합니다.

     또는

   • 새 연결을 클릭하고 AdventureWorksLT 데이터베이스에 대한 연결을 만듭니다.

6. 다른 이름으로 Web.Config의 entity 연결 설정 저장 옵션이 선택되어 있는지 확인하고 다음을 클릭합니다.

7. 데이터베이스 개체 선택 페이지에서 테이블을 확장한 다음 Customer 테이블을 선택합니다.

8. 마침을 클릭합니다.

서비스 만들기

WCF Data Service를 만들어 엔터티 데이터 모델의 데이터를 노출합니다.

이 서비스를 만들려면

1. 프로젝트 메뉴에서 새 항목 추가를 선택합니다.

2. 웹 범주에서 WCF 데이터 서비스 프로젝트 항목을 선택합니다.

3. 이름 상자에 AdventureWorksDataService.svc를 입력하고 추가를 클릭합니다.

서비스 구성

앞에서 만든 엔터티 데이터 모델에서 작동하도록 서비스를 구성해야 합니다.

서비스를 구성하려면

1. AdventureWorksDataService.svc 코드 파일에서 AdventureWorksDataService 클래스 선언을 다음 코드로 바꿉니다.

   Public Class AdventureWorksDataService
       Inherits DataService(Of AdventureWorksLTEntities)
   
       ' This method is called only once to initialize service-wide policies.
       Public Shared Sub InitializeService(ByVal config As DataServiceConfiguration)
           config.SetEntitySetAccessRule("*", EntitySetRights.All)
           config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2
       End Sub
   
   End Class
   

   public class AdventureWorksDataService : DataService<AdventureWorksLTEntities>
   {
       // This method is called only once to initialize service-wide policies.
       public static void InitializeService(DataServiceConfiguration config)
       {
           config.SetEntitySetAccessRule("*", EntitySetRights.All);
           config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;
       }
   }
   

2. 프로젝트를 빌드하고 빌드 오류가 없는지 확인합니다.

Silverlight 응용 프로그램 만들기

새 Silverlight 응용 프로그램을 만든 다음 데이터 소스를 추가하여 서비스에 액세스합니다.

Silverlight 응용 프로그램을 만들려면

1. 솔루션 탐색기에서 솔루션 노드를 마우스 오른쪽 단추로 클릭하고 추가를 클릭한 다음 새 프로젝트를 선택합니다.

   참고

   Visual Basic 프로젝트에서는 옵션 대화 상자, 프로젝트 및 솔루션, 일반에서 솔루션 항상 표시 확인란을 선택한 경우에만 솔루션 탐색기에 솔루션 노드가 표시됩니다.

2. 새 프로젝트 대화 상자에서 **Visual C#**이나 Visual Basic을 확장한 다음 Silverlight를 선택합니다.

3. Silverlight 응용 프로그램 프로젝트 템플릿을 선택합니다.

4. 이름 상자에 AdventureWorksSilverlightApp을 입력한 다음 확인을 클릭합니다.

5. 새 Silverlight 응용 프로그램 대화 상자에서 확인을 클릭합니다.

Silverlight 응용 프로그램에 데이터 소스 추가

서비스에서 반환하는 데이터를 기반으로 하는 데이터 소스를 만듭니다.

데이터 소스를 만들려면

1. 데이터 메뉴에서 데이터 소스 표시를 클릭합니다.

2. 데이터 소스 창에서 새 데이터 소스 추가를 클릭합니다.

   데이터 소스 구성 마법사가 열립니다.

3. 마법사의 데이터 소스 형식 선택 페이지에서 서비스를 선택하고 다음을 클릭합니다.

4. 서비스 참조 추가 대화 상자에서 검색을 클릭합니다.

   Visual Studio는 현재 솔루션에서 사용 가능한 서비스를 검색하고 서비스 상자의 사용 가능한 서비스 목록에 AdventureWorksDataService.svc를 추가합니다.

5. 네임스페이스 상자에 AdventureWorksService를 입력합니다.

6. 서비스 상자에서 AdventureWorksDataService.svc를 클릭한 다음 확인을 클릭합니다.

7. 서비스 참조 추가 페이지에서 마침을 클릭합니다.

   서비스에서 반환한 데이터를 나타내는 노드가 데이터 소스 창에 추가됩니다.

창의 사용자 인터페이스 정의

Silverlight Designer에서 XAML을 수정하여 창에 단추를 추가합니다.

창 레이아웃을 만들려면

1. 솔루션 탐색기에서 MainPage.xaml을 두 번 클릭합니다.

   Silverlight Designer에서 창이 열립니다.

2. 디자이너의 XAML 뷰에서 <Grid> 태그 사이에 다음 코드를 추가합니다.

   <Grid.RowDefinitions>
       <RowDefinition Height="75" />
       <RowDefinition Height="525" />
   </Grid.RowDefinitions>
   <Button HorizontalAlignment="Left" Margin="22,20,0,24" Name="backButton" Width="75" Content="&lt;"></Button>
   <Button HorizontalAlignment="Left" Margin="116,20,0,24" Name="nextButton" Width="75" Content="&gt;"></Button>
   

3. 프로젝트를 빌드합니다.

데이터 바인딩된 컨트롤 만들기

데이터 소스 창에서 디자이너로 Customers 노드를 끌어 고객 레코드를 표시하는 컨트롤을 만듭니다.

데이터 바인딩된 컨트롤을 만들려면

1. 데이터 소스 창에서 Customers 노드의 드롭다운 메뉴를 클릭하고 자세히를 선택합니다.

2. Customers 노드를 확장합니다.

3. 이 예제의 경우 일부 필드가 표시되지 않으므로 다음 노드 옆의 드롭다운 메뉴를 클릭하고 없음을 선택합니다.

   • NameStyle

   • PasswordHash

   • PasswordSalt

   • rowguid

   이렇게 하면 노드를 디자이너 위에 끌어 놓을 때 이러한 노드에 대한 컨트롤을 Visual Studio에서 만들지 않습니다. 이 연습에서는 최종 사용자가 이 데이터를 보려 하지 않는다고 가정합니다.

4. 데이터 소스 창에서 디자이너의 단추 아래로 Customers 노드를 끕니다.

   Visual Studio에서는 고객 데이터에 바인딩되는 컨트롤 집합을 만드는 XAML 및 코드를 생성합니다.

서비스에서 데이터 로드

서비스를 사용하여 데이터를 로드한 다음 반환된 데이터를 컨트롤에 바인딩된 데이터 소스에 할당합니다.

서비스에서 데이터를 로드하려면

1. 디자이너에서 특정 단추 옆의 빈 영역을 클릭합니다.

2. 속성 창에서 UserControl이 선택되어 있는지 확인하고 이벤트 탭을 클릭합니다.

3. Loaded 이벤트를 찾아 두 번 클릭합니다.

4. 열리는 코드 파일(MainPage.xaml)에서 using(C#) 또는 Imports(Visual Basic) 문을 추가합니다.

   Imports System.Windows.Data
   Imports AdventureWorksSilverlightApp.AdventureWorksService
   

   using System.Windows.Data;
   using AdventureWorksSilverlightApp.AdventureWorksService;
   

5. 이 이벤트 처리기를 다음 코드로 바꿉니다. 이 코드의 localhost 주소는 개발 컴퓨터의 로컬 호스트 주소로 바꿔야 합니다.

   Private advWorksService As AdventureWorksLTEntities
   Private customersViewSource As CollectionViewSource
   
   Private Sub UserControl_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
       advWorksService = New AdventureWorksLTEntities(New Uri("https://localhost:6188/AdventureWorksDataService.svc"))
       customersViewSource = Me.Resources("CustomersViewSource")
       advWorksService.Customers.BeginExecute(Sub(result As IAsyncResult)
                                                  customersViewSource.Source = advWorksService.Customers.EndExecute(result)
                                              End Sub, Nothing)
   End Sub
   

   private AdventureWorksLTEntities advWorksService;
   private System.Windows.Data.CollectionViewSource customersViewSource;
   
   private void UserControl_Loaded(object sender, RoutedEventArgs e)
   {
       advWorksService = new AdventureWorksLTEntities(new Uri("https://localhost:54961/AdventureWorksDataService.svc"));
   
       customersViewSource = this.Resources["customersViewSource"]
       as System.Windows.Data.CollectionViewSource;
       advWorksService.Customers.BeginExecute(result => customersViewSource.Source = advWorksService.Customers.EndExecute(result), null);
   }
   

응용 프로그램 테스트

응용 프로그램을 빌드하고 실행하여 고객 레코드를 볼 수 있는지 확인합니다.

응용 프로그램을 테스트하려면

1. 빌드 메뉴에서 솔루션 빌드를 클릭합니다. 솔루션이 오류 없이 빌드되는지 확인합니다.

2. F5 키를 누릅니다.

3. Customers 테이블의 첫 번째 레코드가 나타나는지 확인합니다.

   중요

   보안 예외가 발생하는 경우 다음 조건이 충족되는지 확인합니다.

   • 이전 절차의 5단계에서 사용된 포트 번호가 ASP.NET Development Server의 포트 번호와 일치합니다.

   • AdventureWorksWebApp가 시작 프로젝트로 설정되어 있습니다.

   • AdventureWorksSilverlightAppTestPage.aspx가 시작 페이지로 설정되어 있습니다.

4. 응용 프로그램을 닫습니다.

레코드 탐색

< 및 > 단추를 사용하여 판매 레코드를 스크롤할 수 있게 하는 코드를 추가합니다.

사용자가 판매 레코드를 탐색할 수 있게 하려면

1. 디자이너에서 MainPage.xaml을 열고 < 단추를 두 번 클릭합니다.

2. 생성된 backButton_Click 이벤트 처리기를 다음 코드로 바꿉니다.

   Private Sub backButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles backButton.Click
       customersViewSource.View.MoveCurrentToPrevious()
       If customersViewSource.View.IsCurrentBeforeFirst Then
           customersViewSource.View.MoveCurrentToFirst()
       End If
   End Sub
   

   private void backButton_Click(object sender, RoutedEventArgs e)
   {
       customersViewSource.View.MoveCurrentToPrevious();
       if (customersViewSource.View.IsCurrentBeforeFirst)
           customersViewSource.View.MoveCurrentToFirst();
   }
   

3. 디자이너로 돌아가서 > 단추를 두 번 클릭합니다.

   Visual Studio에서 코드 숨김 파일을 열고 새 nextButton_Click 이벤트 처리기를 만듭니다.

4. 생성된 nextButton_Click 이벤트 처리기를 다음 코드로 바꿉니다.

   Private Sub nextButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles nextButton.Click
       customersViewSource.View.MoveCurrentToNext()
       If customersViewSource.View.IsCurrentAfterLast Then
           customersViewSource.View.MoveCurrentToLast()
       End If
   End Sub
   

   private void nextButton_Click(object sender, RoutedEventArgs e)
   {
       customersViewSource.View.MoveCurrentToNext();
       if (customersViewSource.View.IsCurrentAfterLast)
           customersViewSource.View.MoveCurrentToLast();
   }
   

응용 프로그램 테스트

응용 프로그램을 빌드하고 실행하여 고객 레코드를 보고 탐색할 수 있는지 확인합니다.

응용 프로그램을 테스트하려면

1. 빌드 메뉴에서 솔루션 빌드를 클릭합니다. 솔루션이 오류 없이 빌드되는지 확인합니다.

2. F5 키를 누릅니다.

3. Customers 테이블의 첫 번째 레코드가 나타나는지 확인합니다.

4. < 및 > 단추를 클릭하여 고객 레코드를 앞뒤로 탐색합니다.

5. 응용 프로그램을 닫습니다.

   참고

   여기에서 오류가 나타나면 ASP.NET 개발 서버의 올바른 포트가 코드에 포함되어 있는지 확인합니다.

다음 단계

이 연습을 완료하면 다음과 같은 관련 작업을 수행할 수 있습니다.

• 변경 내용을 데이터베이스에 다시 저장하는 방법을 학습합니다. 자세한 내용은 데이터 바인딩을 참조하십시오.

• Silverlight 응용 프로그램에서 WCF Data Services를 사용하여 더 많은 기능을 통합하는 방법을 학습합니다. 자세한 내용은 ADO.NET Data Services (Silverlight)를 참조하십시오.

참고 항목

기타 리소스

Data Access and Data Structures

변경 기록

날짜	변경 내용	이유
2011년 5월	문제 해결을 위한 제안 사항을 추가했습니다.	고객 의견