DreamwaverMX 및 ASP.NET(2)

2. ASP.NET 구성 요소 DataGrid를 사용하여 데이터 표시

관련 내용 소개:

ASP.NET에는 웹 페이지 편집 프로세스 속도를 높이기 위해 많은 웹 구성 요소가 포함되어 있습니다. Dreamwaver MX와 함께 제공되는 튜토리얼인 global의 예를 사용하여 이 구성 요소를 사용하여 데이터베이스에 데이터를 표시하는 방법을 보여 드리겠습니다.

1. DataGrid를 이용한 데이터베이스 연결 및 데이터 표시

웹 페이지 디렉토리의 자산에 이 인스턴스의 데이터베이스 global.mdb가 있습니다. 우리의 목적은 이 데이터베이스의 위치 테이블에 있는 Region_id 값을 기반으로 다양한 지역의 데이터를 출력하는 것입니다. (이 데이터베이스를 열려면 Access를 사용할 수 있습니다)

location3.htm 파일의 이름을 location3.aspx(ASP.NET 웹 창 파일의 접미사는 aspx임)로 바꾼 다음 편집할 수 있습니다.



[그림 2-1 변경이 필요한 페이지]

중간에 있는 간단한 정적 부분을 삭제하고 ASP.NET의 DataGrid를 사용하여 해당 기능을 구현해 보겠습니다.



[그림 2-2 페이지의 정적 부분 삭제]
다음 단계는 데이터베이스에 연결하는 것입니다. 오른쪽의 애플리케이션 패널을 클릭하고 데이터베이스를 선택한 후 + 기호를 클릭합니다.

OLE DB 연결을 선택합니다.



[그림 2-3 응용프로그램 패널]

그런 다음 OLE DB 연결 대화 상자를 입력합니다. 여기에서 링크 데이터베이스 코드를 직접 작성하거나 자동으로 코드를 생성할 수 있습니다. 연결 이름 위치의 이름을 지정하고 빌드를 클릭하면 마법사를 통해 코드가 자동으로 생성됩니다.



[그림 2-4 OLE DB 연결 대화상자]

Data Link Properties 페이지에 진입한 후 Provider를 선택하여 데이터베이스 엔진을 설정합니다.

아래 놀라운 점은 SQL Server, Oracle 등 21가지 데이터베이스 연결 방식을 지원한다는 점입니다.



[그림 2-5 데이터베이스 엔진 제공 페이지]

이는 여러 데이터베이스를 지원하는 .NET의 장점 중 하나입니다. ADO.NET을 사용합니다. 잠시 후 이 마법사를 사용하여 생성한 연결 문자열은 ADO.NET에 따라 작성됩니다.

연결하려는 데이터베이스는 Access2000 데이터베이스이므로 Microsoft Jet 4.0 OLE DB Provider를 선택하고 다음을 클릭합니다.

1. 옆에 있는 버튼을 클릭합니다. 데이터베이스 이름을 선택하거나 입력하여 연결하려는 데이터베이스를 선택합니다.

2.데이터베이스에 로그온하기 위한 정보를 입력하세요.에서 사용자 이름과 비밀번호를 취소하세요.



[그림 2-6 설정링크]

고급에서 읽기 권한을 설정하세요. 읽기, 읽기쓰기, 쓰기를 선택하고 확인을 클릭합니다.



[그림 2-7 권한 설정]

연결 이름을 추가하고 테스트를 클릭하여 데이터베이스 링크를 테스트하면 확인을 클릭합니다. 축하해요,

데이터베이스를 사이트에 연결했습니다. 다음 단계는 DataGrid를 사용하여 표시하는 것입니다.

또한 응용 프로그램 패널에서 서버 동작을 선택합니다.

먼저 설정을 완료하고 배포를 클릭하면 프로그램이 자동으로 사이트를 배포하고 Dreamweaver MX를 사용하여 ASP.net 웹 페이지를 만드는 데 필요한 파일인 DreamweaverCtrls.dll, web.config 및 _mmServerScripts 폴더를 사이트 디렉토리에 복사합니다.



[그림 2-8 배포 사이트]
동시에 먼저 웹 사이트의 루트 디렉토리에 bin 폴더를 만들고 DreamweaverCtrls.dll 파일을 이 폴더에 복사해야 합니다.

먼저 새 DataSet을 생성하려면 + 기호를 클릭하세요.



[그림 2-9 데이터셋 추가]

Connection은 데이터 소스 선택, Table은 테이블 선택, Column은 항목 선택, Filter는 유럽의 데이터를 표시하므로 입력 값=3으로 설정됩니다. On Failure는 데이터를 읽는 중 오류가 발생했을 때 점프하는 페이지를 처리하기 위해 사용됩니다.



[그림 2-10 데이터셋 생성]

DataSet을 성공적으로 만든 후에는 DataGrid를 만들 수 있습니다. + 기호를 클릭하고 DataGrid를 선택합니다.



[그림 2-11 DataGrid 추가]

Dataset에서 필요한 레코드 세트를 선택하고, 페이징 표시 사용 여부와 페이징에 표시되는 페이지당 레코드 수를 설정하고, Navigation에서 네비게이션 바 방식을 설정하고, Columns에서 표시 항목을 추가하거나 삭제합니다.



[그림 2-12 DataGrid 설정]

편집을 클릭하여 헤더 제목을 설정하세요. 제목을 입력한 후 확인을 클릭하여 확인하세요.



[그림 2-13 설정 제목]

확인을 클릭하여 DataGrid를 추가합니다.



[그림 2-14 미리보기 페이지]

미리보기 페이지에서 DataGrid가 추가된 영역을 볼 수 있습니다. F12를 누르면 페이지를 미리 볼 수 있습니다.

아래는 실행 후의 페이지입니다.



[그림 2-15 실행 후 페이지]
2.DataGrid의 속성 변경

관련 내용 소개:

이 구성품을 보면 색상이 너무 예쁘지 않은 것 같나요? 그럼 바꿔볼까요? DataGrid 구성 요소에는 DataGrid의 스타일을 변경할 수 있는 많은 속성이 있습니다.

코드 분석