관리 메뉴

IT 쟁이

데이터리스트 컨트롤 사용기 (1) 본문

ASP.NET Ex

데이터리스트 컨트롤 사용기 (1)

클라인STR 2008. 2. 15. 00:13

처음 .NET을 공부할때 가장많이 사용한 컨트롤은 단연 데이터리스트 컨트롤이 었습니다. 데이터그리드보다 는 못하지만 UI작성시 Repeater 컨트롤보다는 훨씬 유용하기 때문이었습니다. Repeater컨트롤은 일일이 코딩을 해줘야 되기 때문입니다. 좀더 깊게 데이터리스트 컨트롤을 다시 살펴보기로 했습니다.

우선 Taeyo님의 ASP.NET에 있는 내용에서 발췌하였으며 DB 연동하는 부분만 수정했습니다.

사용자 삽입 이미지

데이터리스트를 다음과 같은 형태루 꾸몄습니다.
사용자 삽입 이미지

데이터베이스 접근방식은 2.0방식의 SqlDataSource 컨트롤의 사용하였습니다.
사용자 삽입 이미지
Select, Insert, Update, Delete 쿼리를 지정해줍니다.

여러가지 모양을 변경할 수 있는 속성이 있는데 몇가지 속성만 언급합니다.
GridLinse은 테두리를 어떤형식으로 나타나게 할 것인가를 지정합니다.
RepeatColumns 아이템을 출력하는데 사용할 컬럼의 수를 나타내며 현재는 1로 설정되어 있습니다.
RepeatDirection 은 아이템이 출력되는 방향을 지정할 수 있습니다. Vertical은 위에서 아래로 출력하며 ,
Horizontal은 왼쪽에서 오른쪽으로 출력합니다.
RepeatColumns과 RepeatDirection은 직접 수정하여 결과를 보면 금방알수 있습니다.

데이터그리드와 마찬가지로 Template들Style속성을 지정해 줄 수 있습니다.

사용자 삽입 이미지

AlternatingItemStyle일은 짝수번째로 출력되는 아이템을 뜻합니다.

데이터리스트는 ItemTemplate 이외에도 EditItemTemplate과 SelectedItemTemplate 이 존재합니다 .
EditItemTemplate은 편집 모드로 설정이 될때 출력되는 템플릿으로 어떤 항목을 수정할 때 사용하면 좋습니다.
DataList컨트롤의 EdititemIndex값이 설정될 경우 해당 EditTemple이 출력됩니다
후자의 SelectItemTemplate의 경우는 데이터리스트 컨트롤의 항목이 선택되었을때 랜더링 되는 템플릿 입니다.
이경우는 컨트롤의 SelectedIndex에 값이 설정될 경우 해당 항목이 출력됩니다.


데이터리스트 컨트롤에서 버튼을 클릭하면 버튼에 해당하는 이벤트함수가 생성되지 않고 데이터리스트의 ItemCommand 이벤트가 발생합니다. 이를 이벤트 버블링이라고 한다네요 . 이벤트 버블링이란 자식 컨트롤이 포함 계층 구조의 상위로 이벤트를 전달할수 있게 하는 기술입니다.

리스트바운드 컨트롤의 경우 모두 이벤트 버블링을 지원합니다. 이는 어떻게 보면 =_=상당히 귀찮습니다. 데이터리스트 컨트롤 내의 자식컨트롤에 속하므로 이들의 컨트롤의 접근하기위해서는 일반적인 방법으로는 접근할수 없습니다.

사용자 삽입 이미지
사용자 삽입 이미지

e.Item.ItemIndex는 DataList 컨트롤에 존재하는 아이템들 중 현재 선택된 아이템의 인덱스 값을 의미합니다.
그 값을 SeletedIndex 혹은 EditItemIndex 에 지정해줍니다.

EditTemple을 통해서 데이터의 수정항목을 나타낼 수 있다.
사용자 삽입 이미지
다음과 같이 TextBox 컨트롤과 업데이트와 삭제, 취소 관련버튼을 작성합니다.
해당이벤트에대한 버튼을 알기위해서 CommandName 속성을 지정하고 이때 CommandArgumnet 값역시 ID에값을 바인딩해줍니다.

이때 해당 작업을 하고 DataList의 DataSour값을 SqlDataSource1으로 다시 설정해주면 폐이지 리로드시 SELECT 구문이 실행됩니다.

UpdateCommand 에서는 각각 컨트롤의 값을 읽어오기위해서 FindControl 함수를 사용하여 알맞은 컨트롤 값을 Session에 저장합니다. 이때 세션에다가 저장하는이유는  SqlDataSource UpdateQuery문의 파라메터값을 Session값으로 설정했기 때문입니다.

사용자 삽입 이미지


사용자 삽입 이미지

22,500 가격을 업데이트 할 경우

사용자 삽입 이미지

Comments