웹지니의 웹서버 컨트롤 사용법 - Pager 컨트롤

[웹지니™]

안녕하세요? 웹지니입니다.

오늘은 지난 번 공개했던 Pager 컨트롤의 사용법에 대해 설명을 드려볼까 합니다.

2.0 기반으로 만들어져 아직 1.x를 사용하신 분들께는 해당 사항이 없지만서두...쩝...

어째뜬 썩쎄쓰! 아니 어째뜬 시작합니다!

참고!!!

컨트롤을 프로젝트에 추가하고 도구 상자에 등록하는 방법은 이전 강좌인 RepeaterEx 컨트롤 강좌를 참고하세용~

1. Pager 컨트롤 사용의 기초

Pager 컨트롤은 기본적으로 데이터 바인딩 컨트롤들 (Repeater나 GridView 등)과 함께 사용되는 컨트롤입니다. 이 컨트롤은 전체 레코드의 개수와 한 페이지당 보여줄 레코드의 개수를 알아야만 뭔가 표시되는 그런 컨트롤입니다. 그래서 처음 웹 폼 페이지에 컨트롤을 올려두면 아무것도 렌더링이 되지 않습니다. (이 부분은 정식 버전에서 수정할 예정입니다.) 해서 아래 그림과 같이 속성 창의 컨트롤 목록에서 Pager 컨트롤을 선택해 주어야 합니다.

그림 1: 속성 창에서 Pager 컨트롤을 찾는 모습

그런 후 일단 임시적으로 RecordCount 속성에 적당한 값을 넣어줍니다. 저는 100을 입력해 두었습니다. 값을 입력하면 아래 그림과 같이 Pager 컨트롤이 보이게 됩니다.

그림 2: Pager 컨트롤의 디자인 타임 모습

이제 Pager 컨트롤의 여러 속성을 이용해서 Pager 컨트롤을 디자인 하면 됩니다. Pager 컨트롤이 제공하는 주요 속성은 아래와 같습니다.

RecordCount: 이 속성은 Pager 컨트롤에 전체 레코드 개수를 지정하거나 가져옵니다. 전체 레코드 개수는 한 페이지당 보여질 레코드의 개수와 페이징 버튼의 개수를 이용하여 전체 페이지 개수를 계산하게 됩니다. 이 속성은 C# 코드에서 직접 지정하거나 ASPX 페이지에서 데이터 바인딩 식을 통해 지정할 수 있습니다.

PageSize: 한 페이지에 보여질 레코드의 개수를 지정합니다. 기본 값은 5이며 한 페이지에 5개의 레코드가 보여짐을 의미합니다.

PageCount: 전체 페이지의 개수를 가져오는 읽기 전용 속성입니다.

CurrentPageIndex: 이 속성은 현재 Pager 컨트롤에 선택된 페이지의 인덱스를 지정하거나 가져옵니다. 이 속성에 새로운 값을 지정하면 Pager 컨트롤은 지정된 페이지를 가리키게 되며 이름에서 알 수 있듯이 각 페이지의 인덱스 이므로 이 값은 0부터 시작합니다. 따라서 1페이지를 가리키게 하려면 이 속성에 0을 대입해야 합니다.

HideOnSingleView: 이 속성은 전체 페이지의 개수가 1개일 때 Pager 컨트롤을 보일 것인지 아닌지를 지정하거나 가져오는 속성입니다. 기본 값은 false이며 전체 페이지가 1개여도 Pager 컨트롤이 페이지에 나타납니다. 이 값을 true로 지정하면 전체 페이지가 1개인 경우 Pager 컨트롤이 렌더링 되지 않습니다.

이 다섯 가지 속성은 Pager 컨트롤에서 가장 중요한 속성이므로 반드시 알아두셔야 합니다. 이미 공개된 다른 Pager 컨트롤에서도 비슷한 이름의 속성을 제공하는 것으로 알고 있는데 아마도 여러분도 속성 이름만으로도 무슨 의미를 갖는 속성인지 쉽게 이해하시리라 생각됩니다.

그러면 Pager 컨트롤의 다른 속성들을 예제와 그림을 통해 살펴보겠습니다.

2. Mode 속성을 이용해서 Pager 컨트롤의 모습 바꾸기

Pager 컨트롤은 두 가지 동작 모드를 제공합니다. 이 동작 모드는 Mode 속성을 통해 바꿀 수 있는데 Mode 속성에서 사용할 수 있는 값은 Daniel.Web.UI.Controls.PagerMode 열거형 값 중 하나이며 각각의 의미는 아래와 같습니다.

DropDown: Pager 컨트롤이 드롭다운 형태로 표시됩니다.

Numeric: Pager 컨트롤이 숫자 버튼 형태로 표시됩니다.

두 속성 값에 따른 외관의 차이는 아래 그림에 나타나 있습니다.

그림 3: Pager 컨트롤의 Mode 속성 값에 따른 외관의 차이

그림에서 위쪽의 Pager 컨트롤은 Mode 속성이 Numeric이며 아래쪽의 Pager 컨트롤은 Mode 속성이 DropDown 입니다.

3. DropDown 형식의 Pager 컨트롤 사용하기

그러면 먼저 DropDown 형식의 Pager 컨트롤을 사용하는 방법을 보다 자세히 살펴보겠습니다. Pager 컨트롤이 DropDown 형식을 경우 많은 속성들이 무시되기 때문에 실제로 사용할 수 있는 속성은 몇 개 되지 않습니다만 하나씩 살펴보도록 하겠습니다.

3.1 DropDownNumericFormatString 속성으로 페이지 텍스트 꾸미기

위의 그림 3을 보면 DropDown에 나타나는 페이지 텍스트는 1 Page, 2 Page...와 같은 형식입니다. 이 텍스트 형식은 DropDownNumericFormatString 속성을 통해 변경할 수 있으며 기본 값은 "{0} Page" 입니다. 이 속성에 지정된 문자열에서 {0}으로 표시된 부분에는 현재 페이지의 번호가 추가됩니다. 따라서 이 값을 변경하면 페이지 텍스트를 바꿀 수 있습니다. 아래 그림과 같이 속성 값을 변경해 볼까요?

그림 4: DropDownNumericFormatString 속성 값을 변경한 모습

3.2 DropDownStyle 속성으로 스타일 지정하기

Pager 컨트롤이 DropDown 모드로 동작할 때 DropDownStyle 속성으로 CSS 스타일을 지정할 수 있습니다. 이 속성은 일반적으로 웹 서버 컨트롤에서 사용되는 Style 관련 속성과 동일하게 .NET의 Style 클래스를 이용합니다. 아래 그림은 DropDownStyle 속성을 변경하여 드롭다운 리스트에 스타일을 적용한 예제입니다.

그림 5: DropDownStyle 속성을 이용하여 스타일을 지정한 모습

현재 Beta 1버전에서는 DropDownStyle 속성의 스타일이 디자인 모드에서 적용되지 않기 때문에 IE를 통해 보여드렸습니다.

이상으로 DropDown 모드에서의 Pager 컨트롤 사용법은 대략적으로 설명이 된 듯 합니다. 다음은 Numeric 모드의 Pager 컨트롤 사용법을 알아보겠습니다.

4. Numeric 모드의 Pager 컨트롤 사용하기

Numeric 모드의 Pager 컨트롤은 외형을 다양하게 꾸밀 수 있는 속성들이 제공되며 외형에 따라 동작 또한 조금씩 달라집니다. 먼저 지금까지의 예제에서 여러분들이 궁금해 했던 것! "왜 이전 다음 버튼은 없는거지???" 라는 질문에 대한 답을 해드리겠습니다.

4.1 네비게이션 버튼 지정하기

Pager 컨트롤의 네비게이션 버튼은 NavigateButton이라는 속성을 통해 지정되며 Daniel.Web.UI.Controls.NavigationButtons 열거형 값 중 하나를 갖습니다.

None: 네비게이션 버튼이 나타나지 않습니다.

FirstLast: 처음으로, 마지막으로 버튼만 나타납니다.

PrevNext: 이전, 다음 버튼만 나타납니다.

FirstPrevNextLast: 처음으로,이전, 다음, 마지막으로 버튼이 모두 나타납니다.

아래 그림은 NavigateButton 속성 값에 따른 컨트롤의 변화를 보여줍니다.

그림 6: NavigateButton 속성 값에 따른 Pager 컨트롤의 변화

NavigateButton 속성이 None이거나 FirstLast인 경우에는 Pager 컨트롤이 이전, 다음 버튼 기능을 수행할 수 없겠지요? 따라서 이 경우에는 Pager 컨트롤의 숫자 버튼을 클릭했을 때의 동작이 바뀌게 됩니다. 즉, 예를 들어 5 페이지를 클릭한 경우 Pager 컨트롤은 아래와 같이 현재 페이지에서 이전 2개 페이지와 나머지 페이지들을 보여주게 됩니다.

그림 7: NavigateButton 속성이 None이거나 FirstLast인 경우와 나머지 경우의 비교

그림에서 보듯이 5페이지를 클릭했을 때의 숫자 버튼의 모양새가 서로 다른 것을 알 수 있습니다. 또한 NumericButtonCount 속성 값을 이용하면 숫자 버튼의 개수를 지정하거나 가져올 수 있습니다. 예를 들어 NumericButtonCount 속성 값을 5로 바꾸면 5개의 숫자 버튼만 나타나게 됩니다.

4.2 이전, 다음 버튼의 동작 정의하기

Pager 컨트롤에 이전, 다음 버튼이 나타나 있는 경우 이 버튼의 동작을 정의 할 수 있습니다. 이 속성에는 Daniel.Web.UI.Controls.PrevNextButtonBehaviors 열거형 값 중 하나를 지정할 수 있으며 속성 값의 의미는 다음과 같습니다.

PagingBlock: 이전, 다음 버튼을 클릭할 경우 페이징 블록 단위로 이동합니다. 즉, 이전 n개 또는 다음 n개의 숫자 버튼을 보여줍니다.

SinglePage: 이전, 다음 버튼을 클릭할 경우 현재 페이지의 이전 페이지 또는 다음 페이지로 이동합니다.

4.3 네비게이션 버튼의 텍스트 지정하기

네비게이션 버튼들은 아래의 속성을 통해 텍스트를 지정할 수 있습니다.

FirstPageText: 처음 버튼의 텍스트를 지정하거나 가져옵니다. 기본 값은 [First] 입니다.

PreviousPageText: 이전 버튼의 텍스트를 지정하거나 가져옵니다. 기본 값은 [Prev] 입니다.

NextPageText: 다음 버튼의 텍스트를 지정하거나 가져옵니다. 기본 값은 [Next] 입니다.

LastPageText: 마지막 버튼의 텍스트를 지정하거나 가져옵니다. 기본 값은 [Last] 입니다.

또한 아래의 속성을 통해 텍스트 대신 이미지를 사용할 수 있습니다.

FirstPageImageUrl: 처음 버튼의 이미지 경로를 지정하거나 가져옵니다. 이 속성이 지정되면 FirstPageText 속성 값은 무시됩니다.

PreviousPageImageUrl: 이전 버튼의 이미지 경로를 지정하거나 가져옵니다. 이 속성이 지정되면 PreviousPageText 속성 값은 무시됩니다.

NextPageImageUrl: 다음 버튼의 이미지 경로를 지정하거나 가져옵니다. 이 속성이 지정되면 NextPageText 속성 값은 무시됩니다.

LastPageImageUrl: 마지막 버튼의 이미지 경로를 지정하거나 가져옵니다. 이 속성이 지정되면 LastPageText 속성 값은 무시됩니다.

4.4 숫자 버튼에 스타일 지정하기

숫자 버튼에 여러 가지 스타일을 지정할 수 있습니다. 숫자 버튼에 지정될 스타일 속성은 크게 두 가지인데 하나는 NumericItemStyle이며 다른 하나는 SelectedNumericItemStyle입니다.

NumericItemStyle: 숫자 버튼 중 현재 페이지를 제외한 나머지 페이지의 숫자 버튼에 적용될 스타일을 지정합니다.

SelectedNumericItemStyle: 현재 선택된 페이지의 숫자 버튼에 적용될 스타일을 지정합니다.

아래 그림은 SelectedNumericItemStyle의 ForeColor 속성을 Red로 지정하고 Font-Bold 속성을 True로 지정한 경우의 실행 모습입니다.

그림 8: SelectedNumericItemStyle 속성을 정의한 모습

또한 NumericButtonFormatString 속성을 이용하여 숫자 버튼의 모양을 바꿀 수 있습니다. 아래 그림은 NumericButtonFormatString 속성을 {0:D2}로 지정한 경우의 모습입니다.

그림 9: NumericButtonFormatString 속성의 사용

4.6 네비게이션 버튼과 숫자 버튼 사이의 구분 문자 지정하기

Pager 컨트롤은 네비게이션 버튼들 사이와 네비 버튼, 숫자 버튼의 사이, 각 숫자 버튼의 사이에 구분 문자를 지정할 수 있습니다. 이 때 필요한 속성은 아래와 같습니다.

NavigateButtonDelimiter: 네비게이션 버튼 사이 (처음과 이전, 다음과 마지막 버튼 사이)에 나타날 구분 문자를 지정하거나 가져옵니다. 기본값은  입니다.

NavigateNumericButtonDelimiter: 네비게이션 버튼과 숫자 버튼 사이에 나타날 구분 문자를 지정하거나 가져옵니다. 기본 값은  입니다.

NumericButtonDelimiter: 숫자 버튼 사이의 구분 문자를 지정하거나 가져옵니다. 기본 값은  입니다.

아래 그림은 위의 속성 값들을 변경한 모습입니다.

그림 10: 구문 문자를 지정한 모습

4.7 클릭할 수 없는 버튼에 대한 행동을 정의하기

Pager 컨트롤에서는 클릭할 수 없는 버튼들이 있습니다. 예를 들어 현재 페이지가 1페이지인 경우 처음 버튼과 이전 버튼은 사용할 수 없습니다. 이 버튼들을 클릭할 때 어떤 행동을 할 것인지를 정의하기 위해 UnreachablePageBehaviorr 속성을 이용할 수 있으며 이 속성에는Daniel.Web.UI.Controls.UnreachablePageBehaviors 열거형 값 중 하나를 사용합니다.

NotSet: 기본 값이며 클릭할 수 없는 버튼은 하이퍼링크가 아닌 일반 텍스트로 나타납니다.

Hide: 클릭할 수 없는 버튼을 숨깁니다.

ShowAlert: 자바스크립트 alert 창을 이용하여 경고 메시지를 표시합니다.

아래 그림은 이 세 가지 모드가 동작 중인 모습을 보여줍니다.

그림 11: UnreachableButtonBehaviors 열거형 값에 따른 동작

그림에서 보듯이 첫 번째 Pager는 처음, 이전 버튼을 클릭할 수 없으며 두 번째 Pager 컨트롤은 처음, 이전 버튼이 보이지 않습니다. 마지막으로 세 번째 Pager 컨트롤의 처음, 이전 버튼을 클릭하면 그림과 같이 경고 메시지가 나타납니다. 참고로 이 경고 메시지를 수정하는 기능은 제공되지 않습니다.

4.8 Pager 컨트롤의 이벤트 처리하기

휴~ 어느덧 마지막 내용이군요. 이제 Pager 컨트롤에서 페이지를 변경했을 때 발생하는 이벤트를 처리해 보겠습니다. Pager 컨트롤은 드롭다운 모드와 숫자 버튼 모드의 구분 없이 페이지가 변경되면 PageIndexChanged 이벤트를 발생시킵니다. 따라서 아래와 같이 코드를 작성할 수 있습니다.

그림 12: PageIndexChanged 이벤트 핸들러 메서드의 모습

이 예제를 실행해 보면 아래 그림과 같이 페이지를 클릭할 때마다 Label 컨트롤에 텍스트가 출력됩니다.

그림 13: 예제를 실행한 모습

4.9 ASP.NET AJAX 1.0 지원

마지막으로 Pager 컨트롤은 ASP.NET AJAX 1.0의 UpdatePanel 컨트롤 내부에서 사용될 수 있으며 UpdatePanel 컨트롤의 Trigger 컨트롤로도 지정될 수 있습니다. 현재까지 테스트 해 본 바로는 별다른 문제는 없으나 혹시 모르기 때문에 현재 ASP.NET AJAX 1.0을 이용해서 프로젝트를 진행하시는 분들은 한 번쯤 테스트 부탁드립니다. (_ _) 꾸벅~

이상으로 Pager 컨트롤의 기능을 하나씩 소개해 드렸습니다. 보시기에 어떨지 모르겠네요. 저는 개인적으로 이 글을 써놓고보니 상당히 조잡스러워 보인다는...ㅡㅡ;;;;

담번엔 좀 더 간지나는 컨트롤을 만들어 봐야겠습니다. ^^;;

그럼 좋은 하루 되시고 많이 많이 사용해 주세요.

사용 후 문제 보고 또는 문의는 geniex 앳 msn.com으로 부탁드립니다.

감사합니다~

Written by webgenie

http://www.bullog.net

Microsoft MVP: Visual Devleoper - ASP/ASP.NET

[웹닷컴피그]

와우!! 멋진걸여!! ㅋㅋㅋㅋㅋㅋㅋㅋ

[빛꽈소금]

이거 써볼려다가 혼자서는 도저히 몰르겠던데에 ㅋㅋㅋ 함 해볼께요~ ㅋㅋ

[2 Jordan 3]

좋은 자료 감사합니다~(__)

[코스모스]

오~

[하늘구름]

좋은자료 감사합니다.