연습: DataList 웹 서버 컨트롤을 사용하여 데이터 표시 및 서식 지정

아티클
10/22/2014

업데이트: 2007년 11월

웹 페이지의 일반적인 작업 중 하나는 데이터 표시, 즉 데이터 보고서를 만드는 것입니다. 이 연습에서는 ASP.NET 웹 페이지에 표시할 레코드의 자유 형식 레이아웃을 만들 수 있게 해주는 DataList 컨트롤을 사용합니다.

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

DataList 컨트롤을 추가하고 템플릿을 사용하여 DataList 컨트롤에 의해 표시되는 데이터의 레이아웃을 지정합니다.
DataList 컨트롤을 데이터 소스에 바인딩합니다.
자식 데이터 컨트롤과 일부 코드를 DataList 컨트롤에 추가하여 마스터/세부 사항 관계로 데이터를 표시합니다.

사전 요구 사항

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

Microsoft Visual Web Developer(Visual Studio)
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"을 참조하십시오.

참고:
SQL Server가 실행되는 컴퓨터에 로그온하는 방법에 대한 자세한 내용은 서버 관리자에게 문의하십시오.

웹 사이트 만들기

다음 단계에 따라 새 웹 사이트와 페이지를 만듭니다.

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

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

새 웹 사이트 대화 상자가 표시됩니다.
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 선택합니다.
위치 상자에서 파일 시스템을 선택하고 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

예를 들어, 폴더 이름 C:\WebSites\FormatDataList를 입력합니다.
언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.

선택하는 프로그래밍 언어는 웹 사이트의 기본 언어가 되지만 페이지마다 개별적으로 프로그래밍 언어를 설정할 수 있습니다.
언어을 클릭합니다.

Visual Web Developer에서 사용자가 지정한 폴더와 Default.aspx라는 새 페이지가 작성됩니다.

DataList 컨트롤 추가

이 연습의 첫 단계에서는 DataList 컨트롤을 추가한 다음 해당 데이터 소스를 구성합니다.

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

디자인 뷰로 전환합니다.
도구 상자의 데이터 그룹에서 DataList 컨트롤을 페이지로 끌어 옵니다.
DataList 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 클릭합니다.
DataList 작업 메뉴의 데이터 소스 선택 목록에서 새 데이터 소스를 클릭합니다.

데이터 소스 구성 마법사가 표시됩니다.
데이터베이스를 클릭합니다.

이렇게 하면 SQL 문을 지원하는 데이터베이스에서 데이터를 가져오도록 지정합니다. 여기에는 SQL Server 및 기타 OLE DB 호환 데이터베이스가 포함됩니다.
데이터 소스의 ID 지정 상자에 기본 데이터 소스 컨트롤 이름(SqlDataSource1)이 표시됩니다. 이 이름을 그대로 둘 수 있습니다.
확인을 클릭합니다.

데이터 소스 구성 마법사에서 연결을 만들 수 있는 페이지를 표시합니다.
새 연결을 클릭합니다.
- 데이터 소스 선택 페이지가 나타나면 데이터 소스 목록에서 사용할 데이터 소스의 형식을 선택합니다. 이 연습에서 데이터 소스 형식은 Microsoft SQL Server입니다. 데이터 공급자 목록에서 .NET Framework Data Provider for SQL Server를 클릭한 다음 계속을 클릭합니다.
연결 추가 페이지가 나타납니다.
연결 추가 페이지의 서버 이름 텍스트 상자에 SQL Server 데이터베이스를 실행하는 컴퓨터의 이름을 입력합니다.
로그온 자격 증명에서 SQL Server 데이터베이스를 실행하는 컴퓨터에 액세스하는 데 적합한 옵션(통합 보안 또는 특정 ID와 암호)을 선택하고 필요한 경우 사용자 이름과 암호를 입력합니다.
암호 저장 확인란을 선택합니다.
데이터베이스 이름 선택 또는 입력 단추를 클릭한 다음 Northwind를 입력합니다.
연결 테스트를 클릭하고 제대로 작동하는지 확인한 다음 확인을 클릭합니다.

데이터 소스 구성 마법사가 나타나고 연결 정보가 채워져 있습니다.
다음을 클릭합니다.

데이터 소스 구성 마법사는 구성 파일에 연결 문자열을 저장할 수 있는 페이지를 표시합니다. 구성 파일에 연결 문자열을 저장할 경우 두 가지 장점이 있습니다.
- 페이지에 저장하는 것보다 안전합니다.
- 여러 페이지에서 동일한 연결 문자열을 다시 사용할 수 있습니다.
예, 이 연결을 다음으로 저장합니다. 확인란이 선택되어 있는지 확인하고 다음을 클릭합니다. 기본 연결 문자열을 그대로 둘 수 있습니다.

데이터 소스 구성 마법사가 데이터베이스에서 페치할 데이터를 지정할 수 있는 페이지를 표시합니다.
테이블 또는 뷰의 열 지정이 선택되어 있는지 확인합니다.
이름 목록에서 Categories를 클릭합니다.

열에서 CategoryID 및 CategoryName 확인란을 선택합니다.

데이터 소스 구성 마법사가 페이지 아래쪽의 상자에 생성 중인 SQL 문을 표시합니다.

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

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

데이터 소스 구성 마법사가 닫히고 SqlDataSource 컨트롤로 돌아갑니다. SqlDataSource 컨트롤의 속성을 표시하면 데이터 소스 구성 마법사에서 ConnectionString 및 SelectQuery 속성 값을 만들었음을 확인할 수 있습니다. Visual Web Developer의 속성이 전체 연결 문자열을 표시해도 연결 문자열 식별자만 페이지에 저장됩니다. 이 경우는 NorthwindConnectionString입니다.

DataList 컨트롤의 레이아웃 서식 지정

이제 Categories 테이블의 정보에 대해 기본 레이아웃을 사용하는 DataList 컨트롤이 페이지에 있습니다. DataList 컨트롤의 이점은 데이터의 자유 형식 레이아웃을 만들 수 있다는 것입니다. 이 단원에서는 템플릿을 사용하고 텍스트와 컨트롤을 구성하여 데이터 표시를 사용자 지정합니다.

DataList 컨트롤의 레이아웃 서식을 지정하려면

DataList 컨트롤을 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 클릭한 다음 항목 템플릿을 클릭합니다.

DataList 컨트롤이 템플릿 편집 모드로 전환되고 다음 템플릿에 해당하는 템플릿 상자가 표시됩니다.
- ItemTemplate - 기본적으로 DataList 컨트롤에 표시되는 텍스트와 컨트롤이 포함됩니다.
- AlternatingItemTemplate - 다른 모든 데이터 레코드에 사용되는 레이아웃을 만들 수 있는 선택적 템플릿입니다 . 일반적으로 AlternatingItemTemplate 속성은 ItemTemplate 속성과 유사하지만 AlternatingItemTemplate 속성은 띠 모양으로 다른 배경색을 사용합니다.
- SelectedItemTemplate - 단추 클릭이나 다른 동작을 사용하여 명시적으로 선택한 데이터 레코드의 레이아웃을 정의합니다. 이 템플릿은 일반적으로 데이터 레코드의 확장된 보기를 제공하거나 마스터/세부 사항 관계에서 마스터 레코드로 사용됩니다. 레코드를 선택한 모드로 전환하는 기능을 지원하려면 코드를 작성해야 합니다. 이 연습에서는 이 작업을 수행하지 않습니다. 자세한 내용은 방법: DataList 웹 서버 컨트롤에서 항목 선택 허용 및 연습: Visual Studio에서 마스터/세부 사항 웹 페이지 만들기를 참조하십시오.
- EditItemTemplate - 데이터 레코드에 대한 편집 모드 레이아웃을 정의합니다. 일반적으로 EditItemTemplate 속성에는 사용자가 데이터 레코드를 수정할 수 있는 TextBox 및 CheckBox 컨트롤과 같은 편집 가능한 컨트롤이 포함됩니다. 레코드를 편집 모드로 전환하는 기능을 지원하고 편집 완료 시 레코드를 저장하려면 코드를 작성해야 합니다. 이 연습에서는 이 작업을 수행하지 않습니다. 코드를 작성하여 레코드를 편집하는 방법은 방법: DataList 웹 서버 컨트롤에서 항목 편집 허용을 참조하십시오.
기본적으로 Visual Web Developer는 데이터 소스의 각 데이터 열에 대해 데이터 바인딩된 Label 컨트롤을 사용하여 항목 템플릿을 채웁니다. 또한 캡션으로 사용될 각 레이블의 정적 텍스트를 생성합니다.
오른쪽 크기 조정 핸들을 끌어 DataList 컨트롤을 페이지 너비만큼 확대합니다.
템플릿 내용이 다음 코드 예제와 유사하도록 항목 템플릿을 편집하여 Label 컨트롤을 다시 정렬하고 새 캡션을 만듭니다.
```
Name: [CategoryNameLabel] (ID: [CategoryIDLabel])
```
CategoryNameLabel 컨트롤을 클릭합니다. 속성에서 Font 노드를 확장한 다음 Bold를 true로 설정합니다.
디자인 뷰에서 DataList 컨트롤의 제목 표시줄을 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 클릭한 다음 구분 기호 템플릿을 클릭합니다.

구분 기호 템플릿을 사용하면 데이터 레코드 사이에 표시되는 텍스트 또는 기타 요소를 지정할 수 있습니다.
도구 상자의 HTML 그룹에서 단락 구분선 요소를 구분 기호 템플릿으로 끌어 옵니다.
DataList 컨트롤의 제목 표시줄을 마우스 오른쪽 단추로 클릭하고 템플릿 편집 끝내기를 클릭합니다.

DataList 컨트롤 테스트

이제 만들어진 레이아웃을 테스트할 수 있습니다.

DataList 컨트롤을 테스트하려면

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

각 레코드 사이에 선으로 구분되어 범주 이름 및 ID 목록이 페이지에 표시됩니다.

DataList 컨트롤 내부에 관련 정보 표시

현재 사용 중인 DataList 컨트롤에 이전에 정의한 사용자 지정 레이아웃을 사용하여 개별 범주 레코드가 표시됩니다. 기본 레이아웃을 약간만 변경했지만 템플릿을 사용하여 텍스트와 컨트롤을 정렬하고 내용 서식을 지정하고 데이터 레코드 표시를 다른 방식으로 수정할 수 있음을 확인했습니다.

레이아웃은 현재 레코드는 물론 관련 레코드도 포함할 수 있습니다. 이 연습 단계에서는 각 행에 범주와 해당 범주의 제품이 표시되도록 레이아웃을 변경합니다. 실제로 DataList 컨트롤의 각 행에 마스터/세부 사항 관계를 표시합니다. 이 시나리오를 사용하려면 짧은 코드 조각을 작성해야 합니다.

DataList 컨트롤 내부에 관련 정보를 표시하려면

DataList 컨트롤을 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 클릭한 다음 항목 템플릿을 클릭합니다.
도구 상자의 표준 그룹에서 BulletedList 컨트롤을 항목 템플릿으로 끌어온 다음 BulletedList 컨트롤을 범주 정보 아래에 놓습니다.

BulletedList 컨트롤은 글머리 기호 항목당 데이터 열 하나씩, 데이터를 표시할 수 있습니다.
BulletedList 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 클릭합니다.
데이터 소스 선택을 클릭합니다.

관련 레코드를 읽는 두 번째 데이터 소스 컨트롤을 만듭니다.
데이터 소스 선택 대화 상자의 데이터 소스 선택 목록에서 새 데이터 소스를 클릭합니다.
데이터베이스를 클릭합니다.
데이터 소스의 ID 지정 상자에 bulletedListDataSource를 입력합니다.

일반적으로 데이터 소스의 기본 이름을 그대로 둘 수 있지만 이 경우에는 나중에 코드에서 참조할 수 있도록 데이터 소스에 예측 가능한 특정 이름을 할당하는 것이 좋습니다.
확인을 클릭합니다.

데이터 소스 구성 마법사가 표시됩니다.
응용 프로그램이 데이터베이스에 연결하기 위해 사용해야 하는 데이터 연결 목록에서 이 연습의 앞부분에서 만든 연결의 이름을 클릭하고 다음을 클릭합니다.

데이터 소스 구성 마법사에서 SQL 문을 만들 수 있는 페이지를 표시합니다.
테이블 또는 뷰의 열 지정의 이름 상자에서 Products를 클릭합니다.
열 상자에서 ProductName 상자를 선택합니다.

BulletedList 컨트롤에 한 개의 열만 표시됩니다.
WHERE 단추를 클릭합니다.

WHERE 절 추가 대화 상자가 나타납니다.
열 목록에서 CategoryID를 클릭합니다.
연산자 목록에서 **=**를 클릭합니다.
소스 목록에서 없음을 클릭합니다.

이렇게 하면 CategoryID 열의 값이 변수에 제공됩니다.
추가, 확인 및 다음을 차례로 클릭한 다음 마침을 클릭합니다.

변수에는 쿼리 테스트가 적용되지 않습니다.
BulletedList에 표시할 데이터 필드 선택 목록에서 ProductName을 클릭합니다. 확인을 클릭합니다.
DataList 컨트롤의 제목 표시줄을 마우스 오른쪽 단추로 클릭하고 템플릿 편집 끝내기를 클릭합니다.

범주 ID를 설정하기 위한 코드 작성

bulletedListDataSource 컨트롤에 대해 만든 SQL 문은 다음 코드와 같이 나타납니다.

SELECT [ProductName] FROM [Products] WHERE ([CategoryID] = @CategoryID)

런타임 시 DataList 컨트롤에 범주 이름과 범주 ID가 모두 포함된 범주 레코드 목록이 표시됩니다. 이전 단원에서는 각 범주의 모든 제품을 표시하는 BulletedList 컨트롤을 추가했습니다. 각 범주 레코드가 표시될 때 DataList 컨트롤은 이전 쿼리를 사용하여 해당 범주의 제품을 가져오는 쿼리를 실행합니다.

표시되는 각 레코드에 대해 범주 ID를 쿼리에 제공해야 합니다. 이렇게 하려면 현재 표시 중인 레코드에서 범주 ID를 가져온 다음 범주 ID를 bulletedListDataSource 컨트롤의 쿼리에 매개 변수로 전달하는 짧은 코드 조각을 작성합니다.

범주 ID를 설정하기 위한 코드를 작성하려면

DataList 컨트롤을 클릭한 다음 속성의 도구 모음에서 이벤트를 클릭합니다.
ItemDataBound를 두 번 클릭하여 해당 이벤트에 대한 이벤트 처리기를 만듭니다.
다음 코드를 처리기로 복사합니다.
```
If e.Item.ItemType = ListItemType.Item Or _
    e.Item.ItemType = ListItemType.AlternatingItem Then
  Dim ds As SqlDataSource
  ds = CType(e.Item.FindControl("bulletedListDataSource"), _
      SqlDataSource)
  Dim categoryID As String
  categoryID = DataBinder.Eval(e.Item.DataItem, _
      "categoryid").ToString()
  ds.SelectParameters("CategoryID").DefaultValue = _
      categoryID
End If
```
```
if (e.Item.ItemType == ListItemType.Item ||
    e.Item.ItemType == ListItemType.AlternatingItem)
{
  SqlDataSource ds;
  ds = e.Item.FindControl("bulletedListDataSource")
      as SqlDataSource;
  ds.SelectParameters["CategoryID"].DefaultValue =
      DataBinder.Eval(e.Item.DataItem,
      "categoryid").ToString();
}
```
표시되는 각 데이터 레코드에 대해 ItemDataBound 이벤트가 발생하여 데이터를 읽거나 수정할 수 있는 옵션을 제공합니다. 이 코드는 다음과 같은 작업을 합니다.
1. ItemTemplate 또는 AlternatingItemTemplate 개체(SeparatorTemplate 개체나 다른 유형의 템플릿이 아님)를 바인딩하는 동안 이벤트가 발생하는지 확인합니다.
2. FindControl 메서드를 사용하여 각 항목 템플릿 내부에 생성되는 SqlDataSource 컨트롤 인스턴스에 대한 참조를 가져옵니다.
3. 현재 DataItem 속성을 평가하여 CategoryID 데이터 열의 값을 가져옵니다.
4. SelectParameters 컬렉션의 DefaultValue 속성을 설정하여 매개 변수가 있는 쿼리의 CategoryID 변수를 설정합니다.

코드 테스트

이제 코드를 테스트할 수 있습니다.

범주 ID를 설정하기 위한 코드를 테스트하려면

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

DataList 컨트롤에 각 범주 레코드가 표시되고, 각 레코드에 대해 해당 범주에 속하는 제품이 글머리 기호 목록으로 표시됩니다.

다음 단계

이 연습에서는 DataList 웹 서버 컨트롤을 사용하여 데이터를 표시하고 서식을 지정하는 간단하지만 완전한 시나리오에 대해 설명했습니다. 연습에서 설명한 기술과 컨트롤을 사용하여 보다 복잡한 데이터 기반 페이지와 응용 프로그램을 만들 수 있습니다. 예를 들어, 다음과 같은 경우입니다.

사용자가 DataList 웹 서버 컨트롤의 항목을 선택할 수 있도록 코드를 작성합니다. 자세한 내용은 방법: DataList 웹 서버 컨트롤에서 항목 선택 허용을 참조하십시오.
마스터/세부 사항 관계에 대한 마스터 레코드를 만듭니다. 자세한 내용은 연습: Visual Studio에서 마스터/세부 사항 웹 페이지 만들기를 참조하십시오.
데이터 응용 프로그램에 출력 캐싱을 사용하여 성능을 향상시키는 방법을 설명합니다. 자세한 내용은 연습: 출력 캐싱을 사용하여 웹 사이트 성능 향상을 참조하십시오.

참고 항목

작업

방법: DataList 웹 서버 컨트롤에서 항목 선택 허용

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

참조

DataList

다음을 통해 공유