연습: ListView 웹 서버 컨트롤을 사용하여 데이터 표시, 페이징 및 정렬

업데이트: 2007년 11월

이 연습에서는 템플릿을 사용하여 정의한 형식으로 데이터 소스의 데이터를 표시할 수 있게 해주는 ListView 컨트롤을 사용하게 됩니다. 템플릿을 사용하여 컨트롤에 있는 데이터 레이아웃 및 모양을 완전하게 제어할 수 있습니다. ListView 컨트롤은 자동으로 정렬 및 페이징 기능뿐만 아니라 편집, 삽입 및 삭제 작업을 지원합니다.

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

• ListView 컨트롤을 사용하여 데이터베이스의 데이터를 표시합니다.

• ListView 컨트롤에 페이징 기능을 추가합니다.

• ListView 컨트롤에 정렬 기능을 추가합니다.

사전 요구 사항

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

• Visual Studio 2008 또는 Visual Web Developer 2008 Express Edition

• SQL Server Express Edition. SQL Server가 설치되어 있으면 대신 이를 사용할 수 있지만 일부 절차를 약간 수정해야 합니다.

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

• AdventureWorks 데이터베이스에 액세스할 수 있는 SQL Server 계정의 사용자 이름과 암호입니다.

웹 사이트 만들기

예를 들어 연습: Visual Web Developer에서 기본 웹 페이지 만들기를 완료하여 웹 사이트를 이미 만들었으면 해당 웹 사이트를 사용할 수 있으므로 다음 단원으로 이동합니다. 그렇지 않으면, 다음 단계를 따라 새 웹 사이트와 페이지를 만듭니다.

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

1. Visual Studio 2008 또는 Visual Web Developer 2008 Express Edition을 엽니다.

2. 파일 메뉴에서 새로 만들기를 클릭한 다음 웹 사이트를 클릭합니다. Visual Web Developer Express Edition을 사용하는 경우 파일 메뉴에서 새웹 사이트를 클릭합니다.

   새 웹 사이트 대화 상자가 표시됩니다.

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

4. 첫 번째 위치 상자에서 파일 시스템을 선택하고 두 번째 상자에 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

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

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

6. 확인을 클릭합니다.

   Visual Studio에서 폴더 및 Default.aspx라는 새 페이지를 만듭니다.

ListView 컨트롤에서 데이터 표시 및 페이징

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

• 데이터베이스 등의 데이터 소스에 대한 연결 다음 절차에서는 SQL Server AdventureWorks 데이터베이스에 대한 연결을 만듭니다.

• 데이터 소스(데이터베이스)와 상호 작용하여 데이터를 읽고 쓰기 위한 페이지의 데이터 소스 컨트롤 이 연습에서는 SQL Server AdventureWorks 데이터베이스와 상호 작용하는 SqlDataSource 컨트롤을 사용합니다.

• 데이터를 표시하기 위한 페이지의 컨트롤 다음 절차에서는 SqlDataSource 컨트롤에서 데이터를 가져오는 ListView 컨트롤에 있는 데이터를 표시합니다.

ListView 컨트롤에서 데이터를 표시 및 페이징하려면

1. 웹 사이트에 App_Data 폴더가 없는 경우 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭하고 ASP.NET 폴더 추가를 클릭한 다음 App_Data를 클릭합니다.

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

   기존 항목 추가 대화 상자가 표시됩니다.

3. AdventureWorks 데이터베이스 파일(AdventureWorks_Data.mdf)의 위치를 입력합니다.

   기본적으로 .mdf 파일은 C:\Program Files\Microsoft SQL Server\MSSQL.1\MSSQL\Data\AdventureWorks_Data.mdf 경로에 설치됩니다.

   참고:
   이 절차에서는 프로젝트에서 데이터베이스 파일의 복사본을 만듭니다. 데이터베이스 파일은 큽니다. 데이터베이스 복사본을 만드는 것이 비효율적이라면 데이터베이스 파일을 직접 연결하는 등의 다른 방법을 사용하여 연결할 수 있습니다. 그러나 이 작업을 위한 절차는 이 연습에서 다루지 않습니다.

4. Default.aspx 파일로 전환하거나 이 파일을 엽니다.

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

6. 도구 상자의 데이터 탭에서 ListView 컨트롤을 페이지로 끌어 옵니다.

   

7. 일반 ListView 작업 메뉴의 데이터 소스선택 드롭다운 목록에서 <새 데이터 소스...>를 클릭합니다.

   데이터 소스 구성 마법사가 표시됩니다.

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

   이는 SQL Server나 그 밖의 OLE-DB 호환 데이터베이스와 같이 SQL 문을 지원하는 데이터베이스에서 데이터를 가져오려 한다는 의미입니다.

9. 데이터 소스의 ID 지정 상자에 기본 데이터 소스 컨트롤 이름인 SqlDataSource1이 표시됩니다. 이 이름을 그대로 둘 수 있습니다.

   

10. 확인을 클릭합니다.

    데이터 소스 구성 마법사가 표시됩니다.

11. 응용 프로그램이 데이터베이스에 연결하기 위해 사용해야 하는 데이터 연결의 목록에서 AdventureWorks_Data.mdf를 선택합니다.

12. 다음을 클릭합니다.

    구성 파일에 연결 문자열을 저장하도록 지정할 수 있는 페이지가 표시됩니다. 구성 파일에 연결 문자열을 저장할 경우 두 가지 장점이 있습니다.

    • 페이지에 저장하는 것보다 안전합니다.

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

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

    마법사는 데이터베이스에서 검색할 데이터를 지정할 수 있는 페이지를 표시합니다.

14. 사용자 지정 SQL 문 또는 저장 프로시저 지정 옵션을 선택합니다.

    

    참고:
    일반적으로 테이블 또는 뷰의 열 지정 옵션을 사용합니다. 그러나 AdventureWorks 데이터베이스에 스키마 이름이 있으므로 이 연습에서는 사용자 지정 SQL 문을 만듭니다.

15. 다음을 클릭합니다.

16. 사용자 지정 문 또는 저장 프로시저 정의 페이지에서 다음과 같은 SQL 쿼리를 입력하여 AdventureWorks 데이터베이스에서 연락처 데이터를 검색합니다.

    SELECT  ContactID, FirstName, LastName, EmailAddress
    FROM    Person.Contact
    

    또한 쿼리 작성기를 클릭하고 쿼리 작성기 창을 사용하여 쿼리를 만든 다음 쿼리 실행 단추를 사용하여 유효성을 검사할 수 있습니다.

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

17. 다음을 클릭합니다.

18. 쿼리 테스트를 클릭하여 원하는 데이터가 검색되는지 확인합니다.

19. 마침을 클릭합니다.

    마법사는 SqlDataSource 컨트롤을 만들어 페이지에 추가합니다. 앞에서 추가한 ListView 컨트롤이 SqlDataSource 컨트롤에 바인딩됩니다.

    SqlDataSource 컨트롤의 속성을 확인하면, 마법사에서 ConnectionString 및 SelectCommand 속성의 값을 생성했음을 알 수 있습니다.

20. ListView 컨트롤을 마우스 오른쪽 단추로 클릭하고 스마트 태그 표시를 클릭합니다.

21. 일반 ListView 작업 메뉴에서 ListView 구성을 클릭합니다.

    ListView 구성 대화 상자가 표시됩니다.

22. 페이징 사용을 선택합니다.

    참고:
    다른 스타일을 선택하여 데이터를 보다 쉽게 볼 수도 있습니다. 이렇게 하려면 스타일 선택에서 다양과 같은 스타일을 선택합니다.

    마법사가 쿼리의 열을 기준으로 ListView 컨트롤에 대한 템플릿을 만듭니다. 레이아웃 요소, 컨트롤 및 바인딩 식이 포함된 템플릿을 편집하여 레이아웃을 사용자 지정할 수 있습니다.

    

23. 확인을 클릭합니다.

    

처리하기 이전에 ListView 컨트롤을 테스트할 수 있습니다.

ListView 컨트롤을 테스트하려면

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

   ListView 컨트롤에는 ContactID, FirstName, LastName 및 EmailAddress 열이 표시됩니다.

2. 페이지의 아래쪽에서 첫 번째, 이전, 다음 및 마지막 단추를 클릭하여 데이터를 페이징합니다.

3. 작업을 마쳤으면 브라우저를 닫습니다.

ListView 컨트롤에 정렬 기능 추가

이제 ListView 컨트롤에 정렬 기능을 추가합니다. ListView 컨트롤에 단추를 추가하고 이 단추를 구성하여 이 기능을 제공할 수 있습니다.

ListView 컨트롤에 정렬 기능을 추가하려면

1. Default.aspx 파일에서 ListView 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 클릭합니다.

2. 일반 ListView 작업 메뉴의 현재 뷰 목록에서 LayoutTemplate 템플릿을 편집할 뷰를 선택합니다(예: ItemTemplate).

   참고:
   LayoutTemplate 템플릿을 편집하기 위한 특정 뷰는 없습니다. 런타임 뷰 및 EmptyDataTemplate을 제외하고 현재 뷰 목록에 있는 아무 뷰에서나 이 템플릿을 편집할 수 있습니다.

3. 도구 상자의 표준 탭에서 두 Button 컨트롤을 페이징 컨트롤이 있는 컨트롤의 아래쪽으로 끌어 옵니다.

4. 속성 창에서 다음과 같이 단추의 속성을 변경합니다.

   • 첫 번째 단추에 대해서는 Text 속성을 "Sort by First Name", CommandName 속성을 "Sort", CommandArgument를 "FirstName"으로 설정합니다.

   • 두 번째 단추에 대해서는 Text 속성을 "Sort by Last Name", CommandName 속성을 "Sort", CommandArgument를 "LastName"으로 설정합니다.

   단추의 CommandArgument 속성이 정렬 식으로 설정됩니다. 데이터베이스 데이터의 경우에는 일반적으로 열의 이름입니다.

5. 페이지를 저장합니다.

이제 페이지를 다시 테스트할 수 있습니다.

정렬을 테스트하려면

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

2. Sort by First Name 및 Sort by Last Name 단추를 클릭하여 데이터를 서로 다른 방식으로 정렬합니다.

3. 단추를 클릭할 때마다 오름차순과 내림차순 정렬 간에 전환됩니다.

다음 단계

이 연습에서는 컨트롤에 대해 제공된 레이아웃 중 하나를 사용하여 ListView 컨트롤을 통해 데이터 레코드를 표시, 페이징 및 정렬하는 기본 단계를 살펴보았습니다. ListView 컨트롤의 추가 기능을 사용해 보고 다른 시나리오를 경험해 볼 수도 있습니다. 예를 들어 레코드를 편집, 삭제 및 삽입할 수 있습니다. 자세한 내용은 연습: ListView 웹 서버 컨트롤을 사용하여 데이터 수정을 참조하십시오.

참고 항목

작업

방법: 데이터 소스 컨트롤을 사용하는 경우 연결 문자열 보안 유지

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

개념

ListView 웹 서버 컨트롤 개요