연습: 웹 페이지의 기본 데이터 액세스

업데이트: 2007년 11월

이 연습에서는 특히 데이터 액세스에 사용하도록 설계된 컨트롤을 사용하여 간단한 데이터 바인딩 페이지를 만드는 방법을 설명합니다.

이 연습을 통해 다음과 같은 작업 방법을 배웁니다.

• Microsoft Visual Web Developer 웹 개발 도구의 Microsoft SQL Server 데이터베이스에 연결합니다.

• 끌어서 놓기 편집을 사용하여 코드 없이 페이지에서 사용할 수 있는 데이터 액세스 요소를 만듭니다.

• SqlDataSource 컨트롤을 사용하여 데이터 액세스와 바인딩을 관리합니다.

• GridView 컨트롤을 사용하여 데이터를 표시합니다.

• 정렬과 페이징을 허용하도록 GridView 컨트롤을 구성합니다.

• 선택한 레코드만 표시하는 필터링된 쿼리를 만듭니다.

사전 요구 사항

이 연습을 완료하려면 다음과 같은 요건을 갖추어야 합니다.

• SQL Server Northwind 데이터베이스에 대한 액세스 권한 SQL Server 샘플 Northwind 데이터베이스를 다운로드 및 설치하는 방법에 대한 자세한 내용은 Microsoft SQL Server 웹 사이트의 예제 데이터베이스 설치를 참조하십시오.

  참고:
  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에서 웹 사이트를 이미 만들었으면 해당 웹 사이트를 사용하여 다음 단원으로 이동합니다. 그렇지 않으면, 다음 단계를 따라 새 웹 사이트와 페이지를 만듭니다.

파일 시스템 웹 사이트를 만들려면

1. Visual Web Developer를 엽니다.

2. 파일 메뉴에서 새웹 사이트를 클릭합니다.

   새 웹 사이트 대화 상자가 나타납니다.

3. Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.

4. 맨 오른쪽 위치 상자에 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

   예를 들어, 폴더 이름 C:\WebSites를 입력합니다.

5. 언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.

6. 확인을 클릭합니다.

   Visual Web Developer에서 해당 폴더와 Default.aspx라는 새 페이지를 만듭니다.

데이터를 표시하기 위한 GridView 컨트롤 추가

ASP.NET 웹 페이지의 데이터를 표시하려면 다음과 같은 요건을 갖추어야 합니다.

• 데이터 소스에 대한 연결(예: 데이터베이스)

  다음 절차에서는 SQL Server Northwind 데이터베이스에 대한 연결을 만듭니다.

• 쿼리를 실행하고 쿼리 결과를 관리하는 페이지의 데이터 소스 컨트롤

• 실제로 데이터를 표시하는 페이지의 컨트롤

  다음 절차에서는 GridView 컨트롤의 데이터를 표시합니다. GridView 컨트롤은 SqlDataSource 컨트롤에서 데이터를 가져옵니다.

이러한 요소를 웹 사이트에 별도로 추가할 수도 있지만 GridView 컨트롤을 사용하여 데이터 표시를 시각화한 다음 마법사를 사용하여 연결과 데이터 소스 컨트롤을 만들어 시작하는 것이 가장 편리합니다. 다음 절차에서는 페이지에 데이터를 표시하기 위해 필요한 3가지 요소를 모두 만드는 방법을 설명합니다.

데이터를 표시하기 위한 GridView 컨트롤을 추가하고 구성하려면

1. Visual Web Developer에서 디자인 뷰로 전환합니다.

2. 도구 상자의 데이터 폴더에서 GridView 컨트롤을 페이지로 끌어 옵니다.

3. GridView 작업 바로 가기 메뉴가 나타나지 않으면 GridView 컨트롤을 마우스 오른쪽 단추로 클릭하고 스마트 태그 표시를 클릭합니다.

4. GridView 작업 메뉴의 데이터 소스 선택 목록에서 <새 데이터 소스>를 클릭합니다.

   데이터 소스 구성 대화 상자가 나타납니다.

   

5. 데이터베이스를 클릭합니다.

   이렇게 하면 SQL 문을 지원하는 데이터베이스에서 데이터를 가져오도록 지정합니다. 여기에는 SQL Server 및 기타 OLE DB 호환 데이터베이스가 포함됩니다.

   데이터 소스의 ID 지정 상자에 기본 데이터 소스 컨트롤 이름(SqlDataSource1)이 나타납니다. 이 이름을 그대로 둘 수 있습니다.

6. 확인을 클릭합니다.

   데이터 소스 구성 마법사가 나타나고 데이터 연결을 선택할 수 있는 페이지를 표시합니다.

   

7. 새 연결을 클릭합니다.

8. 데이터 소스 선택 대화 상자의 데이터 소스에서 Microsoft SQL Server를 클릭한 다음 계속을 클릭합니다.

   연결 추가 대화 상자가 나타납니다.

9. 서버 이름 상자에 사용할 SQL Server의 이름을 입력합니다.

   

10. 로그온 자격 증명에서 SQL Server 데이터베이스에 액세스하는 데 적합한 옵션(통합 보안 또는 특정 ID와 암호)을 선택하고 필요한 경우 사용자 이름과 암호를 입력합니다.

11. 데이터베이스 이름 선택 또는 입력을 클릭한 다음 Northwind를 입력합니다.

12. 연결 테스트를 클릭하고 제대로 작동하는지 확인한 다음 확인을 클릭합니다.

    데이터 소스 구성 - <DataSourceName> 마법사가 나타나고 연결 정보가 채워져 있습니다.

13. 다음을 클릭합니다.

    마법사는 구성 파일에 연결 문자열을 저장할 수 있는 페이지를 표시합니다. 구성 파일에 연결 문자열을 저장할 경우 두 가지 장점이 있습니다.

    1. 페이지에 연결 문자열을 저장하는 것보다 안전합니다.

    2. 여러 페이지에서 동일한 연결 문자열을 다시 사용할 수 있습니다.

14. 예, 이 연결을 다음으로 저장합니다. 확인란이 선택되어 있는지 확인하고 다음을 클릭합니다. 기본 연결 문자열 이름 NorthwindConnectionString을 그대로 둘 수 있습니다.

    마법사가 나타나고 데이터베이스에서 페치할 데이터를 지정할 수 있는 페이지를 표시합니다.

15. 테이블 또는 뷰의 열 지정의 이름 목록에서 Customers를 클릭합니다.

16. 열에서 CustomerID, CompanyName 및 City 확인란을 선택합니다.

    마법사가 나타나고 페이지 아래쪽의 상자에 만들고 있는 SQL 문을 표시합니다.

    

    참고:
    이 마법사를 사용하여 선택 조건(WHERE 절) 및 기타 SQL 쿼리 옵션을 지정할 수 있습니다. 이 연습 단계에서는 선택 옵션이나 정렬 옵션 없이 간단한 문을 만듭니다.

17. 다음을 클릭합니다.

18. 쿼리 테스트를 클릭하여 원하는 데이터를 페치하는지 확인합니다.

19. 마침을 클릭합니다.

    마법사가 닫히고 페이지로 돌아갑니다. 마법사를 실행하여 다음 두 가지 작업이 완료되었습니다.

    • 마법사에서 지정한 연결 및 쿼리 정보를 포함하는 SqlDataSource1이라는 SqlDataSource 컨트롤을 만들고 구성했습니다.

    • 마법사에서 GridView 컨트롤을 SqlDataSource에 바인딩했으므로 GridView 컨트롤은 SqlDataSource 컨트롤이 반환하는 데이터를 표시합니다.

    SqlDataSource 컨트롤의 속성을 표시하면 마법사에서 ConnectionString 및 SelectQuery 속성 값을 만들었음을 확인할 수 있습니다.

    참고:
    GridView 컨트롤의 모양을 쉽게 변경할 수 있습니다. 디자인 뷰에서 GridView 컨트롤을 마우스 오른쪽 단추로 클릭하고 스마트 태그 표시를 클릭합니다. GridView 작업 메뉴에서 자동 서식을 클릭한 다음 스키마를 적용합니다.

페이지 테스트

이제 페이지를 실행할 수 있습니다.

페이지를 테스트하려면

1. Ctrl+F5를 눌러 페이지를 실행합니다.

   페이지가 브라우저에 나타납니다. GridView 컨트롤에 Customers 테이블의 모든 데이터 행이 표시됩니다.

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

정렬 및 페이징 추가

코드를 작성하지 않고 GridView 컨트롤에 정렬과 페이징을 추가할 수 있습니다.

정렬과 페이징을 추가하려면

1. 디자인 뷰에서 GridView 컨트롤을 마우스 오른쪽 단추로 클릭하고 스마트 태그 표시를 클릭합니다.

2. GridView 작업 바로 가기 메뉴에서 정렬 사용 확인란을 선택합니다.

   GridView 컨트롤의 열 머리글이 링크로 변경됩니다.

3. GridView 작업 메뉴에서 페이징 사용 확인란을 선택합니다.

   페이지 번호 링크와 함께 바닥글이 GridView 컨트롤에 추가됩니다.

4. 선택적으로 속성을 사용하여 PageSize 속성 값을 10에서 이보다 작은 페이지 크기로 변경합니다.

5. Ctrl+F5를 눌러 페이지를 실행합니다.

   열 머리글을 클릭하면 해당 열의 내용을 기준으로 정렬할 수 있습니다. GridView 컨트롤의 페이지 크기보다 데이터 소스에 있는 레코드 수가 더 많으면 GridView 컨트롤 아래쪽의 페이지 탐색 링크를 사용하여 페이지 사이를 이동할 수 있습니다.

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

필터링 추가

선택한 데이터만 페이지에 표시하려는 경우가 많습니다. 이 연습 단계에서는 사용자가 특정 도시의 고객 레코드만 선택할 수 있도록 SqlDataSource 컨트롤의 쿼리를 수정합니다.

먼저 TextBox 컨트롤을 사용하여 사용자가 도시 이름을 입력할 수 있는 텍스트 상자를 만듭니다. 그런 다음 매개 변수가 있는 필터(WHERE 절)를 포함하도록 쿼리를 변경합니다. 이 프로세스의 일부로 SqlDataSource 컨트롤의 매개 변수 요소를 만듭니다. 이 매개 변수 요소는 SqlDataSource 컨트롤이 매개 변수가 있는 쿼리의 값을 가져오는 방법(예: 텍스트 상자에서)을 설정합니다.

이 연습 단계를 마치면 페이지는 디자인 뷰에서 다음과 같이 나타날 수 있습니다.

도시를 지정하기 위한 텍스트 상자를 추가하려면

1. 도구 상자의 표준 그룹에서 TextBox 컨트롤과 Button 컨트롤을 페이지로 끌어 옵니다.

   Button 컨트롤은 페이지를 서버에 게시하는 용도로만 사용되므로 해당 코드를 작성할 필요가 없습니다.

2. TextBox 컨트롤에 대한 속성에서 ID를 textCity로 설정합니다.

3. 필요한 경우 텍스트 상자 앞에 캡션으로 사용될 도시  등의 텍스트를 입력합니다.

4. Button 컨트롤에 대한 속성에서 Text를 전송으로 설정합니다.

이제 필터를 포함하도록 쿼리를 수정할 수 있습니다.

매개 변수가 있는 필터를 사용하여 쿼리를 수정하려면

1. SqlDataSource 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 클릭합니다.

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

   데이터 소스 구성 - <Datasourcename> 마법사가 나타납니다.

3. 다음을 클릭합니다.

   현재 SqlDataSource 컨트롤에 대해 구성된 SQL 명령이 표시됩니다.

4. WHERE를 클릭합니다.

   WHERE 절 추가 페이지가 나타납니다.

5. 열 목록에서 City를 클릭합니다.

6. 연산자 목록에서 =를 클릭합니다.

7. 소스 목록에서 Control을 클릭합니다.

8. 매개 변수 속성의 컨트롤 ID 목록에서 textCity를 클릭합니다.

   

   앞의 다섯 단계에서는 이전 프로시저에서 추가한 TextBox 컨트롤에서 City의 검색 값을 가져오도록 지정합니다.

9. 추가를 클릭합니다.

   방금 만든 WHERE 절이 페이지 아래쪽의 상자에 나타납니다.

10. 확인을 클릭하여 WHERE 절 추가 페이지를 닫습니다.

11. 데이터 소스 구성 - <DataSourceName> 마법사에서 다음을 클릭합니다.

12. 쿼리 테스트 페이지에서 쿼리 테스트를 클릭합니다.

    마법사가 나타나고 매개 변수 값 편집기 페이지를 표시합니다. WHERE 절에 사용할 값을 입력하라는 메시지가 표시됩니다.

13. 값 상자에 London을 입력한 다음 확인을 클릭합니다.

    London의 고객 레코드가 나타납니다.

14. 마침을 클릭하여 마법사를 닫습니다.

이제 필터링을 테스트할 수 있습니다.

필터링을 테스트하려면

1. Ctrl+F5를 눌러 페이지를 실행합니다.

2. 텍스트 상자에 London을 입력한 다음 전송을 클릭합니다.

   London 도시의 고객 목록이 GridView 컨트롤에 나타납니다.

3. Buenos Aires 및 Berlin 등 다른 도시도 테스트해 봅니다.

다음 단계

데이터 액세스는 많은 웹 응용 프로그램의 중요 부분이며 이 연습에서는 웹 페이지의 데이터로 수행할 수 있는 일부 작업만 살펴 보았습니다. 데이터 액세스의 추가 기능을 테스트해 볼 수도 있습니다. 예를 들어, 다음과 같은 작업을 할 수 있습니다.

• SQL Server 대신 Microsoft Access를 사용합니다. Access를 사용할 경우 SQL 캐시 종속성을 사용할 수 없습니다.

  자세한 내용은 연습: Access 데이터베이스 데이터를 표시할 웹 페이지 만들기를 참조하십시오.

• 레코드를 편집하고 삽입합니다.

  자세한 내용은 연습: DetailsView 웹 서버 컨트롤을 사용하여 웹 페이지에서 데이터 편집 및 삽입을 참조하십시오.

• 마스터-세부 관계의 레코드를 사용합니다.

  자세한 내용은 연습: Visual Studio에서 마스터/세부 사항 웹 페이지 만들기를 참조하십시오.

• 데이터 액세스를 수행하는 중간 계층(비즈니스) 구성 요소를 만들어 페이지의 데이터 소스로 사용합니다.

  자세한 내용은 연습: 사용자 지정 비즈니스 개체에 데이터 바인딩을 참조하십시오.

참고 항목

개념

데이터 소스 컨트롤 개요