연습: Visual Studio에서 마스터/세부 사항 웹 페이지 만들기

  • 아티클

업데이트: 2007년 11월

많은 웹 페이지에서는 여러 가지 방법으로 데이터를 표시하며 주로 연관된 테이블에 있는 데이터를 표시합니다. 이 연습에서는 마스터/세부 사항 관계에 있는 컨트롤 및 테이블을 포함하여 여러 컨트롤과 여러 테이블에 있는 데이터를 다루는 다양한 방법을 보여 줍니다. 이 연습에서 수행할 작업은 다음과 같습니다.

  • 데이터베이스 데이터로 드롭다운 목록 채우기

  • WHERE 절을 포함하는 SQL 문(매개 변수가 있는 쿼리)으로 필터 만들기

  • 드롭다운 목록에서 사용자가 선택한 사항에 따라 필터링된 데이터 표시

  • DetailsView 컨트롤을 사용하여 선택된 레코드에 대한 세부 정보 표시

  • 한 페이지에서 레코드를 선택한 후 또 다른 페이지에 관련 레코드 표시

사전 요구 사항

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

  • 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를 업그레이드해야 합니다. 자세한 내용은 MSDN library에서 "Microsoft Data Access Components (MDAC) Installation" 문서를 참조하십시오.

웹 사이트 만들기

연습: Visual Web Developer에서 기본 웹 페이지 만들기 또는 연습: 웹 페이지의 기본 데이터 액세스의 단계를 수행하여 Microsoft Visual Web Developer에서 웹 사이트를 이미 만들었으면 해당 웹 사이트를 사용하여 다음 단원인 "SQL Server에 연결"로 건너뛰어도 됩니다. 그렇지 않으면, 다음 단계를 따라 새 웹 사이트와 페이지를 만듭니다.

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

  1. Visual Web Developer를 엽니다.

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

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

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

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

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

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

  6. 확인을 클릭합니다.

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

SQL Server에 연결

데이터로 작업하려면 데이터베이스에 대해 연결을 설정해야 합니다. 이 연습에서는 웹 페이지 또는 컨트롤 작업과는 별도로 연결을 만듭니다.

SQL Server에 대한 연결을 만들려면

  1. Ctrl+Alt+S를 눌러 데이터베이스 탐색기를 표시합니다. 데이터베이스 탐색기에서 데이터 연결을 마우스 오른쪽 단추로 클릭하고 연결 추가를 선택합니다.

    데이터 소스 변경 대화 상자가 표시됩니다.

  2. 데이터 소스 변경 대화 상자에서 Microsoft SQL Server를 선택하고 확인을 클릭합니다.

  3. 연결 추가 대화 상자에서 다음을 수행합니다.

    • SQL Server 컴퓨터의 이름을 입력하거나 선택합니다. 컴퓨터의 서버로 (local)을 입력합니다.

    • SQL Server 인증 사용을 선택합니다.

    • 사용자 이름 및 암호를 입력합니다.

    • 암호 저장을 선택합니다.

    • 데이터베이스로 Northwind를 선택합니다.

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

    서버 탐색기에 해당 연결이 추가됩니다.

드롭다운 목록을 마스터로 사용

이 연습 부분에서는 페이지에 드롭다운 목록을 추가한 후 해당 목록을 Northwind 테이블의 범주 목록으로 채웁니다. 사용자가 범주를 하나 선택하면 페이지에 해당 범주의 제품이 표시됩니다.

드롭다운 목록을 만들고 채우려면

  1. Default.aspx 페이지로 전환하거나 이 페이지를 엽니다. 이미 만들어진 웹 사이트로 작업할 경우 이 연습에서 사용할 수 있는 페이지를 추가하거나 엽니다.

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

  3. 페이지에 범주별 제품 선택을 입력하고 도구 상자 위의 블록 서식 드롭다운 목록을 사용하여 텍스트의 서식을 제목으로 지정합니다.

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

  5. DropDownList 작업에서 AutoPostBack 사용 확인란을 선택합니다.

    이렇게 하면 사용자가 목록에서 항목을 선택할 때마다 사용자가 단추를 클릭할 때까지 기다리지 않고 페이지가 서버에 다시 게시되도록 컨트롤이 구성됩니다.

  6. DropDownList 작업에서 데이터 소스 선택을 선택합니다.

    데이터 소스 선택 마법사가 시작됩니다.

  7. 데이터 소스 선택 목록에서 <새 데이터 소스>를 클릭합니다.

    그러면 데이터 소스 구성 마법사 대화 상자가 나타납니다.

  8. 데이터베이스를 선택합니다.

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

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

  9. 확인을 클릭합니다.

    데이터 연결을 선택할 수 있는 데이터 소스 구성 - SqlDataSource1 페이지가 표시됩니다.

  10. 드롭다운 목록에서 이 연습 앞부분에서 만든 Northwind 연결을 선택합니다.

  11. 다음을 클릭합니다.

    구성 파일에 연결 문자열을 저장할 수 있는 페이지가 표시됩니다.

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

    데이터베이스에서 가져올 데이터를 지정할 수 있는 페이지가 표시됩니다.

  13. 테이블 또는 뷰의 열 지정의 이름 목록에서 Categories를 선택합니다.

  14. 열 상자에서 CategoryID 및 CategoryName을 선택합니다.

  15. 다음을 클릭합니다.

  16. 쿼리 테스트를 클릭하여 원하는 데이터를 가져오는지 확인합니다.

  17. 마침을 클릭합니다.

    사용자가 구성한 데이터 소스 컨트롤의 이름을 나타내는 데이터 소스 구성 마법사가 표시됩니다.

  18. DropDownList에 표시할 데이터 필드 선택 목록에서 CategoryName을 클릭합니다.

    참고:

    목록에 항목이 표시되지 않으면 스키마 새로 고침 링크를 클릭합니다.

    이렇게 하면 CategoryName 필드 값이 드롭다운 목록에 있는 항목의 텍스트로 표시됩니다.

  19. DropDownList의 값에 대한 데이터 필드 선택 목록에서 CategoryID를 선택합니다.

    이렇게 하면 항목이 선택될 때 CategoryID 필드가 항목의 값으로 반환되도록 지정됩니다.

  20. 확인을 클릭합니다.

계속하기 전에 드롭다운 목록을 테스트합니다.

드롭다운 목록을 테스트하려면

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

  2. 페이지가 표시되면 드롭다운 목록을 검토합니다.

  3. 범주를 하나 선택하여 다시 게시가 수행되는지 확인합니다.

    이제 드롭다운 목록에 선택된 범주에 대한 제품을 표시할 수 있습니다.

표를 사용하여 세부 정보 표시

이제 표를 포함하도록 페이지를 확장할 수 있습니다. 사용자가 범주 드롭다운 목록에서 항목을 선택하면 표에 해당 범주에 대한 제품이 표시됩니다.

표를 사용하여 세부 정보를 표시하려면

  1. Default.aspx 페이지 또는 작업 중이던 페이지로 전환하거나 해당 페이지를 열고 디자인 뷰로 전환합니다.

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

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

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

  4. 데이터베이스를 선택합니다.

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

  5. 확인을 클릭합니다.

    연결을 선택할 수 있는 페이지가 표시됩니다.

  6. 연결 드롭다운 목록에서 이 연습 앞부분에서 만들어 저장했던 연결(NorthwindConnectionString)을 선택합니다.

  7. 다음을 클릭합니다.

    SQL 문을 만들 수 있는 데이터 소스 구성 - SqlDataSource2 페이지가 표시됩니다.

  8. 이름 목록에서 Products를 선택합니다.

  9. 열 상자에서 ProductID, ProductName 및 CategoryID를 선택합니다.

  10. WHERE를 클릭합니다.

    그러면 WHERE 절 추가 대화 상자가 표시됩니다.

  11. 열 목록에서 CategoryID를 선택합니다.

  12. 연산자 목록에서 =를 선택합니다.

  13. 소스 목록에서 Control을 선택합니다.

  14. 매개 변수 속성의 컨트롤 ID 목록에서 DropDownList1을 선택합니다.

    마지막 두 단계에서는 해당 쿼리가 이전에 추가한 DropDownList 컨트롤에서 제품 ID에 대한 검색 값을 가져오도록 지정합니다.

  15. 추가를 클릭합니다.

  16. 확인을 클릭하여 WHERE 절 추가 대화 상자를 닫습니다.

  17. 다음을 클릭합니다.

  18. 미리 보기 페이지에서 쿼리 테스트를 클릭합니다.

    WHERE 절에 사용할 값을 묻는 대화 상자가 표시됩니다.

  19. 상자에 4를 입력한 후 확인을 클릭합니다.

    범주 4에 대한 제품 레코드가 표시됩니다.

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

이제 마스터/세부 사항 표시를 테스트할 수 있습니다.

페이지를 테스트하려면

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

    표시된 페이지에는 드롭다운 목록의 첫 번째 항목에 해당하는 제품이 표시됩니다.

  2. 목록에서 범주를 하나 선택하고 해당 제품이 표에 나타나는지 확인합니다.

동일한 페이지에 마스터/세부 사항 데이터 표시

이 연습 부분에서는 관련 테이블의 데이터를 한 페이지에 표시합니다. 마스터 테이블 데이터는 사용자가 개별 행을 선택할 수 있는 표에 표시됩니다. 사용자가 행을 선택하면 페이지의 스크롤 가능 컨트롤에 하나 이상의 세부 레코드가 표시됩니다. 이러한 기능을 테스트하기 위해 Northwind Categories 테이블을 마스터 테이블로, Products 테이블을 세부 테이블로 사용합니다.

마스터 레코드를 표시하려면

  1. 웹 사이트에 새 페이지를 추가한 후 MasterDetails2.aspx로 지정합니다.

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

  3. 페이지에 마스터/세부 사항 페이지라고 입력한 후 해당 텍스트의 서식을 제목으로 지정합니다.

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

  5. GridView 작업 메뉴의 데이터 소스 선택 목록에서 <새 데이터 소스>를 클릭한 후 다음 단계에 따라 GridView 컨트롤에 대한 데이터 소스를 구성합니다.

    1. 데이터베이스를 선택합니다.

    2. 확인을 클릭합니다.

    3. 연결 드롭다운 목록에서 이 연습 앞부분에서 만들어 저장했던 연결(NorthwindConnectionString)을 선택합니다.

    4. 다음을 클릭합니다.

    5. 이름 목록에서 Categories를 선택합니다.

    6. 열 상자에서 CategoryID 및 CategoryName을 선택합니다.

    7. 다음을 클릭하고 마침을 클릭합니다.

  6. GridView 컨트롤을 선택하고 GridView 작업 메뉴에서 열 편집을 선택합니다.

    필드 대화 상자가 표시됩니다.

  7. 사용 가능한 필드에서 CommandField 노드를 열고 선택을 선택한 후 추가를 클릭하여 선택한 필드 목록에 추가합니다.

  8. 선택한 필드 목록에서 선택을 선택한 후 CommandField 속성 표에서 해당 SelectText 속성을 세부 사항으로 설정합니다.

  9. 확인을 클릭하여 필드 대화 상자를 닫습니다.

    세부 사항 하이퍼링크가 지정된 새 열이 표에 추가됩니다.

  10. GridView 컨트롤을 선택하고 속성 창에서 해당 DataKeyNames 속성이 CategoryID로 설정되어 있는지 확인합니다.

    이렇게 하면 사용자가 표에서 행을 선택할 때 ASP.NET은 알려진 위치에서 현재 표시된 범주 레코드의 키를 찾을 수 있습니다.

표를 사용하여 개별 범주를 선택할 수 있습니다. 다음에는 선택된 범주와 관련된 제품에 해당하는 세부 레코드를 표시하는 DetailsView 컨트롤을 추가합니다. DetailsView 컨트롤은 다른 SQL 쿼리를 사용하여 해당 데이터를 가져오므로 또 다른 데이터 소스 컨트롤이 필요합니다.

관련 레코드를 표시하도록 쿼리를 구성하려면

  1. Enter 키를 눌러 세부 사항 뷰에서 MasterDetails2.aspx 페이지의 SqlDataSource1 컨트롤 아래에 공간을 만듭니다.

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

  3. 다음 단계에 따라 또 다른 데이터 소스 컨트롤을 사용하도록 이 컨트롤을 구성합니다.

    1. 데이터 소스 선택 목록에서 <새 데이터 소스>를 선택합니다.

    2. 데이터베이스를 선택합니다.

    3. 확인을 클릭합니다.

    4. 연결 드롭다운 목록에서 이 연습 앞부분에서 만들어 저장했던 연결을 클릭합니다.

    5. 다음을 클릭합니다.

    6. 테이블 또는 뷰의 열 지정의 이름 목록에서 Products를 선택합니다.

    7. 열 상자에서 ProductID, ProductName 및 CategoryID를 선택합니다.

    8. WHERE를 클릭합니다.

      그러면 WHERE 절 추가 대화 상자가 표시됩니다.

    9. 열 목록에서 CategoryID를 선택합니다.

    10. 연산자 목록에서 =를 선택합니다.

    11. 소스 목록에서 Control을 선택합니다.

    12. 매개 변수 속성의 컨트롤 ID 목록에서 GridView1을 선택합니다. 두 번째 표에 대한 쿼리는 첫 번째 표에서 선택된 항목으로부터 매개 변수 값을 가져옵니다.

    13. 추가를 클릭한 후 확인을 클릭하여 WHERE 절 추가 대화 상자를 닫습니다.

    14. 다음을 클릭합니다.

    15. 미리 보기 페이지에서 쿼리 테스트를 클릭합니다.

      WHERE 절에 사용할 값을 묻는 대화 상자가 표시됩니다.

    16. 상자에 4를 입력한 후 확인을 클릭합니다.

      범주 4에 대한 제품 레코드가 표시됩니다.

    17. 마침을 클릭합니다.

  4. DetailsView 작업 메뉴에서 페이징 사용을 선택합니다.

    이렇게 하면 사용자는 개별 제품 레코드를 따라 스크롤할 수 있습니다.

  5. 필요에 따라 속성 창에서 PagerSettings 노드를 열고 다른 Mode 값을 선택합니다.

    기본적으로 페이지 번호를 클릭하여 레코드를 페이징할 수 있지만 다음 및 이전 링크를 사용하는 옵션을 선택할 수도 있습니다.

이제 마스터 표와 세부 사항 뷰의 조합을 테스트할 수 있습니다.

페이지를 테스트하려면

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

  2. 표에서 범주를 하나 선택합니다.

    DetailsView 컨트롤에 해당 범주와 관련된 제품이 표시됩니다.

  3. DetailsView 컨트롤의 페이지 링크를 사용하여 같은 범주의 다른 제품으로 이동합니다.

  4. 표에서 다른 범주를 하나 선택합니다.

  5. DetailsView 컨트롤에서 해당 범주에 대한 제품을 확인합니다.

별도의 페이지에 마스터/세부 사항 데이터 표시

이 연습의 마지막 단계에서는 마스터 레코드와 세부 레코드를 별도의 페이지에 표시하는 또 다른 변형 유형을 만듭니다. 마스터 레코드는 각 레코드에 대한 하이퍼링크를 포함하는 표에 다시 표시됩니다. 이 하이퍼링크를 클릭하면 DetailsView 컨트롤의 세부 레코드를 볼 수 있는 완전한 Products 레코드를 표시하는 또 다른 페이지로 이동됩니다.

마스터 레코드를 표시하려면

  1. 웹 사이트에 새 페이지를 추가한 후 MasterCustomers.aspx로 지정합니다.

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

  3. 페이지에 고객이라고 입력한 후 해당 텍스트의 서식을 제목으로 지정합니다.

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

  5. 컨트롤에 대한 GridView 작업 메뉴의 데이터 소스 선택 목록에서 <새 데이터 소스>를 선택한 후 마법사를 사용하여 다음을 수행합니다.

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

    • Northwind 데이터베이스(연결 NorthwindConnectionString)로 연결합니다.

    • Customers 테이블에서 CustomerID, CompanyName 및 City 열을 가져옵니다.

  6. 필요에 따라 GridView 작업 메뉴에서 페이징 사용 확인란을 선택합니다.

  7. GridView 작업 메뉴에서 열 편집을 선택합니다.

    필드 대화 상자가 표시됩니다.

  8. 필드 자동 생성 확인란의 선택을 취소합니다.

  9. 사용 가능한 필드에서 HyperLink 필드를 선택한 후 추가를 클릭하고 다음 속성을 설정합니다.

    속성

    값

    Text

    세부 사항

    DatahrefFields

    CustomerID

    하이퍼링크가 CustomerID 열에서 값을 가져옵니다.

    DatahrefFormatString

    DetailsOrders.aspx?custid={0}

    DetailsOrders.aspx 페이지로 이동하도록 하드 코드된 링크가 만들어집니다. 이 링크는 DatahrefFields 속성에 참조된 열을 사용하여 해당 값이 채워지는 custid라는 쿼리 문자열 변수를 전달합니다.

  10. 확인을 클릭하여 필드 대화 상자를 닫습니다.

이제 마스터 페이지의 값을 받아들이는 세부 사항 페이지를 만들 수 있습니다.

세부 사항 페이지를 만들려면

  1. 웹 사이트에 새 페이지를 추가한 후 DetailsOrders.aspx로 지정합니다.

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

  3. 페이지에 주문이라고 입력한 후 해당 텍스트의 서식을 제목으로 지정합니다.

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

  5. 컨트롤에 대한 GridView 작업 메뉴의 데이터 소스 선택 목록에서 <새 데이터 소스>를 선택합니다.

  6. 데이터 소스 형식을 선택하십시오. 목록에서 데이터베이스를 클릭한 후 확인을 클릭합니다.

  7. 연결 목록에서 이 연습 앞부분에서 만들어 저장했던 연결(NorthwindConnectionString)을 선택합니다.

  8. 다음을 클릭합니다.

    SQL 문을 만들 수 있는 페이지가 표시됩니다.

  9. 이름 목록에서 Orders를 선택합니다.

  10. 열 상자에서 OrderID, CustomerID 및 OrderDate를 선택합니다.

  11. WHERE를 클릭합니다.

  12. 열 목록에서 CustomerID를 선택합니다.

  13. 연산자 목록에서 =를 선택합니다.

  14. 소스 목록에서 QueryString을 선택합니다.

    이렇게 하면 쿼리는 쿼리 문자열과 함께 페이지에 전달된 값에 따라 레코드를 선택합니다.

  15. 매개 변수 속성의 QueryString 필드 상자에 custid를 입력합니다.

    쿼리는 사용자가 MasterCustomers.aspx 페이지에서 세부 사항 링크를 클릭할 때 만들어진 쿼리 문자열에서 고객 ID 값을 가져옵니다.

  16. 추가를 클릭합니다.

  17. 확인을 클릭하여 WHERE 절 추가 대화 상자를 닫습니다.

  18. 다음을 클릭한 다음 마침을 클릭하여 마법사를 닫습니다.

  19. 도구 상자의 표준 노드에서 Hyperlink 컨트롤을 페이지로 끌어 옵니다. 해당 Text 속성을 고객으로 돌아가기로, href 속성을 MasterCustomers.aspx로 설정합니다.

이제 관련된 마스터-세부 사항 페이지를 테스트할 수 있습니다.

페이지를 테스트하려면

  1. MasterCustomers.aspx 페이지로 전환합니다.

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

  3. 고객에 대한 세부 사항 링크를 클릭합니다.

    브라우저에 선택된 고객에 대한 주문을 보여 주는 DetailsOrders.aspx 페이지가 표시됩니다. 브라우저의 주소 표시줄에 나타나는 URL은 다음과 같습니다.

    DetailsOrder.aspx?custid=x

    여기서 x는 사용자가 선택한 고객의 ID입니다.

  4. 고객으로 돌아가기 링크를 클릭하고 다른 고객을 선택한 후 세부 사항 링크를 다시 클릭하여 해당 고객에 대한 주문을 볼 수 있는지 테스트합니다.

다음 단계

이 연습에서는 관련 테이블의 데이터를 표시하는 다양한 방법에 대해 설명했습니다. 모든 시나리오는 매개 변수가 있는 쿼리에 의존하며 매개 변수 값이 런타임에 쿼리로 자동 전달될 수 있다는 공통점을 갖습니다. 또한 다른 방법으로 관련 데이터를 사용하고 싶을 수도 있습니다. 예를 들어, 다음과 같은 경우입니다.

참고 항목

개념

데이터 소스 컨트롤 개요

데이터 소스 컨트롤을 사용하여 데이터 수정