연습: Visual Studio 데이터 구성 요소로 웹 페이지 데이터 바인딩
업데이트: 2007년 11월
웹 응용 프로그램이 여러 계층을 사용하여 작성되고, 중간 계층에 데이터 액세스를 비즈니스 논리와 결합하는 하나 이상의 구성 요소가 포함되는 경우가 많습니다. 이 연습에서는 웹 사이트에서 데이터 액세스 구성 요소를 작성하고 웹 서버 컨트롤(GridView 컨트롤)을 이 구성 요소에서 관리하는 데이터에 바인딩하는 방법을 보여 줍니다. 데이터 구성 요소는 Microsoft SQL Server 데이터베이스와 상호 작용하며 데이터를 읽고 쓸 수 있습니다.
이 연습에서 수행할 작업은 다음과 같습니다.
데이터를 읽고 쓸 수 있는 구성 요소 만들기
데이터 구성 요소를 웹 페이지에서 데이터 소스로 참조
컨트롤을 데이터 구성 요소에서 반환하는 데이터에 바인딩
데이터 구성 요소를 사용하여 데이터 읽기 및 쓰기
사전 요구 사항
이 연습을 완료하려면 다음과 같은 요건을 갖추어야 합니다.
SQL Server Northwind 데이터베이스에 대한 액세스 권한 SQL Server 샘플 Northwind 데이터베이스를 다운로드 및 설치하는 방법에 대한 자세한 내용은 Microsoft SQL Server 웹 사이트의 예제 데이터베이스 설치를 참조하십시오.
.gif "참고")
참고:SQL Server가 실행되는 컴퓨터에 로그온하는 방법에 대한 자세한 내용은 서버 관리자에게 문의하십시오.
MDAC(Microsoft Data Access Components) 버전 2.7 이상
Microsoft Windows XP나 Windows Server 2003을 사용하고 있는 경우 MDAC 2.7이 이미 설치되어 있습니다. 그러나 Microsoft Windows 2000을 사용하는 경우, 컴퓨터에 이미 설치된 MDAC 버전을 업그레이드해야 합니다. 최신 MDAC 버전을 다운로드하려면 Data Access and Storage Developer Center를 참조하십시오.
웹 사이트 만들기
연습: Visual Web Developer에서 기본 웹 페이지 만들기를 완료하여 Visual Web Developer에서 웹 사이트를 이미 만들었으면 해당 웹 사이트를 사용하여 다음 단원으로 이동합니다. 그렇지 않으면, 다음 단계를 따라 새 웹 사이트와 페이지를 만듭니다.
파일 시스템 웹 사이트를 만들려면
Visual Web Developer를 엽니다.
파일 메뉴에서 새웹 사이트를 클릭합니다.
새 웹 사이트 대화 상자가 나타납니다.
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.
맨 왼쪽 위치 목록에서 파일 시스템을 클릭한 다음 맨 오른쪽의 위치 텍스트 상자에 웹 사이트의 페이지를 보관하려는 폴더의 이름을 입력합니다.
예를 들어, C:\WebSites\ComponentSample이라는 폴더 이름을 입력합니다.
언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.
확인을 클릭합니다.
Visual Web Developer에서 해당 폴더와 Default.aspx라는 새 페이지를 만듭니다.
데이터 액세스 구성 요소 만들기
이 연습에서는 Northwind 데이터베이스에서 데이터를 읽고 쓰는 구성 요소를 마법사를 사용하여 생성합니다. 이 구성 요소에는 원하는 데이터를 설명하는 스키마 파일(.xsd)과 데이터를 읽고 쓰는 데 사용되는 메서드가 포함됩니다. 코드는 작성할 필요가 없습니다. 런타임에 .xsd 파일이 마법사에서 지정하는 작업을 수행하는 어셈블리로 컴파일됩니다.
데이터 액세스 구성 요소를 만들려면
웹 사이트에 App_Code 폴더가 아직 없는 경우 다음을 수행합니다.
솔루션 탐색기에서 웹 사이트 이름을 마우스 오른쪽 단추로 클릭합니다.
폴더 추가를 가리킨 다음 App_Code 폴더를 클릭합니다.
App_Code 폴더를 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.
새 항목 추가 대화 상자가 나타납니다.
Visual Studio에 설치되어 있는 템플릿에서 데이터 집합을 클릭합니다.
이름 상자에 EmployeesObject를 입력한 다음 추가를 클릭합니다.
TableAdapter 구성 마법사가 나타납니다.
새 연결을 클릭합니다.
데이터 소스 선택 대화 상자가 나타나면 Microsoft SQL Server를 클릭한 다음 계속을 클릭합니다.
서버 이름 상자에 SQL Server를 실행하는 컴퓨터의 이름을 입력합니다.
로그온 자격 증명의 경우, SQL Server 데이터베이스에 액세스하는 데 적합한 옵션(통합 보안 또는 특정 ID와 암호)을 선택하고 필요한 경우 사용자 이름과 암호를 입력합니다.
- 명시적 자격 증명을 지정하는 경우 암호 저장 확인란을 선택합니다.
데이터베이스 이름 선택 또는 입력을 클릭한 다음 Northwind를 입력합니다.
연결 테스트를 클릭하고, 연결이 제대로 작동하는지 확인한 다음 확인을 클릭합니다.
TableAdapter 구성 마법사가 연결 정보가 채워진 상태로 나타납니다.
다음을 클릭합니다.
구성 파일에 연결 문자열을 저장할 수 있는 페이지가 나타납니다.
예, 이 연결을 다음으로 저장합니다. 확인란을 선택하고 다음을 클릭합니다.
기본 연결 문자열 이름을 그대로 둘 수 있습니다.
SQL 문이나 저장 프로시저를 사용할 수 있는 페이지가 나타납니다.
SQL 문 사용을 클릭하고 다음을 클릭합니다.
저장 프로시저를 사용하면 성능 및 보안을 비롯하여 몇 가지 장점이 있습니다. 그러나 이 연습에서는 간단하게 SQL 문을 사용합니다.
SQL 문을 정의할 수 있는 페이지가 나타납니다.
테이블에 로드할 데이터에서 다음 SQL 문을 입력합니다.
SELECT EmployeeID, LastName, FirstName, HireDate FROM Employees참고:원하는 경우 쿼리 작성기를 클릭하여 작성 도구를 사용할 수 있습니다.
다음을 클릭합니다.
구성 요소가 노출할 메서드를 정의할 수 있는 페이지가 나타납니다.
DataTable 채우기 확인란을 클릭하여 선택을 취소한 다음 DataTable 반환 및 업데이트를 데이터베이스로 직접 보내는 메서드 만들기 확인란을 선택합니다.
이 연습에서는 데이터 테이블을 채우는 메서드가 필요하지 않습니다. 그러나 데이터를 반환하는 메서드가 필요하며, 데이터베이스를 업데이트하는 메서드도 구성 요소에 포함시킬 수 있습니다.
메서드 이름 상자에 GetEmployees를 입력합니다.
이는 나중에 데이터를 가져올 때 사용할 메서드의 이름을 지정한 것입니다.
마침을 클릭합니다.
마법사는 구성 요소를 구성하여 구성 요소 디자이너에 표시합니다. 여기에는 구성 요소가 관리하는 데이터와 구성 요소가 노출하는 메서드가 표시됩니다.
데이터 구성 요소를 저장한 다음 구성 요소 디자이너를 닫습니다.
빌드 메뉴에서 웹 사이트 빌드를 클릭하여 구성 요소가 제대로 컴파일되는지 확인합니다.
페이지에서 데이터 구성 요소 사용
이제 데이터 구성 요소를 ASP.NET 웹 페이지에서 데이터 소스로 사용할 수 있습니다. 데이터 구성 요소에 액세스하려면 데이터 구성 요소에 의해 노출되는 데이터 액세스 메서드를 호출하도록 ObjectDataSource 컨트롤을 구성하여 사용합니다. 그런 다음 페이지에 컨트롤을 추가하고 이를 데이터 소스 컨트롤에 바인딩할 수 있습니다.
페이지에 데이터 소스 컨트롤을 추가하려면
Default.aspx 페이지를 열고 디자인 뷰로 전환합니다.
도구 상자의 데이터 그룹에서 ObjectDataSource 컨트롤을 페이지로 끌어 옵니다.
- ObjectDataSource 작업 바로 가기 메뉴가 나타나지 않으면 ObjectDataSource 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 클릭합니다.
ObjectDataSource 작업 바로 가기 메뉴에서 데이터 소스 구성을 클릭합니다.
데이터 소스 구성 마법사가 나타납니다.
비즈니스 개체 선택 목록에서 EmployeesObjectTableAdapters.EmployeesTableAdapter를 클릭합니다.
이 이름은 앞 단원에서 만든 구성 요소의 형식 이름(네임스페이스 및 클래스 이름)입니다.
다음을 클릭합니다.
선택 탭의 메서드 선택 목록에서 GetEmployees(), returns EmployeesDataTable을 클릭합니다.
GetEmployees 메서드는 앞 단원에서 만든 구성 요소에 정의된 메서드입니다. 이 메서드는 데이터 컨트롤이 바인딩될 수 있는 DataTable 개체에서 사용할 수 있는 SQL 문의 결과를 반환합니다.
마침을 클릭합니다.
이제 페이지에 데이터 컨트롤을 추가하고 이를 ObjectDataSource 컨트롤에 바인딩할 수 있습니다. 이 연습에서는 GridView 컨트롤을 사용합니다.
GridView 컨트롤을 페이지에 추가하고 이를 데이터에 바인딩하려면
도구 상자의 데이터 그룹에서 GridView 컨트롤을 페이지로 끌어 옵니다.
- GridView 작업 바로 가기 메뉴가 나타나지 않으면 GridView 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 클릭합니다.
GridView 작업 바로 가기 메뉴의 데이터 소스 선택 목록에서, 앞 단원에서 구성한 컨트롤의 ID인 ObjectDataSource1을 클릭합니다.
GridView 컨트롤이 SQL 문에서 반환한 각 데이터 열의 열과 함께 다시 표시됩니다.
속성에서 DataKeyNames가 EmployeeID로 설정되었는지 확인합니다.
페이지 테스트
이제 필요한 모든 컨트롤이 페이지에 있으므로 페이지를 테스트할 수 있습니다.
페이지를 테스트하려면
Ctrl+F5를 눌러 페이지를 실행합니다.
Employees 테이블의 EmployeeID, LastName, FirstName 및 HireDate 열이 표에 표시되는지 확인합니다.
브라우저를 닫습니다.
GridView 컨트롤은 ObjectDataSource 컨트롤의 데이터를 요청합니다. 그러면 ObjectDataSource 컨트롤은 데이터 구성 요소의 인스턴스를 만들고 이 데이터 구성 요소의 GetEmployees 메서드를 호출합니다. GetEmployees 메서드는 ObjectDataSource 컨트롤이 GridView 컨트롤에 반환하는 DataTable 개체를 반환합니다.
페이지에 업데이트 추가
만든 데이터 구성 요소에는 데이터베이스를 업데이트(레코드 업데이트, 삽입 및 삭제)하는 SQL 문이 포함되어 있습니다. 데이터 구성 요소의 업데이트 기능은 마법사에서 구성 요소를 만들 때 자동으로 생성된 메서드에 의해 노출됩니다. GridView 컨트롤과 ObjectDataSource 컨트롤이 상호 작용하여 업데이트 메서드를 자동으로 시작할 수 있습니다.
| 참고: |
|---|
GridView 컨트롤은 삽입을 지원하지 않습니다. |
업데이트 및 삭제를 사용하려면
GridView 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 클릭합니다.
편집 사용 확인란을 선택합니다.
삭제 사용 확인란을 선택합니다.
참고:삭제를 사용하면 데이터베이스에서 레코드를 영구적으로 제거할 수 있습니다. 버려도 되는 테스트 데이터를 사용하지 않는 한 삭제를 사용하지 마십시오.
업데이트 테스트
이제 구성 요소를 사용하여 데이터베이스를 업데이트할 수 있는지 확인하기 위해 테스트할 수 있습니다.
업데이트를 테스트하려면
Ctrl+F5를 눌러 페이지를 실행합니다.
이번에는 GridView 컨트롤에서 각 행에 편집 및 삭제 링크를 표시합니다.
행 옆에 있는 편집 링크를 클릭합니다.
행을 변경한 다음 업데이트를 클릭합니다.
표가 업데이트된 날짜와 함께 다시 표시됩니다.
행에 있는 삭제 링크를 클릭합니다.
데이터베이스에서 해당 행이 영구적으로 삭제됩니다. 표가 해당 행 없이 다시 표시됩니다.
브라우저를 닫습니다.
다음 단계
이 연습에서는 데이터 구성 요소를 사용하는 방법을 보여 줍니다. 다른 탐색 기능을 테스트해 볼 수도 있습니다. 예를 들어, 다음과 같은 작업을 할 수 있습니다.
마법사를 사용하는 대신 사용자 지정 데이터 구성 요소를 만듭니다.
예제를 보려면 연습: 사용자 지정 비즈니스 개체에 데이터 바인딩을 참조하십시오.
특정 사용자만 데이터를 변경할 수 있도록 제한합니다. 일반적인 방법은 웹 사이트에 멤버 자격과 역할을 추가한 다음 데이터를 변경할 수 있도록 하기 전에 비즈니스 구성 요소에서 확인할 수 있는 규칙을 설정하는 것입니다.
자세한 내용은 연습: 멤버 자격과 사용자 로그인을 사용하는 웹 사이트 만들기 및 연습: 역할을 사용하여 웹 사이트 사용자 관리를 참조하십시오.
참고 항목
작업
연습: Visual Web Developer에서 웹 사이트에 공유 코드 사용
연습: Visual Web Developer에서 기본 웹 페이지 만들기